前端监控告警平台原理,及如何捕捉全局错误,异步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

})

}

以上就是监控平台用到的原理啦,当然,监测到错误之后还要进行上报等操作,这里就不再一一说明了



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。