【前端链路监控】前端错误日志收集

1、为什么要处理异常？

• 增强用户体验；

• 远程定位问题，未雨绸缪，及早发现问题及早处理；

• 无法复现问题，尤其是移动端，可以查找日志；

• 收集错误产生的系统信息，如浏览器，机型等；

• 完善的前端方案，前端监控系统；

• 对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。

2、需要处理哪些异常？

• js 语法错误、代码异常；

• http 请求异常(服务问题，接口问题？)；

• 静态资源加载异常；

• 后端返回数据格式不规范导致的 js 错误；

• Iframe 异常，跨域 Script error 等；

• 崩溃和卡顿

3、收集错误日志的方法

3.1、最简单的错误处理方法

Vue 全局配置 errorHandler 可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理：业务错误直接写在业务里；代码错误、ajax 请求异常等错误可以进行全局捕获然后抛出，不至于前端页面挂掉。

import Vue from 'vue'
const errorHandler = (error, vm) => {
  console.error('抛出全局异常')
  console.error(error)
}
Vue.config.errorHandler = errorHandler
Vue.prototype.$throw = error => errorHandler(error, this)

// 请求拦截
axios.interceptors.response.use(
  res => {
    if (res.data.coe !== 200) {
      console.log('请求失败')
      return Promise.reject(res)
    }
    return res
  },
  error => {
    Vue.$throw(error)
    return Promise.reject(error)
  }
)

3.2、利用 vuex 收集错误

// errorLog.js
import Vue from 'vue'
import store from './store'
Vue.config.errorHandler = function(err, vm, info, a) {
  Vue.nextTick(() => {
    store.dispatch('addErrorLog', {
      err,
      vm,
      info,
      url: window.location.href
    })
    console.error(err, info)
  })
}

// vuex errorLog模块
const errorLog = {
  state: {
    logs: []
  },
  mutations: {
    ADD_ERROR_LOG: (state, log) => {
      state.logs.push(log)
    }
  },
  actions: {
    addErrorLog({ commit }, log) {
      commit('ADD_ERROR_LOG', log)
    }
  }
}
export default errorLog

3.3、通过接口捕捉——上传——查询错误

通过后台接口上传错误信息，然后在后台管理系统查询错误信息。通过这些信息我们可以很快定位并且解决问题。

function error(msg, url, line) {
  var REPORT_URL = 'http://xxxx.com' // 收集上报数据的信息
  // 收集错误信息，发生错误的脚本文件网络地址，用户代理信息，时间
  var m = [msg, url, line, navigator.userAgent, +new Date()]
  var url = REPORT_URL + m.join('||') // 组装错误上报信息内容URL
  var img = new Image()
  img.onload = img.onerror = function() {
    img = null
  }
  img.src = url // 发送数据到后台cgi
}
// 监听错误上报
window.onerror = function(msg, url, line) {
  error(msg, url, line)
}

3.4、Fundebug(付费，弃)

Fundebug 是专业的应用 BUG 监控平台。当线上应用出现 BUG 时，Fundebug 会通过邮件或者第三方工具立即给开发者发送报警，这样能够帮助开发者及时发现并且修复应用 BUG，从而提升用户体验。网址：https://www.fundebug.com/

使用方法

 

// 1、安装 npm install fundebug-javascript fundebug-vue --save
// 2、配置：main.js
import * as fundebug from 'fundebug-javascript'
import fundebugVue from 'fundebug-vue'
fundebug.apikey = 'API-KEY'
fundebugVue(fundebug, Vue)

API

• test(name, message)

• notify(name, message, option)

• notifyError(error, option)

4、sentry(推荐)

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

sentry的特性

• 支持多种语言和框架

• 相同错误合并

• 定制规则进行邮件通知

• 支持导入sourcemap自动解析和还原代码

• 友好的可视化Web界面

4.1、注册账号，新建项目。

新建项目后，您将获得一个我们称之为 DSN 或数据源名称的值.它看起来很像一个标准的 URL，但它实际上只是 Sentry SDK 所需的配置的标识。它由以下几个部分组成。

1. 使用的协议: http 或 https;

2. 验证 sdk 的公钥和密钥;

3. 目标 sentry 服务器;

4. 验证用户绑定的项目 id.

4.2、安装依赖，引入脚本

import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
Raven.config('https://a60af910fe4449e98fcf7fbb0c714f1a@sentry.io/1516655')
  .addPlugin(RavenVue, Vue)
  .install()

常用参数

• DSN ：项目的地址，用于收集错误信息的 sentry 分配的地址

• debug ：是否开启 debug 模式，开启 debug，就会把信息打印到控制台上面

• release ： 代码的版本号，可以确定当前的错误/异常属于哪一个发布的版本

• environment : 环境名称

• attachStacktrace ： 是否开启堆栈跟踪，开启后跟着消息一起收集

• beforeSend : 发送前操作

4.3、基本使用

最简单的方式是主动触发：

try {
  doSomething(a[0])
} catch (e) {
  Raven.captureException(e)
}

window.onerror 捕捉异常

window.onerror = function(e) {
  Raven.captureException(e)
}

在 vue 里可以使用 Vue.config.errorHandler 钩子来捕捉

Vue.config.errorHandler = (err, vm, info) => {
  Raven.captureException(err)
}

对于接口报错，可以在全局拦截里实现

request.interceptors.response.use(null, error => {
  console.error(error)
  Raven.captureException(error)
  return Promise.reject(error)
})

4.4、source-map 配置

• 创建新的 token

• 安装@sentry/webpack-plugin 插件, 一般会同时安装@sentry/cli

• npm i @sentry/webpack-plugin --dev

• 根目录创建.sentryclirc 文件

[defaults]
url = https://sentry.io/
org = your org
project = your project

[auth]
token = your token

• 在 config/prod.env.js 创建环境变量

 

const release = 'demo-test001' // 可以根据package.json的版本号或者Git的tag命名
process.env.RELEASE_VERSION = release
module.exports = {
  NODE_ENV: '"production"',
  RELEASE_VERSION: `"${release}"`
}

• 在 webpack.prod.conf 配置

 

const SentryPlugin = require('@sentry/webpack-plugin')
new SentryPlugin({
  release: process.env.RELEASE_VERSION, //发布的版本
  include: path.join(__dirname, '../dist/static/js/'), //需要上传到sentry服务器的资源目录
  ignore: ['node_modules', 'webpack.config.js'], //  忽略文件目录
  configFile: `.sentryclirc`, //  面包含了 -o组织 -p项目 以及authtoken
  urlPrefix: '~/static/js' //  线上对应的url资源的相对路径
})

4.5、 报警邮件发送规则

Sentry 默认会将所有采集到的异常发送警报邮件，有时我们可能希望只收到某个版本下某些规则下的警报邮件，这时候就需要删除默认的警报规则，然后新建自定义规则。 在项目设置中找到 Alerts，左上角 “New Alert Rule”即可添加设置报警规则。

4.6、信息收集

• 错误类型及具体错误信息

• 丰富的上下文周围的错误

• 用户信息(ip, 机型, 操作系统, 浏览器版本, 时间)

• 错误代码的定位(具体文件，具体行数)

• 同一个错误发生的次数和用户数

• 区分错误的环境及版本