监控告警平台可以监控并上报我们的网页在运行时发生的错误,那么监控平台的原理是什么呢,
本文介绍了前端监控告警平台原理,包括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这个代码块分离出去,并且比其他脚本先执行(注意这个前提!)即可捕捉到语法错误。
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">
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">
<script src="https://yun.tuia.cn/foundnull.js"></script>
<link href="https://yun.tuia.cn/foundnull.css" rel="stylesheet"
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
})
}
以上就是监控平台用到的原理啦,当然,监测到错误之后还要进行上报等操作,这里就不再一一说明了