vue项目前端错误收集之sentry教程详解

2020-06-13 10:47:24易采站长站整理

错误信息查看

在后台找到我们的test项目,点击进去就能看到多了一条错误信息。

 

点击信息可以进入信息详情进行查看。

 

但是这个错误信息是压缩后的,不能定位到代码的实际位置。使用意义不大,因此需要上传 source-map 。

上传source-map

上传的方式有多种。可以通过 sentry-cli 通过命令行的方式来上传 source-map ,但是需要手动上传。也可以采用 webpack-plugin 这个插件,可以在 build 的同时自动上传 source-map 。本文采用自动上传策略。

项目配置:


// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
new SentryCliPlugin({
include: "./dist",
release: process.env.RELEASE_VERSION,
configFile: "sentry.properties"
})
]// main.js
Sentry.init({
dsn: "https://4ec86726f2ba40338f66837c6b959eed@sentry.io/1447158",
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
}),
new Integrations.RewriteFrames()
],
release: process.env.RELEASE_VERSION
});
// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
NODE_ENV: '"production"',
RELEASE_VERSION: `"${release}"`
};

需要保证 plugins 和 Sentry.init 两个配置中的 release 版本号相同,这样的话 sentry 才能将 source-map 文件一一对应上。

修改完之后我们重新build一下项目,build的过程比较慢:

 

之后我们去后台可以看见在版本中多了一个 test-1 版本,也就是我们刚刚上传的版本。

 

点进去可以看见我们刚才上传的 source-map 文件。

 

这时我们重新触发一次错误,就可以看到具体的出错位置了。

 

sentry关联github

在设置->集成里面可以设置 sentry 关联各种服务,如 github、jira 等。关联上 github 后,可以直接为该异常创建issue。

 

这样在该异常的详情页就可以创建issue到 sentry 这个仓库了。

 

创建时可以选择仓库,名称,详情及指定给谁: