react 接入 sentry 以及删除source-map配置sdk 上传source-map 首先设置 devtoo

总共有三步要做

注册 sentry 账号,新建项目, 去项目设置里获取 docs.sentry.io/product/sen… dsn
在构建时, 上传 source-map(非必须), 不传也能用, 只是错误了不知道错误位置
运行时(main.js), 调用 sentry.init

运行时(对应第三步)

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

Sentry.init({
  dsn: '',
  integrations: [new BrowserTracing()],
  environment: process.env.NODE_ENV,
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
})

构建时(对应第二步)

上传source-map

官方提供了两种方式, cli 和 webpack 插件, 看自己的需求,能 webpack 就 webpack,这里使用 webpack 的方式

首先设置 devtool: 'source-map',以便编译出map文件

在build之后上传source-map,

ps: 很多文章都是生产环境就上传, 是不合理的,因为本地环境可以链接生产库来调试, 这个时候process.env.NODE_ENV === 'production',此时不应该上传,上传 source-map 特别耗时

应该在 build 里执行, 但是大多数框架只有 procees.env.NODE_ENV 环境变量来区分开发|生产, 区分不了build, 这里借助 cross-env 声明一个环境变量UPLOAD_SOURCE_MAP 给 build 命令

修改 package.json

scripts:{
   "build": "cross-env UPLOAD_SOURCE_MAP=yes  umi build",
}

修改webpack配置

   // umi 的配置文件 config.ts
   const SentryWebpackPlugin = require('@sentry/webpack-plugin')
   const glob = require('glob')
   const { removeSync } = require('fs-extra')

     chainWebpack(memo, { env, webpack, createCSSRule }) {
    memo.when(process.env.UPLOAD_SOURCE_MAP === 'yes', (config) => {
      config.plugin('SentryWebpackPlugin').use(SentryWebpackPlugin, [
        {
          authToken: ',
          org: 'zuzhi',
          project: process.env.npm_package_name,
          release: process.env.npm_package_version,
        },
      ])
      
      // 上传之后删除source-map
      config.plugin('clearSourceMap').use({
        apply: (compiler: any) =>
          compiler.hooks.done.tap('clearSourceMap', (compilation: any) => {
            glob.sync('dist/**/*.js.map').forEach((f: string) => removeSync(f))
          }),
      })
    })
  },

在vite中使用,直接在vite.config.ts中使用process.env.UPLOAD_SOURCE_MAP 即可访问,不需要loadEnv啥的

上传之后需要删除map文件,因为map文件很大

参考:

删除source-map