前言

如果没有souce map,那么通过sentry监控和维护项目的难度就会变得很不友好。

步骤

一般来说你需要检查如下几个步骤，来确保sentry中的source map功能生效：

1. 检查本地source map调试没有问题
2. 检查source map是否成功上传到sentry

【1. 检查本地source map调试没有问题】

这个主要针对webpack4.x 和 webpack 5.x，参照webpack官网或者参照如下配置生成.map文件

var webpackConfig = merge(baseWebpackConfig, {
  devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          sourceMap: true
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }
      })
    ]
  },
})

生成后可以检查.map文件：

{
    "version": 3,
    "file": "app.js",
    "sources": [],//可以为空，但是一般生成的都有
    "sourcesContent": [],//不能为空
    "names": [], //不能为空
}

这些字段具体的含义可以参考：

jishuin.proginn.com/p/763bfbd66…

zhuanlan.zhihu.com/p/104519418

【2. 检查source map是否成功上传到sentry】

上传source map到sentry：

1. 项目根目录配置.sentryclirc

 [defaults]
 project=wx-qy-external
 org=sentry
 url=https://sentry-chd.dxy.net/

 [auth]
 token=3657ab3fb0db445bbdfcb1a6fdd379eac2d21436864f4f9a90546e91e75defb1   

其中：

• url：必填，Sentry 服务地址

• org：必填，Sentry 组织名称。

• project: 必填，Sentry 项目名称。

• auth：必填，可以读取到 Sentry 项目数据的 Api Auth Token。

`auth 设置方式：Settings > Account > API > Auth Tokens，参考文档：https://docs.sentry.io/api/`

2. 通过@sentry/webpack-plugin上传sentry相关配置

在安装@sentry/webpack-plugin的时候通常会失败，你需要在项目中的.nmprc（没有就新建一个）中配置下面一段代码

// .npmrc
ENTRYCLI_CDNURL = https://cdn.npm.taobao.org/dist/sentry-cli
sentrycli_cdnurl= https://cdn.npm.taobao.org/dist/sentry-cli

安装@sentry/webpack-plugin

npm install @sentry/webpack-plugin

配置webpack中的plugins:

var SentryPlugin = require('@sentry/webpack-plugin')


plugins: [
      new SentryPlugin({
        release: `source-map-wx-qy-external-2.0`,
        include: '',
        urlPrefix: 'https://assets.dxycdn.com/gitrepo/wx-qy-external_develop/dist', //重要！！！只要你的js地址和index.html地址不一样，就要配置，所以直接干脆都要配起来，这个sentry本身的逻辑要用到
        ignore: ['node_modules', 'build']
      })
]

3. 在项目代码中调用sentry初始化函数

  Sentry.init({
    Vue,
    dsn: 'https://b260a03ad2be42498e121a2c5614507b@sentry-chd.dxy.net/18', //从Settings ===> 组织名 ===> 项目名 ===> Client Keys中拿
    integrations: [new Integrations.BrowserTracing()],

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0
  })

检查上传情况：

releases ===> 选择自己的那个release（这个是自己将source map上传到sentry时填写的）===> Source Maps ===> 查看里面的source map文件是否为空

实践

最后通过触发异常情况，在issues中查看source map 是否生效

完