前端监控告警平台原理,及如何捕捉全局错误,异步promise错误,资源错误,vue错误

监控告警平台可以监控并上报我们的网页在运行时发生的错误,那么监控平台的原理是什么呢,
本文介绍了前端监控告警平台原理,包括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  
	})
}

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