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上传
• API上传
• fundebug-cli批量上传

这里仅简单说明前端UI上传方式，其他看文档实践即可。

（一）前端UI上传方式一：

image.png image.png

（二）前端UI上传方式二：

image.png

注意的坑：
Source Maps的文件名应与线上的js文件名一致，就算线上js文件里写名了sourceMappingURL=xxx也不行，否则会报未上传正确的sourceMap文件的错误。