JS错误监控总结

前言

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

• https://docs.sentry.io/

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

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

一、JS运行时错误

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

1.1 一般情况的JS运行时错误

使用window.onerror和window.addEventListener('error')捕获。

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')捕获

1.2 Uncaught (in promise)

当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')捕获

1.3 console.error

一些特殊情况下，还需要捕获处理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

1.4 特别说明跨域日志

什么是跨域脚本error？

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