Sentry 前端监控部署及接入 vue

Sentry 前端监控部署及接入 vue

本文基于 vue@2.6.11 Sentry@23.7.0

一、Sentry 的部署

1. 安装 docker

2. 安装 docker-compose

3. 下载 sentry-self-hosted 代码

   self-hosted源码

4. 安装第三方插件

   /self-hosted/sentry/enhance-image.example.sh 改名为 /self-hosted/sentry/enhance-image.sh
   

   以安装钉钉通知为例，在 enhance-image.sh 插入以下代码

   #!/bin/bash
   
   # Enhance the base $SENTRY_IMAGE with additional dependencies, plugins - see https://github.com/getsentry/self-hosted#enhance-sentry-image
   # For example:
   # apt-get update
   # apt-get install -y gcc libsasl2-dev python-dev libldap2-dev libssl-dev
   # 以上为文件中的示例
   # 以下为安装钉钉通知插件的命令
   pip install sentry-dingtalk-notify
   

5. 在 self-hosted 文件夹下执行

   ./install.sh
   

6. 基于 docker-compose 部署

   1. 创建管理员

   docker compose run --rm web createuser --email xxxxx@email.com --password ******** --superuser
   

   2. 部署

   docker compose up -d
   

7. Sentry-web 默认端口为localhost:9000

8. 使用刚刚添加的管理员账号密码登录

   

9. 设置操作页面为中文

   点击左上角头像 选择 User Settings

   

   点击 Language 下拉 选择 Simplfield Chinese

二、添加项目

1. 左侧菜单选择项目 点击右上角创建项目按钮
2. 创建项目
   1. 选择代码开发平台
   2. 设置警报触发频率
   3. 设置项目名称以及项目维护团队

三、项目中代码引入 sentry

以vue举例

1. 下载相关 sentry npm 包

   npm install @sentry/vue @sentry/browser @sentry/integrations
   

2. 在 main.js 中引入

   // 引入sentry
   import * as Sentry from '@sentry/vue'
   import { BrowserTracing, Replay } from '@sentry/browser'
   import { CaptureConsole } from '@sentry/integrations'
   
   // 调试时可以不加入 process.env.NODE_ENV === 'production'
   process.env.NODE_ENV === 'production' && Sentry.init({
     Vue,
     release: '0.0.1', // 版本号
     dsn: baseInfo.SENTRY_DSN, // dsn
     integrations: [
       new BrowserTracing(),
       new CaptureConsole({
         levels: ['error'] // 代码中有console.error()时，也会触发sentry的上报
       }),
       new Replay({
         maskAllText: true,
         blockAllMedia: true
       })
     ],
     replaysSessionSampleRate: 0.1,
     replaysOnErrorSampleRate: 1.0,
     tracesSampleRate: 1.0
   })
   

   dsn可以在 sentry 项目的设置中找到

   

   当以上设置好后，已经可以捕获大部分报错，并上报至 Sentry，如：

   TypeError、ReferenceError、Uncaught RangeError等

3. axios拦截器相关问题上报 Sentry

   我的处理方式是使用 Sentry.captureEvent() 方法来实现的

   首先我封装了一个 SentryEvent 类来生成对象 对象中每个信息在 Sentry 中如何体现，会在下面的图片中指出

   class SentryEvent {
     constructor(message, level, tags, extra, breadcrumbs) {
       this.message = message || 'sentry_event' // 消息标题
       this.level = level || 'info' // 消息等级
       this.tags = tags || {} // 事件的标签
       this.extra = extra || {} // 额外的信息 可以加入一些想在报错时捕获的信息，我这里用来传输 error 当 error是一个对象时，如果标题直接传 error 消息标题会显示[object Object]
       this.breadcrumbs = breadcrumbs || [] // 面包屑 我的理解是报错时的上下文
       this.user = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : {} // 用户信息
     }
   }
   

   • 请求拦截器

   try {
     throw new Error('NetworError')
   } catch (err) {
     Sentry.captureEvent(new SentryEvent(
       err.message,
       'error',
       {
         type: 'xhr-error',
         category: 'xhr-category'
       },
       {
         message: error,
         type: 'request'
       },
       []
     ))
   }
   

   • 响应拦截器

   try {
     throw new Error('NetworError')
   } catch (err) {
     Sentry.captureEvent(new SentryEvent(
       err.message,
       'error',
       {
         type: 'xhr-error',
         category: 'xhr-category'
       },
       {
         message: error,
         type: 'response - 3' // 这里我对响应报错分为了三种情况，具体不展开赘述
       },
       []
     ))
   }
   

   ​ 请求拦截器和响应拦截器的 Sentry.captureEvent() 包裹了一层 try catch 的原因是 Sentry.captureEvent() 原本的用法为捕获事件，上报至 Sentry 后并不会当作项目中的错误来处理，所以不会触发警报，当用 try catch 包裹后，可以解决不触发警报的问题。当然应该存在更合适的解决方案，如 console.error(error) 的等方式。

   以下为NetworkError的示例：

   

   四、Sentry 对接钉钉 webhooks

   1. 首先确认已经安装好 sentry-dingtalk-notify 插件

   2. 在项目 > 设置 > 遗留集成中启用 DingTalk Notify，如果没有找到，请安装 sentry-dingtalk-notify 插件 重新执行《一、Sentry 的部署》中的操作5和操作6.2

      

   3. 启用后点击设置插件

   4. 在钉钉工作群聊中加入机器人，选择自定义 - 通过Webhook接入自定义服务

      

   5. 设置机器人名称和关键词 （当 Sentry 调用钉钉 webhook 的消息中包含关键词才能正常触发）

      

   6. 获取 access_token

      

   7. DingTalk Notify 设置 access_token 和项目名称，并点击右上角的启用插件

      

   8. 设置 DingTalk Notify 报警规则

      在左侧菜单中点击警报，选择相应的项目，点击<表格 - 列>动作中的编辑，设置 Send a notification via DingTalk Notify

      

五、上传 sourceMap

1. 安装 Sentry Webpack Plugin

   npm install @sentry/webpack-plugin
   

2. 获取 authToken

   

3. 在 vue.config.js 中进行配置

   // 引入插件
   const { sentryWebpackPlugin } = require('@sentry/webpack-plugin')
   
   module.exports = {
     configureWebpack: (config) => {
       config.devtool = 'source-map'
       if (process.env.NODE_ENV === 'production') {
         return {
           plugins: [
             sentryWebpackPlugin({
               release: '1.0.0', // 版本号
               authToken: process.env.SENTRY_AUTH_TOKEN, // authToken
               org: 'sentry',
               project: 'test-sentry',
               include: [{
                 paths: ['./dist/js'],
                 urlPrefix: '~/js'
               }],
               url: 'http://192.168.3.68:9000/'
             })
           ]
         }
       }
     }
   }
   

   这里需要注意，如果使用了 TerserPlugin 或 UglifyJsPlugin等插件，要注意 sourceMap 是否开启，如果 sourceMap 为 false ，会导致 Sentry 只能获取到混淆后的代码，另外如果使用了 TerserPlugin 或 UglifyJsPlugin 等插件，开启 sourceMap 的情况下会严重影响打包的速度。