FE.B-异常监控原理

js错误主要有2类：语法错误、脚本错误;监控方式有2种：try-catch、window.onerrortry-catch 异常处理try-catch处理异常的能力有限，只能捕获到运行时的非异步错误，对于语法错误和异步错误就显得无能为力。try{error // <- 未定义变量} catch(e) {console.log(‘捕获到错误’);console.log(e);}//输出://ReferenceError: error is not definedtry {var error = ’error’； // <-大写分号} catch(e) {console.log(‘捕获不到错误’);console.log(e);}//输出：//Uncaught SyntaxError: Invalid or unexpected tokentry{setTimeout(function () {error // <- 异步错误}, 0)} catch(e) {console.log(‘捕获不到错误’);console.log(e);}//输出：//Uncaught ReferenceError: error is not definedwindow.onerror 异常处理window.onerror 捕获异常的能力比 try-catch稍强一点，无论是异步还是非异步的错误，onerror都能捕获到运行时的错误/** * @param {String} msg 错误信息 * @param {String} url 出错文件 * @param {Number} row 行号 * @param {Number} col 列号 * @param {Object} error 错误详细信息 */ window.onerror = function (msg, url, row, col, error) { console.log(‘捕获到运行时同步错误了’); console.log({ msg, url, row, col, error }) return true;};error; // <- 未定义变量//输出：//捕获到错误了//{msg: “Uncaught ReferenceError: error is not defined”, …} window.onerror = function (msg, url, row, col, error) { console.log(‘捕获到异步错误了’); console.log({ msg, url, row, col, error }) return true;};setTimeout(() => { error; // <- 未定义变量});//输出：//捕获到异步错误了//{msg: “Uncaught ReferenceError: error is not defined”, …}在实际使用中，onerror主要用来捕获预料之外的错误，try-catch则是用来在可预见情况下监控特定的错误，两者结合使用更加高效但是对于语法错误，window.onerror还是捕获不了，所以我们在写代码的时候要尽可能避免语法错误，不过一般这种错误比较容易察觉。除了语法错误不能捕获之外，网络异常的错误也是不能捕获的<script> window.onerror = function (msg, url, row, col, error) { console.log(‘我知道错误了’); console.log({ msg, url, row, col, error }) return true;};</script><img src="./404.jpg"/>输出：GET http://localhost:8081/404.jpg 404 (Not Found)这是因为网络请求是没有事件冒泡的，所以需要在捕获阶段才能捕获到异常，虽然这样可以捕获到网络的异常，但无法判断http的状态，比如该异常是404还是500，想要知道这个状态就必须和服务日志一起排查了。<script> window.addEventListener(’error’, (msg, url, row, col, error) => { console.log(‘我知道错误了’); console.log({ msg, url, row, col, error }) return true; }, true);</script><img src="./404.jpg"/>输出：GET http://localhost:8081/404.jpg 404 (Not Found)我知道错误了{msg: Event, url: undefined, row: undefined, col: undefined, error: undefined}Promise的错误没有使用catch去捕获的话，上述的方式都是不能捕获到错误的。但通过监听unhandledrejection事件，可以捕获未处理的Promise错误。但是需要注意的是，这个事件是有兼容问题的。window.addEventListener(“unhandledrejection”, function(e){ e.preventDefault() console.log(‘我知道 promise 的错误了’); console.log(e.reason); return true;});new Promise((resolve, reject) => { reject(‘promise error’);});输出：我知道 promise 的错误了promise error说完这些捕获异常的方式之后，该说说异常上报的常用方法了。异常上报当我们拿到报错信息之后，就需要上报这些异常信息，我们上报的方式通常有两种方法：通过Ajax发送数据通过动态创建img标签的形式function report(error) { var reportUrl = ‘http://xxxx/report’; new Image().src = reportUrl + ’error=’ + error;}script error 脚本错误在一个域下引用了其他域的脚本，又没有去做额外的配资，就很容易产生Script error。说到最后这就是因为浏览器的同源策略产生的。所以最好我们还是使用跨源资源共享机制( CORS )// http://localhost:8080/index.html<script> window.onerror = function (msg, url, row, col, error) { console.log(‘我知道错误了，也知道错误信息’); console.log({ msg, url, row, col, error }) return true; };</script><script src=“http://localhost:8081/test.js” crossorigin></script>// http://localhost:8081/test.jssetTimeout(() => { console.log(error);});