vue + sentry监控平台

1. 在sentry平台创建账户

平台地址: sentry.

2. 创建组织，创建项目

需要记住team名字，和项目名字，后续关联需要用到

3. 在项目中引入sentry

// @sentry/vue @sentry/tracing 是必须的， @sentry/webpack-plugin和sourceMap有关
npm install @sentry/vue @sentry/tracing @sentry/webpack-plugin

// main.js
import Vue from 'vue'
import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing
Sentry.init({
  Vue,
  dsn: 'your 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
})

创建完成后，官网也给出了引入教程，下图为官网贴图。

sentry便成功接入了，可以到项目中抛出一个报错，到sentry上刷新一下项目-issue便可发现报错记录已经生成。点击可查看详情。

但是此处线上代码是打包后的，不能具体到是哪里代码错误。此时便需要上传sourceMap到sentry平台，才可查看到具体代码报错。

4.上传sourceMap到sentry平台

上传sourceMap有 手动 和 自动 上传两种方式。这里只介绍自动上传
手动上传需要用到@sentry-cli ，感兴趣的可以自己去查看，本人试过后，有跨域的问题，sentry平台获取不到线上js包？具体不是很清楚。。。
自动上传sourceMap需要用到插件@sentry/webpack-plugin，步骤3中已安装@sentry/webpack-plugin，可直接进行下一步操作。

4.1 生成sentry的auth token信息

点击create new token 按钮，然后在默认选项基础上加勾选 【project：write】，便可以得到auth token（打码的就是）；

4.2 在根目录下创建.sentryclirc文件，配置环境文件

配置信息如下

// .sentryclirc
[auth]
token= your auth toekn


[defaults]
url=https://sentry.io/
org=your org
project= your projectName

// prod.env.js
"use strict";
const release = "test-01-2021-12-15"; // 版本号需要一致
process.env.RELEASE_VERSION = release;
module.exports = {
	NODE_ENV: '"production"',
	RELEASE_VERSION: `"${release}"`
};

不清楚org，project的可以查看organization settings下的信息

4.3 配置vue.config.js

const SentryCliPlugin = require('@sentry/webpack-plugin')

configureWebpack: {
    plugins: [
      new SentryCliPlugin({
        include: "./dist", // 打包后的文件夹
        release: process.env.RELEASE_VERSION, // 引用配置的版本号，版本号需要一致
        configFile: "sentry.properties",
        ignoreFile: '.gitignore',  // 指定忽略文件配置
        ignore: ['node_modules', 'webpack.config.js'], 
        // configFile: './.sentryclirc',   // 指定sentry上传配置
        urlPrefix: '~/'   // 保持与publicpath相符
      })
    ]
}

// ！ 需要打开配置里生成sourceMap的配置项
/* # 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。*/
productionSourceMap: true

然后打包npm run build，部署到线上。然后线上抛出报错测试一下。

这几个接口应该就是sentry捕获报错。

具体效果如图，上传sourceMap后可以看到具体报错代码，问题定位准确。