JS错误监控总结

摘要：前言做好错误监控，将用户使用时的错误日志上报，可以帮助我们更快的解决一些问题。一个变通方案是多带带处理，告知错误详情仅能通过浏览器控制台查看，无法通过访问。

做好错误监控，将用户使用时的错误日志上报，可以帮助我们更快的解决一些问题。目前开源的比较好的前端监控有

https://docs.sentry.io/

那前端监控是怎么实现的呢？要想了解这个，需要知道前端错误大概分为哪些以及如何捕获处理。

前端错误分为JS运行时错误、资源加载错误和接口错误三种。

JS运行时错误一般使用window.onerror捕获，但是有一种特殊情况就是promise被reject并且错误信息没有被处理的时候抛出的错误

使用window.onerror和window.addEventListener("error")捕获。其中window.onerror含有详细的error信息(error.stack)，而且兼容性更好，所以一般JS运行时错误使用window.onerror捕获处理

window.onerror = function (msg, url, lineNo, columnNo, error) 
    { 
       // 处理error信息
    } 
 
    window.addEventListener("error", event =>  
    {  
       console.log("addEventListener error:" + event.target); 
    }, true); 
    // true代表在捕获阶段调用，false代表在冒泡阶段捕获。使用true或false都可以

例子：https://jsbin.com/lujahin/edit?html,console,output 点击button抛出错误，分别被window.onerror和window.addEventListener("error")捕获

当promise被reject并且错误信息没有被处理的时候，会抛出一个unhandledrejection，并且这个错误不会被window.onerror以及window.addEventListener("error")捕获，需要用专门的window.addEventListener("unhandledrejection")捕获处理

window.addEventListener("unhandledrejection", event => 
    { 
       console.log("unhandledrejection:" + event.reason); // 捕获后自定义处理
    });

https://developer.mozilla.org...
例子：https://jsbin.com/jofomob/edit?html,console,output 点击button抛出unhandledrejection错误，并且该错误仅能被window.addEventListener("unhandledrejection")捕获

一些特殊情况下，还需要捕获处理console.error，捕获方式就是重写window.console.error

var consoleError = window.console.error; 
window.console.error = function () { 
    alert(JSON.stringify(arguments)); // 自定义处理
    consoleError && consoleError.apply(window, arguments); 
};

例子：https://jsbin.com/pemigew/edit?html,console,output

什么是跨域脚本error？

https://developer.mozilla.org...
当加载自不同域的脚本中发生语法错误时，为避免信息泄露（参见bug 363897），语法错误的细节将不会报告，而代之简单的"Script error."。在某些浏览器中，通过在