关于前端项目sentry的一些经验（2021-10-22）

[yaogengzhu]

问题

最近项目，用户出现了一些白屏反馈，经测试反复验证没有复现该问题。因此推sentry 来进行异常监控。

文档时飞书写的，不太好迁移，因此会丢一个附件 Sentry的基本配置 (前端接入）.pdf

Sentry的基本配置 (前端接入）
简单的接入方式
1. 需要去Sentry 后台注册自己的项目

2. 填好项目基本信息

3. Raect 项目指导文档地址 ( 以react项目为例）
https://docs.sentry.io/platforms/javascript/guides/react/
# Using npm
npm install --save @sentry/react @sentry/tracing
# Using yarn
yarn add @sentry/react @sentry/tracing


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({
  dsn: "xxxxxxx", // 项目的dsn
  integrations: [new Integrations.BrowserTracing()],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

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

// Can also use with React Concurrent Mode
// ReactDOM.createRoot(document.getElementById('root')).render(<App />);

关键步骤
在项目的入口文件，注册init 事件
关键点：dsn 
1. 找到自己的dsn 



完成到此时，项目的错误已经接入sentry, 按文档配置，本地跑项目，可以写个错误的脚本验证, 随便写的，
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";


Sentry.init({
  dsn: "xxxxx",
});

const App = () => {
    return <button onClick={onEvent}> ok </button>
}
ReactDOM.render(<App />, document.getElementById("root"))

此时，sentry已经可以捕获到错误信息了


source Map 映射方式
当然上面虽然捕获了异常，但是无法知道具体哪一行代码错了，此时可以将项目源代码进行上传
在项目根目录下新建 .sentryclirc 文件
[defaults]
url = https://sentry.bnq.com.cn/ # sentry路径
org = sentry # 组织名
project = xhcrm_h5 # 项目名字

[auth]
token = ********* token

1. 如何获取token


需要勾选project write。然后创建Token即可。

2. 修改webpack 配置 (可在生产环境配置即可）
const path = require('path');
const SentryCliPlugin = require('@sentry/webpack-plugin');
const resolve = (dir) => path.resolve(process.cwd(), dir);

// 在插件中，新增该插件，并且做如下配置即可
...
new SentryCliPlugin({
    include: resolve('public'), // 上传的打包文件，确保该文件中存在映射的socuremap文件
    ignoreFile: '.sentryclirc',
    ignore: ['node_modules'],
    configFile: 'sentry.properties',
}),
...


完成以上步骤后， 可以在Sentry 后台查看该文件



如果查看到以上文件，则代表代码已经上传成功。

在dev环境测试结果如下, 可以具体到哪一行报错

警告发送机器人添加参考后端文档
百安居Sentry使用手册（后端） 
接入成功后。如下 

[yaogengzhu]

发现一些比较好的文档

基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题