🔰「前端监控」 Sentry搭建异常监控系统

450 阅读3分钟

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

内容目录

  • Python3 环境
  • Docker 环境
  • 安装 Sentry
  • 配置监听项目

环境搭建

自 2020 年 12 月 4 日起,Sentry 默认使用 Python 3。 Sentry 21.1.0 之后的版本不在支持 Python2。

Python3环境

安装方式可在 Python 官网下载最新的安装包,也可以使用 brew 方式安装。

这里使用 brew 方式安装:

brew install python

由于 Mac 自带 Python 版本是 2.x,需要将命令改成 python3

python3 --version

如果觉得 python3 命令怪怪的,我们可以在 .bash_profile 文件增加一行。

# 查看 python 3 路径
which python3

# 将 python 指定到 python 3 位置
echo "# python \n alias python=/Library/Frameworks/Python.framework/Versions/3.9/bin/python3" >> ~/.bash_profile

# 记得修改完后,需要 source 一下
source ~/.bash_profile

现在使用 python --version 来验证一下我们的配置。

安装 Docker

这里直接从官网下载:
www.docker.com/get-started

安装完成后,设置一下镜像源:

点击顶部任务栏的 Docker 图标,选择 Preferences...

475851ecd026b2abe7208b8d05205565.png

接下来,点击左边的 Docker Engine,在右边输入区域增加 registry-mirrors 配置。

{
	...
	"registry-mirrors": ["https://registry.cn-hangzhou.aliyuncs.com"]
}

再右下角点击 Apply & Restart 按钮,保存并重启 Docker。

安装 Sentry

从 github 上下载最新的 Sentry 版本:

git clone https://github.com/getsentry/onpremise.git

安装过程中如果不想被 “是否创建用户” 的提示阻止,可以加上 --no-user-prompt

cd onpremise
./install.sh

截屏2021-10-12 下午3.25.18.png

🆘 如果出现出现 ./install/_lib.sh: line 15: realpath: command not found 错误。

原因: github.com/getsentry/o…

解决办法: 安装 coreutils

brew install coreutils

再执行 ./install.sh

🆘 如果出现出现 FAIL: Required minimum RAM available to Docker is 3800 MB, found 1987 MB

原因:内存分配小了,需要大于3800 MB,调整下内存就行

5c5de01a6ae1dadd8ae7fb6449a79285.png

再执行 ./install.sh

下载镜像中,持续时间比较长,耐心等待

截屏2021-10-12 下午2.26.34.png

  • 耐心等待 。。。

截屏2021-10-12 下午3.48.26.png

  • 输入账户名 密码

截屏2021-10-12 下午3.52.02.png

  • 当看到上图表示已经全部完成了,执行 docker-compose up -d 命令启动Sentry。
docker-compose up -d

截屏2021-10-12 下午3.58.31.png

按照默认配置构建后,Sentry 默认绑定 9000 端口,访问 http://127.0.0.1:9000 即可进入登录页面。

截屏2021-10-12 下午4.00.36.png

  • 输入之前账号,密码

截屏2021-10-12 下午4.02.02.png

  • 填写所需信息完成配置

配置监听项目

1. 选择自己的项目( react为例)

f3b33afc4320e117a6f4bd5cd518e1d0.png 1.jpg

2. 进入配置流程

2.jpg

  • 首先安装@Sentry/React 和@Sentry/tracing 软件包
# Using yarn
yarn add @sentry/react @sentry/tracing

# Using npm
npm install --save @sentry/react @sentry/tracing
  • 接下来,在初始化 React 之前,导入和初始化 Sentry 模块
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import App from "./App";


Sentry.init({
    // Sentry 项目的 dsn,可从项目设置中获取
    dsn: 'https://5a1944aed8544b3f8a49a3794bc38e3a@o1003502.ingest.sentry.io/5963969',
    // 初始参数配置内容
    integrations: [new Integrations.BrowserTracing()],
    // 触发异常后发送给 Sentry 的概率
    tracesSampleRate: 0.9,
    // 单个值在被截断之前可以具有的最大字符数
    maxValueLength: 9999999999999999,
});

ReactDOM.render(<App />, document.getElementById("root"));

// Can also use with React Concurrent Mode
// ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  • 上面的配置同时捕获错误和性能数据。若要减少捕获的性能数据量,请将 tracessamplierate 更改为0到1之间的值。在此步骤之后,Sentry 将报告由应用程序触发的任何未捕获的异常。您可以通过在应用程序中的某个地方引发异常来触发开发环境中的第一个事件。例如,呈现一个按钮,其 onClick 处理程序尝试调用一个不存在的方法:
// 写一个点击事件
const handleClick = () => {
    const a = {};
    console.log(a.b.c);
};

<button onClick={handleClick}>点击收集报错</button>

一旦你验证了库被正确地初始化并发送了一个测试事件,考虑访问我们完整的 React 文档。在那里你可以找到附加的说明,从反应错误边界,反应路由器,Redux 等有价值的上下文浮现。

截屏2021-09-22 下午8.09.30.png

阅读完整文档完整文档

「欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章」