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

配置文件

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

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

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

webpack目录.sentryclirc文件
webpack目录.sentryclirc文件

2.sentryclirc文件中的配置内容

[auth]  
token=f0a0ee24d2cd4b2eade96280e1698762c5df9bac87ea423a6dbe3090f3a3a72

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

3.配置中的参数说明

token

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

sentry API key
sentry API key

url

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

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

sentry 自定义的域名
sentry 自定义的域名

project

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

sentry 项目
sentry 项目

org

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

sentry 组织
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://b34a0ccbec8f406cabc95024690512b@dsx2016fe.xxx.cc//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打包
webpack打包

访问网站

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

sentry错误日志
sentry错误日志

定位源代码

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

sentry 源码
sentry 源码

2.查看错误日志

随便找一个错误日志

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

sentry错误日志
sentry错误日志

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

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

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

sentry source map
sentry source map

Tips

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

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

  2. tokenAPI令牌,需要自己创建,不是错以为是设置中的安全令牌或者其他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
webpack source map

END.