sentry使用webpack上传sourceMap源文件定位错误到更详细具体的代码片段

原文链接：https://dsx2016.com/?p=1220

公众号：大师兄2016

配置文件

sentry上传sourMap的前提是先设置webpack的配置文件

1.在项目文件的根目录新建一个.sentryclirc文件

sentry会自动检测并使用.sentryclirc文件中的配置信息

webpack目录.sentryclirc文件

2.sentryclirc文件中的配置内容

[auth]  
token=f0a0ee24d2cd4b2eade96280e1698762c5df9bac87ea423a6dbe3090f3a3a72
​
[defaults]
url = https://dsx2016.youdomain.cc/
project=projectName
org=sentry

3.配置中的参数说明

token

token为API令牌,不是安全令牌,在sentry的设置中不要弄混淆了

sentry API key

url

如果是是官方网站,则参考官方文档

本位这里为自建的sentry,所以url设置为自定义的域名

sentry 自定义的域名

project

项目名称从项目面板查看即可

sentry 项目

org

注意这里是组织,不是团队,不要弄错了

sentry 组织

官方文档:

https://docs.sentry.io/cli/configuration/

更多其他配置和参数,请参考sentry官方文档中的内容

WebPack插件

上传sourcemap的方式有很多种,如手动上传和sentry-cli上传

本文使用的是sentry/webpack-plugin(webpack插件),它的特点是

• 自动化,比如其他几种方式要更为方便

• 相对安全,自己构建sourceMap文件,上传后删除,不会影响到线上,不会暴露token和密钥等信息

• 安装和操作简单,两步设置完成

1.安装插件

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

2.在项目中配置

在webpack.config.js中配置

// 引入插件
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
// 设置插件内容
module.exports = {
  // 其他配置
  plugins: [
    // 建议放在pluins的最后面
    new SentryWebpackPlugin({
      release:"v1.0.1",
      include: ".",
      ignoreFile: ".sentrycliignore",
      ignore: ["node_modules", "webpack.config.js"],
      configFile: "sentry.properties",
      urlPrefix:"~/static/js"
    }),
  ],
};

记得版本号和sentry初始化的版本号保持一致

Sentry.init({
  dsn: "http://[email protected]//2",
  release:"v1.0.1",
  integrations: [new VueIntegration({ Vue, attachProps: true ,logErrors: true}),new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0, // Be sure to lower this in production
});

官方文档:

https://docs.sentry.io/platforms/javascript/config/sourcemaps/#webpack

打包构建

先打包

npm run build

然后到打包好的文件启动服务

这里使用http-server,没有安装过的可以先安装

npm install http-server -g

运行

http-server

webpack打包

访问网站

产生预先设置的错误,让sentry捕捉并记录日志

sentry错误日志

定位源代码

1.查看发布的版本,从对应版本进入项目

sentry 源码

2.查看错误日志

随便找一个错误日志

没有错误,可以在构建前手动创建一个错误看看效果

sentry错误日志

3.切换配置,查看源码信息

上传sourceMap前只有 Full和Raw两个选项,而且错误日志不是很明确,不能定位到发生错误的地方

sourceMap上传并生效后,如图可以切换Original等选项,切换后可以看到报错的代码内容

sentry source map

Tips

在上传sourceMap的时候会遇到几个坑

1. 安装插件前要先配置.sentryclirc文件,只有插件是无法上传到指定项目的

2. token为API令牌,需要自己创建,不是错以为是设置中的安全令牌或者其他key

3. 插件方法SentryWebpackPlugin中要设置release参数指定版本,同时Sentry.init方法中也要release参数指定版本,两个版本号需要保持一致,sourceMap才会生效

4. 即便上传了sourceMap和保持release版本号一致,还需要一个文件路径的配置,方便sourceMap定位到要访问的文件,需要指定urlPrefix参数

   1. urlPrefix不设置的话,默认为~/,~代表网站的协议和域名

   2. map文件一般被webpack打包在根目录/static/js/的文件夹下,如访问https://dsx2016.com,那么map文件就是https://dsx2016.com/static/js/xxx.map,所以要指定urlPrefix为"~/static/js"

   3. 如果经过nginx等代理导致目录更深一级等,就加入到对应的前缀即可,如果nginx代理网站为https://dsx2016.com/home,那么map文件就是https://dsx2016.com/home/static/js/xxx.map,所以要指定urlPrefix为"~/home/static/js",具体的目录看具体的场景,直接看打包好部署的map在哪个文件即可

5. 只需要指定在生产环境(线上环境)上传map即可,即build的时候,run dev太频繁,不需要source map,上传sourceMap文件过于频繁,sentry会报错,如在webpack.prod.conf.js文件中配置等

webpack source map

END.