错误监控——自建sentry

创建sentry服务端

下载最新版本镜像

地址：https://github.com/getsentry/self-hosted/releases/tag/22.8.0

运行批处理文件

./install.sh
1

启动docker-compose环境

docker-compose up -d
1

打开本地服务

http://localhost:9000/

登入账号

---

进行客户端配置

以React为例

首先安装配置环境

npm install --save @sentry/react @sentry/tracing
1

将sentry配置放入项目中

时机应当尽可能的早

import React from "react";
import { createRoot } from 'react-dom/client'
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
import App from "./app.jsx";

Sentry.init({
  dsn: "http://0324e0c287304017bf1cba0deabf5445@localhost:9000/4",
  integrations: [new BrowserTracing()],
  release: 'test2',
  tracesSampleRate: 1.0,
});

const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<App tab="home" />);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

此时报错已经可以上报给服务器了

---

错误追踪

sentry-cli环境配置

由于我们下面会用到sentry-cli，为了避免多次在命令行传入信息，先来进行环境配置

安装sentry-cli框架

npm i @sentry/cli -g 
1

或

npm install sentry-cli-binary -g
1

获取API Token

进入 <你的服务器地址>/settings/account/api/auth-tokens/
点击创建新API Token

NOTE：记得勾选project:write

登录sentry

sentry-cli login
1

此时控制台显示以下信息，token处填入上一步获取到的token即可

Sentry server: sentry.io
Open browser now? [y/n] y
Enter your token:
1
2
3

输入完成之后会给你存储位置

Stored token in /Users/xxx/.sentryclirc
1

添加sentry配置
打开上一步存储的位置，进行信息补充

• url是sentry服务的地址
• org是个人面板种组织名称
• project是项目名称

[auth]
token=xxx

[defaults]
url=<你的服务器地址>
org=<你的组织地址>
project=<你的项目地址>
1
2
3
4
5
6
7

上传sourceMap

由于生产环境发布的内容往往已经经过了压缩，因此上报的信息是无法对应到源码行列号的。可以通过往sentry服务端上传sourceMap的方式来进行错误追踪

方案一：直接上传

创建release

sentry-cli releases -o sentry new -p react test1
1

参数说明：

• -o:组织的名字
• -p:项目的名称
• test1: 这个是release的名称

以上的组织名称、项目名称、release名称都是自己起的。按照实际情况填写就可以了。因为项目相关信息填写多处用到，可以直接配置sentry-cli。参见sentry-cli部分

发布sourceMap

sentry-cli releases files test1 upload-sourcemaps --url-prefix "~/js" --validate ./dist/js
1

此时该项目的错误上报可以追踪到具体的行列号了

方案二：配置webpack插件

 devtool: 'source-map',
 plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration - can also be done directly through sentry-cli
      // see https://docs.sentry.io/product/cli/configuration/ for details
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: "sentry",
      project: "react",
      release: "test2",
      include: ".",
      ignore: ["node_modules", "webpack.config.js"],
    })
 ]
1
2
3
4
5
6
7
8
9
10
11
12
13

将该配置放在生产环境下，打包后可自动上传sourceMap