關於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 });
    });
  }