错误监控

最近更新时间:2023-11-30 14:16:32

我的收藏
前端性能监控的 Aegis 的实例会自动进行 JS 执行错误、Promise 执行错误、Ajax(Fetch)请求异常等监控。本文将为您介绍各错误监控逻辑及处理方式。
注意
Aegis 实例会对这些异常进行监控,当您只是引入了 SDK 而没有将其实例化时,Aegis 将不会上报数据。

JS 执行错误

Aegis 通过监听 window 对象上的 onerror 事件来获取应用中的报错,并且通过解析错误和分析堆栈,将错误信息自动上报到后台服务中。该上报等级为 error ,所以当自动上报的错误达到阈值时,Aegis 将会自动告警,帮助您尽早发现异常。由于上报等级为 error ,自动上报也将影响应用的评分。
如果页面上引入了跨域的 JS 脚本,需要给对应的 script 标签添加 crossorigin 属性,否则 Aegis 将无法获取详细的错误信息
如果用户使用的是 VUE 框架,请引入下列代码,获取错误并且主动上报
Vue.config.errorHandler = function(err, vm, info) {
console.log(`Error: ${err.toString()}\\nStack: ${err.stack}\\nInfo: ${info}`);
aegis.error(`Error: ${err.toString()}\\nStack: ${err.stack}\\nInfo: ${info}`);
};


Promise 执行错误

通过监听 unhandledrejection 事件,捕获到未被 catch 的 Promise 错误,为了页面的稳定性,建议您 catch 住所有的 Promise 错误。

Ajax(Fetch)请求异常

Aegis 将会改写 XMLHttpRequest 对象,监听每次接口请求,Aegis 认为以下情况是异常情况:
http status 大于等于 400
请求超时,abort,跨域,cancel
请求结束时 http status 仍然是 0,通常发生于请求失败
注意
Aegis SDK 在错误发生的时候,不会主动收集接口请求参数和返回信息,如果需要对进口信息进行上报,可以使用 API 参数里面的 apiDetail 进行开启。
new Aegis({
api: {
apiDetail: true,
},
});


retcode 异常

Aegis 改写 XMLHttpRequest 对象之后,将获得 API 返回的内容,并尝试在内容中获取到本次请求的 retcode
retcode 的值默认会从用户返回 response body 的第一层(如果第一层取不到,再取第二层)的 code、ret、retcode、errcode 中获取。
Aegis 默认 retcode 的值为0是正常的,非0都是异常的。当 retcode 发生异常的时候,会上报一个 retcode 异常的日志。
用户可以通过 api.retCodeHandler 对这个值和是否异常进行修正。
说明
如何获取 retcode 以及哪些retcode 是正常的,详情请参见 配置文档

资源加载失败

页面元素发出的请求如果失败,将会被 window.onerror 事件捕获到(捕获阶段),Aegis 正是通过这个特性监听的资源加载失败。Aegis 监听了以下资源:
<link> 标签请求的 css、font 等。
<script> 标签请求的脚本。
<audio><video> 标签请求的多媒体资源。

websocket 异常

Aegis 默认不会对全局 websocket 对象进行重写,默认不会监控 websocket 相关错误,如果需要打开相关功能可以在创建 Aegis 对象时设置 websocketHack: true。
new Aegis({
id: '',
websocketHack: true
});