Sentry系列一——React接入Sentry完整教程

Sentry介绍与使用#

简介#

Sentry 是跨平台的应用程序监控，专注于错误报告。GitHub、官方网站

Sentry 翻译过来是「哨兵」的意思，可以监控程序代码中出现的报错问题，生成issue，通过查看issue快速定位到问题发生的位置。

使用#

安装

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

配置

在入口文件index.tsx中添加配置
```
1
/* 报错监控 */
2
if (process.env.NODE_ENV === 'production') {
3
  Sentry.init({
4
    dsn: 'https://aee8343989d243d682d58a5b0cd0b4d7@sentry-monitor.quickcep.com/2',
5
    integrations: [new Integrations.BrowserTracing()],
6
    maxBreadcrumbs: 50,
7
    environment: env.isProd ? 'prod' : 'dev',
8
    tracesSampleRate: 1.0,
9
  });
10
}
```
- dsn：Data Source Name错误报告发送的地址，获取Settings -> Projects -> Client Keys (DSN)
- integrations
- maxBreadcrumbs：这个变量控制应该捕获的面包屑总数。默认值为 100。
- environment：环境，在sentry中生成不同的环境
- tracesSampleRate：0-1，控制给定事务发送到 Sentry 的概率百分比。0 表示 0%，1 表示 100%
- 更多配置

在组件中增加ErrorBoundary组件，会自动将报错信息发送到Sentry，并回退UI

1
import {ErrorBoundary} from '@sentry/react'
2

3
const DefaultErrorBoundary = ({children}) => {
4
  return  <ErrorBoundary fallback={<><h2>请刷新页面重新操作</h2></>}>
5
    {children}
6
  </ErrorBoundary>
7
}
8
export default DefaultErrorBoundary;

fallback (React.ReactNode or Function)：当错误边界捕获错误时要呈现的 React 元素

beforeCapture：在将错误发送到 Sentry 之前调用的函数，允许将额外的标签或上下文添加到错误中

1
beforeCapture={(scope) => {
2
  scope.setTag('storeId', Number(ls.getItem('quick-storeId')));
3
  scope.setTag('userId', user?.staffInfo?.userId);
4
  scope.setTag('currentTime', moment().format('YYYY-MM-DD HH:mm:ss'));
5
  scope.setTag('pathname', window.location.pathname);
6
}}

更多配置

原理#

Javascript代码发生错误后，Javascript引擎会抛出一个Error对象，并触发window.onerror事件，Sentry正是对window.onerror进行重写，实现错误监控的逻辑，并添加了很多信息帮助错误定位，并对错误进行滚跨浏览器的兼容等

window.onerror

捕获基本的js错误，但不能获取到资源加载失败的情况，必须使用window.addEventListener(‘error’)才行

Promise

Promise 如果reject没被catch的话，不能被window.onerror捕获，需要使用unhandledrejection捕获

1
window.addEventListener("unhandledrejection", event => {
2
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
3
});

Vue的Vue.config.errorHandler

Sentry对Vue.config.errorHandler进行重写

1
function vuePlugin(Raven, Vue) {
2
  var _oldOnError = Vue.config.errorHandler;
3
  Vue.config.errorHandler = function VueErrorHandler(error, vm, info) {
4
    // 上报
5
    Raven.captureException(error, {
6
      extra: metaData
7
    });
8

9
    if (typeof _oldOnError === 'function') {
10
      // 为什么这么做？
11
      _oldOnError.call(this, error, vm, info);
12
    }
13
  };
14
}
15
module.exports = vuePlugin;

React的ErrorBoundary

1
/**
2
* A ErrorBoundary component that logs errors to Sentry.
3
* Requires React >= 16
4
*/
5
declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
6
    state: ErrorBoundaryState;
7
    componentDidCatch(error: Error, { componentStack }: React.ErrorInfo): void;
8
    componentDidMount(): void;
9
    componentWillUnmount(): void;
10
    resetErrorBoundary: () => void;
11
    render(): React.ReactNode;
12
}
13

14
// 真实上报的地方
15
ErrorBoundary.prototype.componentDidCatch = function (error, _a) {
16
  var _this = this;
17
  var componentStack = _a.componentStack;
18
  // 获取到配置的props
19
  var _b = this.props, beforeCapture = _b.beforeCapture, onError = _b.onError, showDialog = _b.showDialog, dialogOptions = _b.dialogOptions;
20
  withScope(function (scope) {
21
    // 上报之前做一些处理，相当于axios的请求拦截器
22
    if (beforeCapture) {
23
      beforeCapture(scope, error, componentStack);
24
    }
25
    // 上报
26
    var eventId = captureException(error, { contexts: { react: { componentStack: componentStack } } });
27
    // 开发者的回调
28
    if (onError) {
29
      onError(error, componentStack, eventId);
30
    }
31
    // 是否显示sentry的错误反馈组件（也是一种收集错误的方式）
32
    if (showDialog) {
33
      showReportDialog(__assign(__assign({}, dialogOptions), { eventId: eventId }));
34
    }
35
    // componentDidCatch is used over getDerivedStateFromError
36
    // so that componentStack is accessible through state.
37
    _this.setState({ error: error, componentStack: componentStack, eventId: eventId });
38
  });
39
};

请求

Sentry不能捕获异步操作、接口请求中的错误，比如404、500等，此时需要通过Sentry.caputureException()主动上报
- XHR通过拦截send和open
- fetch通过拦截整个方法
- axios通过请求/响应拦截器

接入SourceMap #

使用Sentry的webpack插件配置sourceMap，在构建的时候自动上传到Sentry，如果不上传SourceMap有些问题不好定位
Sentry一共提供了三种上传source map的方式

Sentry-cli#

文档

使用API上传#

文档

使用webpack plugins#

安装@sentry/webpack-plugin

1
npm install --save-dev @sentry/webpack-plugin

项目根目录添加.sentryclirc文件

1
[auth]
2
token = ef5b031a00964f3c8f8ccbca07bb03c1d950be4b33f24ff
3

4
[defaults]
5
url = https://sentry-monitor.xxx.com/
6
org = xxx
7
project = xxx

token：sentry的Auth Token，settings -> account -> api -> auth-tokens
url：sentry地址
org：组织settings -> settings/organization-slug
project：项目名称

配置webpack

1
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
2

3
module.exports = {
4
  // other webpack configuration
5
  devtool: 'source-map',
6
  // 将 Webpack 插件设置为最后运行的插件  否则插件收到的 source maps 可能不是最终的
7
  plugins: [
8
    new SentryWebpackPlugin({
9
      release:"v1.0.1",
10
      include: ".",
11
      ignore: ["node_modules", "webpack.config.js"],
12
      configFile: "sentry.properties",
13
    }),
14
  ],
15
};

release：每次上传sourcemap是一次release的过程，如果init时没有配置release属性，sentry会自动生成一个随机数作为release版本；配置的话需要init和webpack配置中的一致
include：指定路径让sentry-cli来检测有没有.map与.js文件，如果有就会上传到sentry
ignore: 忽略文件夹或文件不要被检测
configFile: 用来替代第二步的.sentryclirc文件需要有对应的文件默认不配置即可

在sentry上就会有对应项目的 Source Map 文件；（在settings -> projects -> xxx -> Source Maps）

测试

@sentry/webpack-plugin原理源码

在webpack的afterEmit钩子（在生成文件到output目录之后执行）中获取打包后的文件，过滤出文件类型为/\.js$|\.map$/结尾的文件上传到对应的sentry服务器

1
// upload sourcemaps
2
apply(compiler) {
3
  // afterEmit在生成文件到output目录之后执行
4
  compiler.hooks.afterEmit.tapAsync(this.name, async (compilation, callback) => {
5
    const files = this.getFiles(compilation);
6
    try {
7
      await this.createRelease();
8
      await this.uploadFiles(files);
9
      console.info('\n\u001b[32mUpload successfully.\u001b[39m\n');
10
    } catch (error) {
11
      // todo
12
    }
13
    callback(null);
14
  });
15
}
16
 // 获取需要上传的文件
17
 getFiles(compilation) {
18
   // 通过 compilation.assets 获取我们需要的文件信息，格式信息
19
      // compilation.assets {
20
      // 'bundle.js': SizeOnlySource { _size: 212 },
21
      // 'bundle.js.map': SizeOnlySource { _size: 162 }
22
      // }
23
  return Object.keys(compilation.assets)
24
    .map((name) => {
25
    if (this.isIncludeOrExclude(name)) {
26
      return { name, filePath: this.getAssetPath(compilation, name) };
27
    }
28
    return null;
29
  })
30
    .filter(Boolean);
31
}
32
 // 获取文件的绝对路径
33
 getAssetPath(compilation, name) {
34
    return path.join(compilation.getPath(compilation.compiler.outputPath), name.split('?')[0]);
35
 }
36
 // 获取文件的绝对路径
37
 getAssetPath(compilation, name) {
38
    return path.join(compilation.getPath(compilation.compiler.outputPath), name.split('?')[0]);
39
 }
40
 // 上传文件
41
 async uploadFile({ filePath, name }) {
42
   console.log(filePath);
43
   try {
44
     await request({
45
       url: `${this.sentryReleaseUrl()}/${this.release}/files/`, // 上传的sentry路径
46
       method: 'POST',
47
       auth: {
48
         bearer: this.apiKey,
49
       },
50
       headers: {},
51
       formData: {
52
         file: fs.createReadStream(filePath),
53
         name: this.filenameTransform(name),
54
       },
55
     });
56
   } catch (e) {
57
     console.error(`uploadFile failed ${filePath}`);
58
   }
59
 }

webpack钩子

done: 编译完成后
beforeRun: 在编译器执行前
run: 在编译器开始读取记录前执行
emit: 在生成文件到output目录之前执行
afterEmit: 在生成文件到output目录之后执行
compilation: 创建compilation后
beforeCompile: 在编译前
compile: 创建compilation前
make:编译完成前

对比#

与其他的npm下载量对比

100%开源
私有化部署
支持大多数编程语言

音乐

音乐

Sentry介绍与使用#

简介#

使用#

原理#

接入SourceMap #

Sentry-cli#

使用API上传#

使用webpack plugins#

对比#

音乐

文章目录

音乐

音乐

Sentry系列一——React接入Sentry完整教程

Sentry介绍与使用#

简介#

使用#

原理#

接入SourceMap#

Sentry-cli#

使用API上传#

使用webpack plugins#

对比#

音乐

文章目录

接入SourceMap #