简介
通过对 error 事件的监听，获取异常相关信息并缓存，在一定时间之后报告处理。
功能
捕获页面 JavaScript 异常报错，捕获异常类型包含:
- JavaScript runtime 异常捕捉 √
- 静态资源 load faided 异常捕捉 √
- console.error 的异常捕获 √
- try..catch 错误捕获 √
实现概述
- 通过对 进行监听，捕获 JavaScript 的运行时异常，记录错误：event + 错误来源(source) + 错误行数 + 错误列数等数据
- 通过对
window.addEventListener监听error事件类型，获取静态资源报错，包含 JavaScript 文件，CSS 文件，图片，视频，音频。 - 主要针对 vue 的异常捕获，重写了
console.error事件，在捕获异常先记录错误信息的描述，再next到原始的console.error - 提供包装函数对其进行 try..catch 包装，捕获异常并处理
使用指南
script mode
复制代码
module mode
1.安装
npm install error-tracker --save复制代码
2.在文件中添加
import ErrorTracker from 'error-tracker'ErrorTracker.config({ name: 'example_site' url: 'https://xxx.xxxxx.xx'})复制代码 vue
import Vue from 'vue'import ErrorTracker from 'error-tracker'import VuePlugin from 'error-tracker/plugins/vue'ErrorTracker.config({ name: 'example_site' url: 'https://xxx.xxxxx.xx'}).useVue(Vue)复制代码 API
| 字段 | 描述 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| url | 日志上传地址 | String | 无 | 必传，否则抛出提示 |
| name | 应用名 | String | 无 | 必传，否则抛出提示 |
| concat | 是否延时处理，默认延时 2s 处理 | Boolean | true | |
| delay | 错误处理间隔时间，单位 ms | Number | 2000 | 当 concat 为 false 无效 |
| maxError | 一次处理的异常报错数量限制 | Number | 16 | 当 concat 为 false 无效 |
| sampling | 采样率 | Number | 1 | 0 - 1 之间 |
关于 errorLogs（及上传的日志文件）：
格式
{ errors: [ { type: 1, // 参考错误类型 desc: '', // 错误描述信息 time: 18666900, stack: 'no stack', // 堆栈信息。无堆栈信息时返回 'no stack' }, // ... ], platform: 'ios', //哪个平台 ios, android, weixin, web, 是否可获取platform的version sessid: '', app_version: '', // 可选 uid: '', url: '' //当前页面 }复制代码 后端额外存储
client_ip
错误类型
var ERROR_RUNTIME = 1var ERROR_SCRIPT = 2var ERROR_STYLE = 3var ERROR_IMAGE = 4var ERROR_AUDIO = 5var ERROR_VIDEO = 6var ERROR_CONSOLE = 7var ERROR_TRY_CATCH = 8复制代码
接口
on 可以监听错误的暴露
window.errorTracker.on("jserror", function (jserror) { console.log(jserror)})复制代码 这个接口在使用时应该不会用到，加上去是因为在测试时或者本地情况不会真正发送请求，通过这个接口得到真实传递的数据
once 仅可以监听一次
off 取消错误监听事件
wrapErrors 对一些需要用try catch包装的地方可以使用这个简单的函数
【使用方法】
window.errorTracker.wrapErrors(function () { new Array(-1)})复制代码 log 通用发送接口 【使用方法】这个例子是说某些情况我们记录一些特定的异常事件来发送到远端
if (location.search.indexOf("hmsr") === -1) { window.errorTracker.log({ type: 'NOHMSR', desc: '没有hmsr参数' })}复制代码 error 类似于log，不过这个需要传递的是error对象