通过对 error 事件的监听，获取异常相关信息并缓存，在一定时间之后报告处理。
捕获页面 JavaScript 异常报错，捕获异常类型包含:
- JavaScript runtime 异常捕捉 √
- 静态资源 load faided 异常捕捉 √
- console.error 的异常捕获 √
- try..catch 错误捕获 √
- 记录静态资源加载时长
- 通过对
window.onerror进行监听，捕获 JavaScript 的运行时异常，记录错误：event + 错误来源(source) + 错误行数 + 错误列数等数据 - 通过对
window.addEventListener监听error事件类型，获取静态资源报错，包含 JavaScript 文件，CSS 文件，图片，视频，音频。 - 主要针对 vue 的异常捕获，重写了
console.error事件，在捕获异常先记录错误信息的描述，再next到原始的console.error - 提供包装函数对其进行 try..catch 包装，捕获异常并处理
<script src="../dist/jstracker.js"></script>
<script>
jstracker.init({
delay: 1000,
maxError: 10,
sampling: 1,
report: function(errorLogs) {
console.table(errorLogs)
}
})
</script>1.安装
npm install jstracker --save2.在文件中添加
import jstracker from 'jstracker'
jstracker.init({
concat: false,
report: function(errorLogs) {
// console.log('send')
}
})| 字段 | 描述 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| concat | 是否延时处理，默认延时 2s 处理 | Boolean | true |
|
| delay | 错误处理间隔时间，单位 ms | Number | 2000 |
当 concat 为 false 无效 |
| maxError | 一次处理的异常报错数量限制 | Number | 16 |
当 concat 为 false 无效 |
| sampling | 采样率 | Number | 1 |
0 - 1 之间 |
| report | 错误报告函数 | Function | errorLogs => console.tabel(errorLogs) |
errorLogs 定义见下述说明 |
[
{
type: 1, // 参考错误类型
desc: '', // 错误描述信息
stack: 'no stack', // 堆栈信息。无堆栈信息时返回 'no stack'
},
// ...
]var ERROR_RUNTIME = 1
var ERROR_SCRIPT = 2
var ERROR_STYLE = 3
var ERROR_IMAGE = 4
var ERROR_AUDIO = 5
var ERROR_VIDEO = 6
var ERROR_CONSOLE = 7
var ERROR_TRY_CATCH = 8jstracker 暴露出一个 tryJS 对象，可以处理 try..catch 包裹等
import jstracker from 'jstracker';
this.handleSelect = jstracker.tryJS.wrap(this.handleSelect);function test(type, callback) {
// ...
callback()
}
(jstracker.tryJS.wrapArgs(test))(4, function() {
a = b
})这时候只对参数进行 try..catch 包装
记录性能数据，包含:
- 记录 pv 和 uv
- 记录页面加载时长
performance api 兼容性情况 (看到 no support 绝望，iOS不可用！)
| Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 43.0 | yes | 41 | 10 | 33 | No support |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent