错误信息查看
在后台找到我们的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 这个仓库了。
创建时可以选择仓库,名称,详情及指定给谁:










