sentry 接入 source map

采用sentry监控前端错误的时候，我们会发现上传的错误很简单，基本上对排除错误没有太大帮助。如下图：

我们可以通过配置生成source map，并将其上传到sentry服务器（建议自建服务器，这样比较安全）。使报错信息更友好。

1、配置你的webpack 的devtool,使其生成source map，建议配置devtool为 hidden-source-map ，而不是网上一些资料推荐的cheap-module-source-map ，webpack文档里面线上环境并没有推荐cheap-module-source-map，且设置cheap-module-source-map呈现出来的错误信息也很简单。

2、采用webpack-sentry-plugin 上传生成的source map到自建sentry服务器

插件地址：https://github.com/40thieves/webpack-sentry-plugin

安装插件

npm install webpack-sentry-plugin --save-dev

将插件添加到webpack配置里，建议只在构建的情况下进行接入，本地开发就别接入插件了。

var config = {
 plugins: [
   new SentryPlugin({
     organization: 'your-organization-name', // 组织名称
     project: 'your-project-name', // 项目名称
     apiKey: process.env.SENTRY_API_KEY, 
     release(hash) { // release版本
        return `${projectName}-${hash.substr(0, 8)}`
     }，
     baseSentryURL: '自建服务器地址/api/0', // 配置指到我们的自建服务器，api/0 是固定
     include: /\.map$/   //正则，匹配哪些文件上传
   })
 ]
}

 

3、接入过程中的注意事项：

api key 在下面这个地方获取，如果还没人创建过，自己创建一个，记得勾上project:write

版本号

release(hash) {       

    return `${projectName}-${hash.substr(0, 8)}`

}

hash使webpack编译后产生的hash，下面的`${projectName}-${hash.substr(0, 8)}`使我自定义的，搭建可以根据自己的需要来。

 

4、接入过程中遇到的坑：

404 错误：一般是组织或者项目参数写错，导致拼接出来的请求地址找不到。注意组织指的是公司名称，而不是部们名称。

502错误：一般是上传太多文件导致服务器错误，添加include进行过滤，只上传map文件。

409错误：两次上传内容相同。