10分钟快速在Mac中搭建前端异常监控系统

1,067 阅读4分钟

在Mac中搭建sentry

准备工作

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

  • Python 3
  • Docker
  • Sentry
下载安装docker

从官网下载:www.docker.com/get-started

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

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

01.png

02.png

{
  "builder": {
    "gc": {
      "defaultKeepStorage": "20GB",
      "enabled": true
    }
  },
  "debug": true,
  "experimental": false,
  "registry-mirrors": [
    "https://registry.cn-hangzhou.aliyuncs.com"
  ]
}

安装Sentry(官方提供部署在docker上的方法)

从github上克隆项目

git clone https://github.com/getsentry/self-hosted.git

克隆完后进入到该目录,使用以下命令安装:

./install.sh

在安装的过程中会去检查版本是否是最新的,以及在终端会询问“是否创建用户”

跳过版本检查:--skip-commit-check
跳过“是否创建用户的提示”:--no-user-prompt

安装过程可能遇到的错误

1、错误./install/_lib.sh: line 19: realpath: command not found

解决方法:安装完coreutils再执行./install.sh

brew install coreutils
2、错误FAIL: The CPU your machine is running on does not support the SSE 4.2 instruction set, which is required for one of the services Sentry uses (Clickhouse).

失败:机器运行的CPU不支持SSE 4.2指令集,这是Sentry使用的一项服务(Clickhouse)所必需的。

由于SSE指令集是Intel推出的,所以在m1芯片上无法使用。。。 解决方法:换一台电脑来安装

3、Unable to connect to deb.debian.org

出现无法连接的时候,换个网络 stackoverflow.com/questions/6…

坑:如果翻墙会导致某些ip无法请求到,所以在安装的时候翻墙报错之后,再重新不翻墙安装一次

安装完成,启动服务

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

03.png

webpack自动上传source-map

webpack.config.js 文件配置


// 使用sentry/webpack-plugin插件
const SentryWebpackPlugin = require('@sentry/webpack-plugin')

// 获取package.json的版本信息
const packageInfo = require('./package.json')

new SentryWebpackPlugin({
    include: './dist',
    configFile: 'sentry.properties', // 默认不用改
    release: packageInfo.version, // 版本号
    ignore: ['node_modules', 'webpack.config.js'], // 忽略文件
    urlPrefix: '~/inficloud/inficloud-workbench-ui/dist/js/', // 天坑,这个主意看下面的解释
}),

urlPrefix这个属性需要填什么,举个例子:

我资源的路径是:http://localhost:8070/inficloud/inficloud-workbench-ui/dist/js/xxxx.js

urlPrefix就需要填'~/inficloud/inficloud-workbench-ui/dist/js/'

否则会出现source map上传成功,但是无法定位到对应源码的位置的情况

在项目根目录创建:.sentryclirc 文件,配置如下:

[auth]
token=d3e0c96cd92c498ba6c849e2fd92d6145f679e75c14740d7ae4e3317e22dc7d6
[defaults]
url = http://localhost:9000
org=sentry // 组织名称
project=workbench-local // 项目名称

获取token 04.png

获取org: 05.png

获取项目名称: 06.png

项目入口:release填入对应版本号

Sentry.init({
    Vue,
    dsn: 'http://16dedd78b95c44dc830be6002bb53b4e@localhost:9000/2',
    integrations: [
        new Integrations.BrowserTracing({
            release: INFICLOUD_VERSION,
            routingInstrumentation: Sentry.vueRouterInstrumentation(router),
            tracingOrigins: ['localhost', 'my-site-url.com', /^\//],
        }),
    ],
    tracesSampleRate: 1.0,
})

开启警报发现异常时,发送邮箱通知

添加警报规则

07.png

08.png

09.png

用户个人通知设置

10.png

高级用法

手动上报错误信息

除了自动上报,还可以通过Sentry.captureMessage 手动进行上报:

Sentry.captureMessage("手动上报错误")

额外信息上报

当前 Sentry 除了上报错误信息之外,还包括一些基本的浏览器信息和系统信息,除此之外,还可以额外自定义一些信息进行上报。提供这一能力的称为 Scope。其可以包含 user、tags、level、fingerprint、extra data 等丰富信息,分别通过 scope.setUserscope.setTagsscope.setLevelscope.setFingerprintscope.setExra调用。

我们可以将用户的相关信息进行上报,将上报的错误与用户关联起来,当用户遇到线上故障的时候,我们就能够在 Sentry 后台利用用户的 ID 来搜索得到用户遇到了哪些错误。具体调用例子:

// 设置用户信息:
scope.setUser({
    id: userInfo.id,
    nickname: userInfo.nickname,
    username: userInfo.username,
    email: userInfo.email,
    isInternal: userInfo.isInternal,
    isInnerOrganization: userInfo.isInnerOrganization,
});
// 给事件定义标签:
scope.setTags({ ‘api’, ‘api/ list / get’})
// 设置事件的严重性:
scope.setLevel(‘error’)
// 设置事件的分组规则:
scope.setFingerprint(['{{ default }}', url])
// 设置附加数据:
scope.setExtra(‘data’, { request: { a: 1, b: 2 })

创建 scope 有两种方式:

  • 全局 scope:应用的所有的错误都被关联到当前 scope 信息
  • 局部 scope:应用于局部的错误

全局 scope 通过Sentry.configureScope 创建:

Sentry.configureScope(function (scope) {
  scope.setTag("my-tag", "my value");
  scope.setUser({
    id: 42,
    email: "john.doe@example.com",
  });
});

局部 scope 通过 Sentry.withScope 创建:

局部scope可以用来给特定的错误打标签,用来分类等,比如:订单错误,订单错误都打了这个标签后,可以在后台看到这个标签的所有错误。

这个操作会拷贝一个全局的副本,局部的会覆盖全局的,直到函数调用完成。需要主动抛出异常。

Sentry.withScope(function (scope) {
  scope.setTag("my-tag", "my value");
  scope.setLevel("warning");
  // will be tagged with my-tag="my value"
  Sentry.captureException(new Error("my error"));
});

// will not be tagged with my-tag
Sentry.captureException(new Error("my other error"));

环境区分

Sentry.init({
    Vue,
    dsn: "http://05cbc6d7939f488d92ccf94201feef0d@192.168.2.103:9000/2",
    environment: 'local', // 本地环境
    tracesSampleRate: 1.0,
})

环境管理界面:

11.png

参考文献

docker部署:www.cnblogs.com/JasonLong/p…

blog.csdn.net/qq_15057213…

www.cnblogs.com/qiezuimh/p/…

blog.csdn.net/weixin_3786…

zhuanlan.zhihu.com/p/161276192

源码学习 zhuanlan.zhihu.com/p/89539449