前端错误监控系统 sentry 使用 webpack-sentry-plugin 插件上传 source-map 文件

最近项目里使用了 sentry 来收集前端错误日志，但是线上收集到的错误信息定位到的是压缩混淆后的代码里，这导致我们很难定位到具体的位置。要定位错误到具体组件，我们需要上传 source-map 文件到 sentry 里，本文介绍一下怎么使用webpack-sentry-plugin 插件上传 source-map 文件到 sentry 里。

这里上传 source-map 文件并不仅仅只上传 source-map 文件，相应的js 文件也要一起上传的（上面说的插件两种文件都会上传）。但上传到 sentry 官网去安全性得不到保证，所以自建 sentry 系统很有必要。

webpack 配置里配置 devtool 为 source-map

export default {
    // mode: 'production',
    
    // webpack 配置里要加的很简单
    devtool: 'source-map',
    
    // ...
}

在生产环境里，要定位错误到具体组件，sourceMap 是绕不开的，sentry 需要根据 sourceMap 去分析错误的具体位置。
要定位错误到具体组件，webpack4 生产环境（mode: 'production'）里 devtool 应该配置 source-map 选项。source-map 会根据生成的 .js 文件生成同名的 .map 后缀名文件，.map 文件可能会比 .js 文件更大，所以一般加了 source-map 配置会影响编译速度，大概增加 15% 的编译时间。

对比一下有和没有source-map文件时 sentry 里显示的错误信息。
没有使用 source-map 的错误是这样的：

使用了 source-map 的错误是这样的：

很明显，下面的错误清晰多了。

webpack-sentry-plugin 插件使用

import SentryPlugin from 'webpack-sentry-plugin';
export default {
    // mode: 'production',
    
    plugins: [
        new SentryPlugin({
          // Sentry options are required
          organization: 'xxx',
          project: 'xxx',
          deleteAfterCompile: true,
          baseSentryURL: 'http://sentry.xxx/api/0',
          apiKey: 'xxx',
          // Release version name/hash is required
          release: function(hash) {
            return hash; // webpack build hash
          },
          filenameTransform: function (filename) {
            return '~/' + filename
          },
        }),
    ]
    
    // ...
}

配置说明

• organization、project，见上图；organization为组名，project 为当前项目名。
• deleteAfterCompile，这个是上传完 source-map 文件后要不要删除当前目录下的source-map 文件，最好设置为true，这样部署上线时 webpack 编译这一步完了就不会保留source-map 文件了，也就不会发布source-map 文件到线上去了。
• baseSentryURL，默认是 https://sentry.io/api/0，也即是上传到 sentry 官网上去，如果是自己搭建的 sentry 系统，那把sentry.io替换成你自己的sentry系统域名就行。
• apiKey，按下图去找。
  
• release，版本，string or function，每次编译生成一个版本，上面代码里的 function 应该可用（我是用当前编译的时间作为一个版本）。
• filenameTransform， 不记得是不是一定要有这个参数。

完事了，配置完了试试吧。