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

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