Skip to content
On this page

记一个错误收集系统的设想

前言

项目的错误收集其实也是用户交互时产生的异常情况,在线上环境很多时候我们不能够直接调试或准确的判断错误产生的原因,就需要借助“错误收集系统”来帮助分析。

第一阶段

只支持vue项目,因为vue对外封装了全局方法

Vue.config.errorHandler = function (err, vm, info) {
  // 会捕获生命周期钩子里的错误
  // 自定义事件也可以
}

还有局部的生命周期钩子

errorCaptured(err: Error, vm: Component, info: String) {
  // 2.5.0+
}

从参数中就可以获取错误的类型与基本信息,还有调用栈、组件实例、以及组件抛出异常的位置信息。

在得到这些信息后,我们将错误以HEAD or GET方法向错误系统发起请求,并记录此时用户的客户端浏览器信息与用户时间。

根据err.nameerr.message查找相同的错误,并记录次数。

还需要有一个状态标识该错误的状态,用一个列表列出所有的问题。

另外,多应用需要做区分。

http://javascript.ruanyifeng.com/grammar/error.html

流程图

5b2b1953ac502e0031addcb9

用法

get(
  'https://iming.work/error-service/add', 
  err.name,
  err.message,
  err.stack,
  vm.$options._componentTag,
  info
)

功能

  • 记录Error实例
  • 组件实例
  • 错误次数统计
  • 错误时间及状态

第二阶段

将错误系统封装为一个类,每个客户端为一个实例,简化get操作。