react项目接入sentry进行异常监控

简介

• sentry是一个基于Django构建的现代化的实时事件日志监控、记录和聚合平台,主要用于软件线上环境的异常监控

• 详细介绍:

  • https://juejin.cn/post/6844904143090352135
  • https://blog.csdn.net/weixin_37865166/article/details/108331613

• 官网: https://sentry.io/

**使用: **以webpack打包部署的react前端项目为例

• 项目中的 index.js

  import * as Sentry from '@sentry/react' import {BrowserTracing} from '@sentry/tracing' Sentry.init({ dsn: 'http://943f54ccea51460086faple10a22b7394@10.10.21.196:8093/8', //dsn release: 'v1.0.1', //版本号可不填 integrations: [new BrowserTracing()], tracesSampleRate: 1.0, }) ReactDOM.render( <Provider store={store}> {/* <Button onClick={this.handle}>测试</Button> */} <Router /> </Provider>, document.getElementById('root') )
  • 现在前端已接入sentry监控

• 对在sentry中的经webpack混淆后的打包文件报错消息加入sourceMap,更直观发现报错位置

  • npm i @sentry/webpack-plugin -D -S

  • webpack 配置

    const SentryWebpackPlugin = require('@sentry/webpack-plugin') plugins: [ new SentryWebpackPlugin({ release: 'v1.0.1', //对应上面init中的版本号,可在sentry中source Maps查看 include: '.', ignoreFile: '.sentrycliignore', ignore: ['node_modules', 'webpack.config.js'], configFile: 'sentry.properties', urlPrefix: '~/build/', //打包后map文件所在的路径 cleanArtifacts: true, //每次把sourceMap提交到sentry前清空sentry中的map,重要,必填 }), ]

  • 项目根目录下增加.sentryclirc文件

    [defaults] project=项目名 org=组织名 url=本地搭建的填写本地的地址/官方的地址 [auth] token=API TOKEN