前端项目如何接入sentry监控平台？背景公司web项目长期处于半裸奔状态，虽有埋点记录或日志，但大部分问题定位和复现

背景

公司web项目长期处于半裸奔状态，虽有埋点记录或日志，但大部分问题定位和复现困难，故想引入个第三方的异常监控系统来解决。

Sentry有开源版和Sass版，可根据自身需要去选择。

部署

私有化部署官方推荐方式是通过Docker和Docker Compose部署，具体参考官方文档

部署完成后访问IP:9000即可访问web，这里建议把部署地址用nginx代理来解决跨域问题

我这里安装Sentry版本为22.3.0

使用

先设置语言和时区，点击头像User settings - Account Details的相应菜单设置，刷新后生效

建立个测试项目vue-sentry-demo，这里用vue项目

在项目中使用

3.1 本地起一个vue项目，也可以git clone 模板

# vue cli创建项目
$ vue create vue-sentry-test
# 选择vue-router vue2.x 
# 按照文档安装插件
$ yarn add @sentry/vue @sentry/tracing

3.2 配置sentry

// main.js 加入配置
import * as Sentry from '@sentry/vue'
import { BrowserTracing } from '@sentry/tracing'

Sentry.init({
  Vue,
  dsn: 'https://29312c0e8494419e8cdb1eee6e5212e4@sentry.hanyuan.vip/4',
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ['localhost', 'my-site-url.com', /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
  release: process.env.SENTRY_RELEASE,
})

# 新建env用于保存release版本号
$ touch .env
$ cat > .env
$ SENTRY_RELEASE="0.0.1"

其中dsn一般可以在创建项目后的引导中直接引用，或如下图在（项目-设置-客户端密钥）查找

3.3 设置一个报错

// 修改下Home.vue
<template>
  <div class="home" @click="handleClick">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods:{
    handleClick(){
      // 不存在的方法
      this.aa()
    }
  }
}
</script>

3.4 验证，点击文字触发异常

进入问题菜单即可查看报错

为了具体定位报错内容，此时便需要上传sourceMap到sentry平台这里有两种方式 sentry-cli和 sentry-webpack-plugin方式，这里为了方便采用webpack方式。

# 如果要上传源码需安装webpack插件
$ yarn add @sentry/webpack-plugin -D
$ touch .sentryclirc
# 写入配置
$ cat > .sentryclirc
[auth]
token=XXX

[defaults]
url=https://sentry.hanyuan.vip/
org=sentry
project=vue-sentry-test
# webpack配置
$ touch vue.config.js

// vue.config.js
const SentryCliPlugin = require('@sentry/webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new SentryCliPlugin({
        include: './dist/js', // 只上传js
        ignore: ['node_modules'],
        configFile: 'sentry.properties',
        release: process.env.SENTRY_RELEASE, // 对应main.js版本号
        cleanArtifacts: true, // 先清理再上传
      }),
    ],
  },
}

执行 $ yarn build 上传后并验证

为方便验证可以安装anywhere

$ yarn global add anywhere
$ yarn build
$ cd dist
$ anywhere -p 8888

附：

如何上传后删除sourcemap, 三种方式：

命令删除

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

单独生成map

// vue.config.js
configureWebpack(config) {
     config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js')
     config.plugin('sentry').use(SentryCliPlugin, [{
        include: './dist/sourceMap', // 只上传js
        ignore: ['node_modules'],
        configFile: 'sentry.properties',
        release: process.env.SENTRY_RELEASE, // 对应main.js版本号
        cleanArtifacts: true, // 先清理再上传
    }])
}

webpack插件清理

$ yarn add webpack-delete-sourcemaps-plugin -D
// vue.config.js
const { DeleteSourceMapsPlugin } = require('webpack-delete-sourcemaps-plugin')
... // plugin
new DeleteSourceMapsPlugin(), // 清理sourcemap
...

参考文档

前端结合sentry进行异常上报

Sentry官方文档

CentOS通过容器安装Sentry的方法