• 安装

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

• 使用

在入口文件中添加配置

import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'

Sentry.init({
    dsn: 'xxx',
    integrations: [new Integrations.BrowserTracing()],
    environment: 'xx',
    tracesSampleRate: 1.0,
  });

dsn：
environment：环境，在sentry中生成不同的环境
tracesSampleRate：0-1，控制给定事务发送到 Sentry 的概率百分比。0 表示 0%，1 表示 100%

如果使用的是 React 16 或更高版本，则可以使用 Error Boundary 组件将组件树内部的 Javascript 错误自动发送到 Sentry，并设置回退 UI至ErrorComp（自定义的异常展示页面组件）

import * as Sentry from '@sentry/react'

<Sentry.ErrorBoundary fallback={<ErrorComp />}>
</Sentry.ErrorBoundary>

• 前端启动

手动抛出异常，在sentry平台查看

 <div
   className={style['hit']}
   onClick={() => {
     throw Error('报错啦=====这里')
   }}>
   点击报错
 </div>

问题导航处就会发现一个新的issue，打开后可以看到详细信息，其中会发现并不能准确的找到源代码的错误位置，只是会有整个错误的路径和出错人的操作系统，浏览器信息等

• 为了方便我们准确快速定位问题，我们需要配置sourceMap来定位源码，上传 sourceMap 到 sentry 上。

1. 首先安装@sentry/webpack-plugin这个包

npm i @sentry/webpack-plugin

2. 然后在webpack中使用插件，进行相关参数配置

const SentryWebpackPlugin = require('@sentry/webpack-plugin')
{
  // 一般线上选择hidden-source-map模式 测试环境选用source-map
  devtool: 'source-map',
  // 将 Webpack 插件设置为最后运行的插件  否则插件收到的 source maps 可能不是最终的
  plugins: [
     new SentryWebpackPlugin({
	  include: path.resolve(__dirname, '../build/static/js/'), //需要上传到sentry服务器的文件，只需上传.map文件即可
	  ignore: ['node_modules', 'webpack.config.js'],//忽略文件夹或文件不要被检测
	  configFile: '../.sentryclirc',//用来替代第二步的.sentryclirc文件 需要有对应的文件 默认不配置即可
	  urlPrefix: '~/micro-loans/static/js/',//自己项目中访问.map静态资源的文件夹的地址
	  release：每次上传sourcemap是一次release的过程，如果init时没有配置release属性，sentry会自动生成一个随机数作为release版本；配置的话需要init和webpack配置中的一致
	})
  ]
}

3. 在项目根目录新建.sentryclirc文件，进行sentry项目地址等相关配置

[defaults]
project=项目名称
org=组织settings -> settings/organization-slug
url=sentry地址

[auth]
token=sentry的Auth Token，settings -> account -> api -> auth-tokens

以上配置完成后，sentry平台内部会做map文件和压缩js文件的关联，一般线上环境我们需要将.map文件删除，防止源代码暴漏，所以在构建之后需要手动命令删除rimraf ./build/*.map（根据项目生成的.map文件目录动态调整命令）

 "prod": "dotenv -e ./env/.prod npm run build && rimraf ./build/*.map",

4. 以上配置完成后会在sentry平台问题栏，看到对应报错源码信息，如下