通过对 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 --save
2.在文件中添加
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 = 8
jstracker 暴露出一个 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 |