常見錯誤的分類
對於用戶在訪問頁面時發生的錯誤，主要包括以下幾個類型：
1、js運行時錯誤
JavaScript代碼在用戶瀏覽器中執行時，由於一些邊界情況、本地環境的不可控等因素，可能會存在js運行時錯誤。
而依賴客戶端的某些方法，由於兼容性或者網絡等問題，也有概率會出現運行時錯誤。
e.g: 下圖是當使用了未定義的變量"foo"，導致產生js運行時錯誤時的上報數據：
2、資源加載錯誤
這裡的靜態資源包括js、css以及image等。現在的web項目，往往依賴了大量的靜態資源，而且一般也會有cdn存在。
如果某個節點出現問題導致某個靜態資源無法訪問，就需要能夠捕獲這種異常並進行上報，方便第一時間解決問題。
e.g: 下圖是圖片資源不存在時的上報數據：
3、未處理的promise錯誤
未使用catch捕獲的promise錯誤，往往都會存在比較大的風險。而編碼時有可能覆蓋的不夠全面，因此有必要監控未處理的promise錯誤並進行上報。
e.g: 下圖是promise請求接口發生錯誤後，未進行catch時的上報數據：
4、異步請求錯誤（fetch與xhr）
異步錯誤的捕獲分為兩個部分：一個是傳統的XMLHttpRequest，另一個是使用fetch api。
像axios和jQuery等庫就是在xhr上的封裝，而有些情況也可能會使用原生的fetch，因此對這兩種情況都要進行捕獲。
e.g: 下圖是xhr請求接口返回400時捕獲後的上報數據：
各個類型錯誤的捕獲方式
1、window.onerror與window.addEventListener('error')捕獲js運行時錯誤
使用window.onerror和window.addEventListener('error')都能捕獲，但是window.onerror含有詳細的error堆棧信息，存在error.stack中，所以我們選擇使用onerror的方式對js運行時錯誤進行捕獲。
2、資源加載錯誤使用addEventListener去監聽error事件捕獲
實現原理：當一項資源（如<img>或<script>）加載失敗，加載資源的元素會觸發一個Event接口的error事件，並執行該元素上的onerror()處理函數。
這些error事件不會向上冒泡到window，不過能被window.addEventListener在捕獲階段捕獲。
但這裡需要注意，由於上面提到了addEventListener也能夠捕獲js錯誤，因此需要過濾避免重複上報，判斷為資源錯誤的時候才進行上報。
3、未處理的promise錯誤處理方式
實現原理：當promise被reject並且錯誤信息沒有被處理的時候，會拋出一個unhandledrejection。
這個錯誤不會被window.onerror以及window.addEventListener('error')捕獲，但是有專門的window.addEventListener('unhandledrejection')方法進行捕獲處理。
4、fetch與xhr錯誤的捕獲
對於fetch和xhr，我們需要通過改寫它們的原生方法，在觸發錯誤時進行自動化的捕獲和上報。
改寫fetch方法：
對於XMLHttpRequest的重寫：
xhr改寫
關於responseURL 的說明
需要特別注意的是，當請求完全無法執行的時候，XMLHttpRequest會收到status=0 和 statusText=null的返回，此時responseURL也為空string。
另外在安卓4.4及以下版本的webview中，xhr對象也不存在responseURL屬性。
因此我們需要額外的改寫xhr的open方法，將傳入的url記錄下來，方便上報時帶上。
其他問題
1、其他框架，例如vue項目的錯誤捕獲
vue內部發生的錯誤會被Vue攔截，因此vue提供方法給我們處理vue組件內部發生的錯誤。
2、script error的解決方式
"script error.」有時也被稱為跨域錯誤。當網站請求並執行一個託管在第三方域名下的腳本時，就可能遇到該錯誤。最常見的情形是使用 CDN 託管 JS 資源。
其實這並不是一個 JavaScript Bug。出於安全考慮，瀏覽器會刻意隱藏其他域的 JS 文件拋出的具體錯誤信息，這樣做可以有效避免敏感信息無意中被不受控制的第三方腳本捕獲。
因此，瀏覽器只允許同域下的腳本捕獲具體錯誤信息，而其他腳本只知道發生了一個錯誤，但無法獲知錯誤的具體內容。
解決方案1：（推薦）
添加 crossorigin="anonymous" 屬性。
此步驟的作用是告知瀏覽器以匿名方式獲取目標腳本。這意味著請求腳本時不會向服務端發送潛在的用戶身份信息（例如 Cookies、HTTP 證書等）。
添加跨域 HTTP 響應頭：
或者
注意： 大部分主流 CDN 默認添加了 Access-Control-Allow-Origin 屬性。
完成上述兩步之後，即可通過 window.onerror 捕獲跨域腳本的報錯信息。
解決方案2
難以在 HTTP 請求響應頭中添加跨域屬性時，還可以考慮 try catch 這個備選方案。
在如下示例 HTML 頁面中加入 try catch：
可見 try catch 中的 Console 語句輸出了完整的信息，但 window.onerror 中只能捕獲「Script error」。根據這個特點，可以在 catch 語句中手動上報捕獲的異常。
總結
上述的錯誤捕獲基本覆蓋了前端監控所需的錯誤場景，但是第三部分指出的兩個其他問題，目前解決的方式都不太完美。
對於有使用框架的項目：一是需要有額外的處理流程，比如示例中就需要單獨為vue項目進行初始化；二是對於其他框架，都需要單獨處理，例如react項目的話，則需要使用官方提供的componentDidCatch方法來做錯誤捕獲。
而對於跨域js捕獲的問題：我們並不能保證所有的跨域靜態資源都添加跨域 HTTP 響應頭；而通過第二種包裹try-catch的方式進行上報，則需要考慮的場景繁多並且無法保證沒有遺漏。
雖然存在這兩點不足，但前端錯誤捕獲這部分還是和項目的使用場景密切相關的。我們可以在了解這些方式以後，選擇最適合自己項目的方案，為自己的監控工具服務。