错误监控工具-Sentry

1. 安装依赖

Vue安装：

npm i @sentry/browser
npm i @sentry/integrations

React安装：

npm i @sentry/react

2. 申请权限

Sentry中配置项目基本信息后，可以得到如下地址明确项目错误信息的上报地址：

https://<key>@report.url.cn/sentry/<project>

3、项目接入sentry

Vue接入：

// /src/index.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
const RELEASE_VERSION = require('../package.json').version
Sentry.init({
   dsn: "", // 步骤2所得到的地址
   integrations: [
       new Integrations.Vue({
           Vue,
           attachProps: true,
      }),
       new Integrations.RewriteFrames(),
  ],
   release: RELEASE_VERSION, // 版本号
});

React接入：

// /src/index.js
import * as Sentry from '@sentry/react';
const RELEASE_VERSION = require('../package.json').version
Sentry.init({
   dsn: "", // 步骤2所得到的地址
   release: RELEASE_VERSION, // 版本号
});

4、上传sourcemap

4.1 安装依赖

npm i @sentry/webpack-plugin -D

4.2 配置.sentryclirc文件

根目录下创建.sentryclirc文件：

[auth]
token=XXX // sentry中个人的token令牌
​
[defaults]
org=组织名称
project=projectName
url=http://sentry.oa.com/

4.3 配置webpack - vue2.0 + react

// webpack.prod.conf，参数解释详见参考资料
const SentryCliPlugin = require("@sentry/webpack-plugin");
const RELEASE_VERSION = require('../package.json').version
plugins:[
   new SentryCliPlugin({
         include: "./dist",
         release: RELEASE_VERSION,
         configFile: "sentry.properties",
         ignore: ['node_modules', 'webpack.config.js'],
         urlPrefix : "~/", // 正式环境的js的代码路径前缀
  })
]

4.4 配置webpack - vue3.0

// vue.config.js
const SentryPlugin = require("@sentry/webpack-plugin");
const RELEASE_VERSION = require('../package.json').version
module.exports = {
 productionSourceMap: true,
 chainWebpack: config => {
   config.plugin("sentry").use(SentryPlugin, [
    {
       ignore: ["node_modules"],
       include: "./dist", // 上传dist文件的js
       configFile: "./.sentryclirc", // 配置文件地址
       release: RELEASE_VERSION, // 版本号
       urlPrefix: "~/", // 正式环境的js的代码路径前缀
    },
  ]);
},
 // ...
}

@sentry/webpack-plugin在上传后不会删除sourceMap, 修改一下npm run build命令：

"scripts": {
    "build": "vue-cli-service build && rm -fr dist/js/*.map"
}

4.5 其他

webpack-sentry-plugin 可以在上传后删除打包后的sourcemap，可以节省后面上传打包后文件的过滤sourcemap的操作。

npm install webpack-sentry-plugin --save-dev

根目录创建 sentry.config.js

module.exports = {
 organization: '',
 project: '',
 apiKey: '',
};

webpack配置：

const SentryPlugin = require('webpack-sentry-plugin')
const RELEASE_VERSION = require('../package.json').version
plugins: [
 // ...
 new SentryPlugin(Object.assign({
     release: RELEASE_VERSION,
     deleteAfterCompile: true,
     // exclude: /(\.css\.map| \.css | \.html)$/,
     include: /(\.js\.map | \.js)$/, // 只上传js和map文件
     filenameTransform: function (filename) {
       return '~/' + filename
    },
  }, require('../sentry.config.js')))
]

参考资料：vue+sentry 前端异常日志监控

如果你对内容有任何疑问，欢迎提交 ❕issues 或 ✉️ email