前端监控告警平台原理,及如何捕捉全局错误,异步promise错误,资源错误,vue错误
金枪鱼合唱团 2024-09-15 15:33:04 阅读 69
监控告警平台可以监控并上报我们的网页在运行时发生的错误,那么监控平台的原理是什么呢,
本文介绍了前端监控告警平台原理,包括window.onerror,window.addEventListener等方法.及如何捕捉全局错误,异步promise错误,资源错误,vue错误
1. 监听 window.onerror(监听全局错误,除promise,资源错误)
用于捕获和处理未被try catch处理的全局下的 JavaScript 错误。但是不能捕获promise错误和资源错误,不过可以捕获settimeout错误, (引申一下,try catch不能捕获异步错误)
window.onerror能捕捉到语法错误，但是语法出错的代码块不能跟window.onerror在同一个块（语法都没过，更别提window.onerror会被执行了）
只要把window.onerror这个代码块分离出去，并且比其他脚本先执行（注意这个前提！）即可捕捉到语法错误。
<code>window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到JavaScript错误:');
console.log('错误消息:', message);
console.log('错误来源:', source);
console.log('行号:', lineno);
console.log('列号:', colno);
console.log('错误对象:', error);
return true;// 返回true以阻止浏览器默认错误处理,否则即使是知道异常的发生控制台还是会显示 Uncaught Error:xxx
};
//settimeout错误会被捕获
setTimeout(() => {
console.log(notdefined);
}, 0)
//promise错误不会被捕获
new Promise((resolve,reject) => {
console.log(notdefined);
resolve();
})
//资源错误不会被捕获
<img src="https://yun.tuia.cn/image/kkk.png">code>
2. window.addEventListener(监听资源错误)
当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，这些 error 事件不会向上冒泡到 window，但能被捕获。
不过, window.addEventListener也不能捕获promise错误
// 图片、script、css加载错误，都能被捕获
<script>
window.addEventListener('error', (error) => {
console.log('捕获到异常：', error);
}, true)
</script>
<img src="https://yun.tuia.cn/image/kkk.png">code>
<script src="https://yun.tuia.cn/foundnull.js"></script>code>
<link href="https://yun.tuia.cn/foundnull.css" rel="stylesheet"code>
3. 监听 unhandledrejection 事件(捕获promise错误)
当 Promise 被 reject 并且没有得到处理的时候，会触发 unhandledrejection 事件。所以可以对此事件进行监听，将错误信息捕获上报。
window.addEventListener('unhandledrejection', function (event) {
console.error('未捕获的 Promise 错误:', event.reason);
// 可以在这里上报错误或采取其他处理措施
event.preventDefault(); // 阻止默认行为
});
new Promise((resolve,reject) => {
console.log(notdefined);
resolve();
})
4. Vue.config.errorHandler（errorCaptured）(捕获vue中的错误)
由于Vue会捕获所有Vue单文件组件或者Vue.extend继承的代码，所以在Vue里面出现的错误，并不会直接被window.onerror捕获，而是会抛给Vue.config.errorHandler。
/** * 全局捕获Vue错误，直接扔出给onerror处理 */
Vue.config.errorHandler = function (err) {
setTimeout(() => {
throw err
})
}
以上就是监控平台用到的原理啦,当然,监测到错误之后还要进行上报等操作,这里就不再一一说明了
上一篇： 火狐浏览器firefox垂直标签页
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。