Vue项目接入Sentry错误监控服务

Sentry简介

Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了web来展示输出错误。
sentry官网：https://sentry.io/

Sentry安装

Sentry 是一个开源的工具，可以自行搭建。
官方支持两种安装和运行 Sentry 服务器的方法，Docker 和 Python。推荐使用 Docker。
这里建议让公司的运维或者后台同学搭建好，搭建好之后让他给你账号

Sentry 前端部署

创建Vue类型的Sentry并引入到项目中

1.png
创建项目页面会自动跳转到如何配置vue项目页面。接下来就按照指引在vue代码里引入 sentry。可以通过 cdn 或者 npm 引入。我们采用 npm 引入。引入的时候需要给init 函数传递一个 dsn 参数。这个参数唯一指定了我们刚才创建的项目。如果不传这个参数，sentry 不会发送错误。

新版的Sentry并不会自动生成dsn,需要我们自己按照格式拼接
dsn: '协议://公钥@服务器地址/项目ID',

// main.js
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
if (process.env.NODE_ENV === 'production') { //只在生产环境使用
  Sentry.init({
    dsn: 'http://8aac4526a2cdds198723f8d23520ec@127.0.0.1/17',
    integrations: [
      new Integrations.Vue({
        Vue,
        attachProps: true
      })
    ]
  })
}

至此，项目已经能够被Sentry监控到了，接下来上传source-map辅助定位问题

如果不上传source-map的话，虽然也能监控道控制台错误，但是由于源文件都被webpack处理混淆压缩，所以不太好定位到具体原因，因此建议上传source-map

上传source-map

上传的方式有多种。可以通过 sentry-cli 通过命令行的方式来上传 source-map，但是需要手动上传。也可以采用 webpack-plugin 这个插件，可以在 build 的同时自动上传 source-map。这里建议采用自动上传策略。

1、在项目跟目录下增加.sentryclirc文件，其中的token可以在左上角头像里的api keys里面获取。

[auth]
token=6e3e03b8c0594d1186db2177d58942eb4132823839294a848593eff31eb712f9

[defaults]
url=服务器地址
org=你的组织名
project=刚刚创建的项目名

2、安装webpack-plugin 插件并使用，这里给出vue-cli3的配置

npm i @sentry/webpack-plugin -D // 安装插件

//vue.config.js 
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
module.exports = {
  ...
  productionSourceMap: true,
  configureWebpack: config => {
     if (process.env.NODE_ENV === 'production') { //只在上传环境上传
        config.plugins.push(
          new SentryWebpackPlugin({
            include: './dist',
            release: 'game-center-html@prod',
            urlPrefix: '~/game/', //这个参数指定source-map文件的路径，默认服务器根目录，如果路径错误将无法定位map文件
            ignoreFile: '.sentrycliignore',
            ignore: ['node_modules', 'webpack.config.js'],
            configFile: 'sentry.properties'
          })
        )
      }
   }
}

urlPrefix参数重要说明
~/为网站根目录，后续路径须对应source-map
这里的urlPrefix可以通过线上看js文件的完整路径，有可能不在根目录下
比如线上js文件的路径为http://www.baidu.com/game/js/app.dsds323.js
我们上传时文件的urlPrefix就应该设置为 '~/game/'

3、 修改main.js中的配置

// main.js
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
if (process.env.NODE_ENV === 'production') { //只在生产环境使用
  Sentry.init({
    dsn: 'http://8aac4526a2cdds198723f8d23520ec@127.0.0.1/17',
    integrations: [
      new Integrations.Vue({
        Vue,
        attachProps: true
      }),
       new Integrations.RewriteFrames() //<-----新增
    ],
    release: 'game-center-html@prod'  //<-----新增
  })
}

release说明
必须保证 vue.config.js和main.js 两个配置中的 release 版本号相同，这样的话 Sentry 才能将source-map文件一一对应上,每次修改都会在后台生产一个新的版本。

至此，每次执行npm run build都会生产source-map并上传到Sentry

回到Senrtry控制台，就能在版本中看到和release同名的版本,新的错误监控将能够看到源代码

删除项目中的map文件

由于我们在vue.config.js中开启了productionSourceMap,所以每次npm run build都会生产map文件，这就会导致打包体积很大，并且如果map文件被上传到线上，可能存在安全隐患，所以建议在打包之后删除map文件，因为执行npm run build之后已经将source-map上传到了Sentry，本地打包出来的map文件已经没有用了，所以是可以删除的
1、手动删除
2、构建命令删除

完结