Sentry前端/APP日志监控的使用

前言

为提高前端快速定位线上问题，减少跟用户/测试拿账号+密码进行bug的重现，这边利用Sentry来搭建了内部的一套日志监控系统，目前可以满足于APP + WEB/H5端 + 小程序的一个日志监控服务，
记录线上程序脚本异常，通过收集浏览器相关信息环境，且针对业务方面的异常进行数据的采集，并提交到日志服务器中，提供邮箱告警机制，主动快速响应处理线上问题，保证线上问题的正常运作。
访问地址：https://monitor.zhidianlife.com/

一、账号注册(公司邮箱)

注册公司邮箱账号，点我查看注册流程
进入sentry网站，点击请求加入入口，然后输入完整地址，完成加入申请操作

待请求加入成功后，重新进入sentry，然后点击密码丢失，完成密码设置流程
根据自行维护的账号密码，登录进入系统
进入系统后，需要配置对应的视图展示
- 设置浏览的语言以及时区
- 重新验证自己的邮箱账号

二、项目接入(Vue)

由于目前的项目大都使用的vue开发框架，因此这边前端暂时仅提供vue的使用

安装依赖

script

1	npm install --save @sentry/vue @sentry/tracing

入口文件main.js的引入

import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';
// 然后是日志服务的初始化
Sentry.init({
    Vue,
    dsn: "http://6ce276ed6d5f43bea71464a0efee522a@192.168.199.25:9000/2",
    integrations: [
      new Integrations.BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),    // router为当前SPA的路由
        tracingOrigins: ["localhost", "my-site-url.com", /^\//]   //my-site-url为api接口服务的地址，用于跟踪api
      })
    ],
    tracesSampleRate: 1.0
});

关于项目的配置信息入口，具体看以下截图介绍

三、业务/自定义异常汇报

对于业务方面的异常，一般需要提供发生错误信息的所有相关操作，比如接口地址，接口参数，当前用户状态等等，因此需要业务自行将产生这个业务异常的当前信息全部提交到日志服务器中，来完成远程bug的一个复现，
这边可以提供1⃣️公共的方法，集成到当前的组件库的方法库中，比如有以下的一个示例代码：

// 比如在axios的统一网络请求响应回调处理函数中
import { CustomReport } from '@sentry/browser';
CustomReport.setTags({
    environment: env,
    error: '接口响应的错误信息'
  });
  user && CustomReport.setUser({
    id: user.id,
    username: user.username
  });
  CustomReport.setExtras({
    curl
  })
  CustomReport.withScope(scope => {
    scope.setLevel(CustomReport.Severity.Info);
  });
  CustomReport.captureException(new Error(errorMsg));

四、组件库统一集成方案(推荐)

目前前端这边有统一的组件库，在统一的组件库中添加一目录，作为日志监控的入口，只需在需要的位置使用即可，目前这边要求是整体项目位置以及统一的axios接口响应的位置来接入：

main.js入口：

// ...
import { BugReport } from 'zd-bussiness-component';
BugReport.init({
  Vue,  // 当前Vue实例
  router, // 当前vue-router路由器
  dsn: '',//从sentry控制台获取到的项目配置
  debug: true,  //开发环境开启调试模式
  environment: '运行环境',
  release: process.env.npm_package_version // 当前版本号，对应于目前package.json中的version字段
});
// ...

通过上述的配置，即可完成全局异常的捕获并上传日志

axios统一的回调入口：

//...
import { report } from 'zd-bussiness-component'; 
// 统一处理响应拦截
axios.inceptert.use(res => {
  if('业务异常了'){ 
    BugReport.report({
      env: '',//当前环境
      errorMsg: '接口返回的异常提示信息',
      curl: {
      	...res,
      	params: res.config.data,
      	headers: res.config.headers
      },
      user: 已登录?{id, username}: null,
      tag: {} // 对象类型的自定义标签，可用于自定义错误检索
    })
  }
});