关于sentry踩坑记录（前端），实际项目开发

因为周围 的人用sentry开发的真的太少了，于是很多问题只能靠自己踩坑。遇到的问题：
项目结构为umi
1.对于sentry的了解不多，导致不知道在什么情况下sentry会有记录
2.关于sentry用webpack配置上传sourcemap。如果配置成功的话，项目npm run build会自动上传sourcemap。如果没有实现上传，说明配置失败了。
3.打包的时候都会更新release版本，所以都会上传一次sourcemap。也就是sourcemap不会在同一个版本号里面重复上传。
4.不知道能不能监控到线上的问题，这个问题等待测试:经测试，可以，但是还是需要多了解关于sentry能监控的问题。
5.项目配置开始
(1)安装webpack插件

(c)npm install @sentry/webpack-plugin --save-dev

(2)添加.sentryclirc文件到项目根目录下面，注意文件名一定要写对。

[defaults]
url=sentry服务的url
project = 项目名字
org= 项目组织

[auth]
token=api token

url:sentry上报的网址
org: 项目所在的组织
project :项目名称
token : api token（关于token ,一定要有project:write的权限 。）
（3）在umi中配置webpack插件（本次在.umirc.js进行配置的）

const SentryPlugin = require('@sentry/webpack-plugin');
export default {
  chainWebpack(config, { webpack }){
    // 拿不到process.env.RELEASE_VERSION
    if (process.env.UMI_ENV == 'prod'){//当为prod时候才进行sourcemap的上传，如果不判断，在项目运行的打包也会上传
      config.plugin("sentry").use(SentryPlugin, [{
        ignore: ['node_modules'],
        include: './dist', //上传dist文件的js
        configFile: './sentryclirc', //配置文件地址，这个一定要有，踩坑在这里，忘了写导致一直无法实现上传sourcemap
        release:release, //版本号，自己定义的变量，整个版本号在项目里面一定要对应
        deleteAfterCompile: true,
        urlPrefix: '~/static/' //cdn js的代码路径前缀
       }])
    }
  },
 }

（4）页面中初始化sentry，结合react的生命周期componentDidCatch

import * as Sentry from '@sentry/browser';//需要安装的
import {SENTRYSDK} from 'configs/constants' //SENTRYSDK是后端给的配置的，必须
//release ,要对应在webpack中配置的相同的版本号
Sentry.init({dsn:SENTRYSDK,release: process.env.RELEASE_VERSION,debug: true,});

//部分重要代码，
  componentDidCatch(error, errorInfo) {
    Sentry.withScope((scope) => {
      scope.setExtras(errorInfo);
      const eventId = Sentry.captureException(error);
      this.setState({ eventId });
    });
  }