摘要：前言做好錯誤監控，將用戶使用時的錯誤日志上報，可以幫助我們更快的解決一些問題。一個變通方案是多帶帶處理，告知錯誤詳情僅能通過瀏覽器控制臺查看，無法通過訪問。

做好錯誤監控，將用戶使用時的錯誤日志上報，可以幫助我們更快的解決一些問題。目前開源的比較好的前端監控有

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."。在某些瀏覽器中，通過在