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

原创已于 2022-06-24 11:08:00 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #vue.js

于 2022-03-01 10:04:18 首次发布

本文详细指导如何在项目中设置.sentryclirc文件和webpack配置，以便使用Sentry/webpack-plugin自动上传Sourcemap，包括API令牌、URL、项目名和组织设置，以及解决上传过程中的常见问题和配置Webpack以匹配Sentry版本。

配置文件

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

#注意！！！：新建时记得勾选project:write
在这里插入图片描述

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:"v2.2.2",
      include: ".",
      ignoreFile: ".sentrycliignore",
      ignore: ["node_modules", "webpack.config.js"],
      configFile: "sentry.properties",
      urlPrefix:"~/static/js" // 这里后面会有解释
    }),
  ],
};

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

Sentry.init({
  Vue,
  dsn: "https://930e20c084384f399125a19fe2615d60@o1154977.ingest.sentry.io/6235081", 
  release:"v2.2.2",
  integrations: [
    new BrowserTracing({
      logErrors: true,
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
});

官方文档:

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

打包构建

先打包

npm run build

打包后部署在服务器

定位源代码

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

在这里插入图片描述

点进去

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

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

sourceMap上传并生效后,如图可以切换Original等选项,切换后可以看到报错的代码内容
在这里插入图片描述

4.成功后的效果

经过以上配置，当我们的项目进行构建的时候会自动把dist/js路径下的map文件和js文件进行上传。

Tips

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

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

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

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

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

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

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

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

如果配置里配置了打包时不生成map文件，要把这个注释

  // 打包时不生成.map文件
  // productionSourceMap: false,

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

参考文章：参考文章