0、安装最新版Sentry
1、安装 @sentry/vue及@sentry/tracing
npm install --save @sentry/vue @sentry/tracing
2、引入并初始化
- 2.1 vue2版本
import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";
Vue.use(Router);
const router = new Router({
// ...
});
Sentry.init({
Vue,
dsn: '你的dsn',
integrations: [
new Integrations.BrowserTracing({
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
tracingOrigins: ['localhost', 'xx.com', /^\//],
}),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
release: `你自己定义版本`, // 版本号
logErrors: true, // 开发时一些报错会在控制台展示
attachProps: true,
});
// ...
new Vue({
router,
render: h => h(App),
}).$mount("#app");
- 2.2 vue3版本
import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";
const app = createApp({
// ...
});
const router = createRouter({
// ...
});
Sentry.init({
app,
dsn: "你的dsn",
integrations: [
new Integrations.BrowserTracing({
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
tracingOrigins: ["localhost", "my-site-url.com", /^\//],
}),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
release: `你自己定义版本`, // 版本号
logErrors: true, // 开发时一些报错会在控制台展示
attachProps: true,
});
app.use(router);
app.mount("#app");
上传Source Maps至sentry有两种方式，一种是Sentry Webpack plugin，另一种是sentry-cli，下面介绍一下这两种如何实现。当然推荐Sentry Webpack plugin的方式。
一、sentry-cli上传Source Maps至sentry
1、安装sentry-cli
npm install -g @sentry/cli --unsafe-perm
2、登录sentry-cli并输入Auth Tokens
sentry-cli --url https://你的sentry服务地址/ login
命令行会提示 是否打开https://你的sentry服务地址/settings/account/api/auth-tokens/，以便生成或查看Auth Tokens，此时建议打开。打开后，需要勾选project:write再创建Auth Tokens
image.png
image.png
3、修改配置文件
上述步骤完成后， win10 会在C:\Users\你的系统用户名\.sentryclirc生成.sentryclirc配置文件，
[auth]
token=你的token
此时我们可以新增默认的sentry服务地址、org、project
[auth]
token=xxxxxx
[defaults]
url=https://sentry.io/
org=sourceorg
project=source
org、project的对应关系如下：别搞错了（这里自己踩了一些坑）。
image.png
image.png
4、通过命令行上传source map文件
例如：
sentry-cli releases files demo-test001 upload-sourcemaps './workspace/dist/js' --url-prefix '~/mp-cli-lc-test/js' --log-level=debug
上面 demo-test001表示你项目发布的版本。
Sentry.init({
dsn: 'https://xxxxx.sentry.io/66666',
release:'demo-test001' // 发布的版本
});
'./workspace/dist/js'表示我本地的一些sourcemaps文件在里面；
'~/mp-cli-lc-test/js'中的 ~表示线上项目的主域名网址，例如我的线上项目地址是https://have-not-bug.github.io/mp-cli-lc-test/index.html，则~表示的是https://have-not-bug.github.io。
'~/mp-cli-lc-test/js'则表示我线上项目地址的js放在了https://have-not-bug.github.io/mp-cli-lc-test/js/里面
如果你项目中js是直接放在主域名网址的js文件夹下，例如 https://have-not-bug.github.io/js/，
则此时你的指令应该为
sentry-cli releases files demo-test001 upload-sourcemaps './workspace/dist/js' --url-prefix '~/js' --log-level=debug
image.png
5、确认最终发布demo-test001版本的sourcemaps
sentry-cli releases finalize demo-test001
6、进入sentry中查看上传成功的sourcemaps
image.png
image.png
ps：上传文件指令示例：
sentry-cli releases files demo-test001 upload './workspace/dist/js' --url-prefix '~/mp-cli-lc-test/js/' --log-level=debug
注意的坑：
Source Maps的文件名应与线上的js文件名一致。
参考资料：
1、https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/
2、https://segmentfault.com/a/1190000016975941
3、https://dsx2016.com/?p=1220
二、Sentry Webpack plugin自动上传Source Maps至sentry
1、安装@sentry/webpack-plugin
2、配置webpack文件
- 2.1 如果vue-cli为2版本
在项目根目录/build/webpack.prod.conf.js文件中添加如下代码
const SentryPlugin = require("@sentry/webpack-plugin");
//
module.exports = {
// ... other config above ...
plugins: [
new SentryPlugin({
release: process.env.NODE_ENV,// 版本参数 一定要与Sentry init时的release相同
include: path.join(__dirname,'../dist/static/js/'), // 这里一定要注意目录层级别搞错了
// include: './dist/static/js/',
ignoreFile: path.join(__dirname,'../.gitignore'), // 指定忽略文件配置,
ignore: [path.join(__dirname,'../node_modules')],
// configFile: '../.sentryclirc', // 指定sentry上传配置,
urlPrefix: '~/static/js',
authToken: '你的authToken',
org: "sourceorg",
project: "你的project",
debug:true
}),
],
};
注意：这里include参数有个坑！之前我填写的是include: '../dist/static/js/'，在sentry官网source-maps页面上虽然显示了ARCHIVE，但工件数为0(即ARTIFACTS为zero/0)
image.png
，后来在@sentry/webpack-plugin中找到include参数进行打印发现，如果配置'./dist/static/js/'则能正确找到/dist/static/js/下的sourcemap，如果配置'../dist/static/js/'则找不到sourcemap文件，因此这里写的相对路径是相对这个项目的。而不是相对webpack.prod.conf.js这个文件的，因此需要把include的值改为'./dist/static/js/'或者path.join(__dirname,'../dist/static/js/') 。
- 2.2 如果vue-cli为3+版本
在vue.config.js中配置如下
const SentryCliPlugin = require('@sentry/webpack-plugin')
productionSourceMap: true 配置SourceMap
configureWebpack(config) {
if (process.env.NODE_ENV === 'production') {
config.plugin('sentry').use(SentryCliPlugin, [{
include: './dist', // 指定上传目录
ignoreFile: '.gitignore', // 指定忽略文件配置
release: process.env.VUE_APP_BASE_API, // 指定发布版本
ignore: ['node_modules', 'webpack.config.js'],
configFile: './.sentryclirc', // 指定sentry上传配置
urlPrefix: '~/' // 保持与publicpath相符
}])
}
}
如果想将.map文件单独生成在'./dist/sourceMap'，则需要在vue.config.js中配置sourceMap文件目录
configureWebpack(config) {
config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js')
}
详见：使用@sentry/webpack-plugin上传SourceMap
三、fundebug UI上传Source Maps至fundebug
上传Source Maps至fundebug有三种上传方式：
这里仅简单说明前端UI上传方式，其他看文档实践即可。
（一）前端UI上传方式一：
image.png
image.png
（二）前端UI上传方式二：
image.png
注意的坑：
Source Maps的文件名应与线上的js文件名一致，就算线上js文件里写名了sourceMappingURL=xxx也不行，否则会报未上传正确的sourceMap文件的错误。
网友评论