我之前寫了一個前端監控的庫 sunshine-track，很多人都來問我說，錯誤監控 這個環節的思路是什么，要怎么在前端項目中做錯誤監控？

鏈接：https://github.com/sanxin-lin/sunshine-track

圖片

錯誤類型

我們先來說說前端中的錯誤類型有哪一些

常見錯誤類型

1、SyntaxError

SyntaxError 是解析時發生語法錯誤，這個錯誤是捕獲不到的，因為它是發生在構建階段，而不是運行階段

圖片

圖片

2、TypeError

TypeError 指的是：值不是所期待的類型

圖片

圖片

3、ReferenceError

ReferenceError 指的是：引用未聲明的變量

圖片

圖片

4、RangeError

RangeError 指的是：當一個值不在其所允許的范圍或者集合中，通常會在無限遞歸時報錯

圖片

圖片

網絡錯誤

1、ResourceError

ResourceError 指的是：資源加載錯誤

圖片

2、請求錯誤

圖片

錯誤監聽

接下來講一下我們應該如何監聽這些錯誤

try...catch

try...catch 是捕獲錯誤的重要方式，但是它只能捕獲運行報錯、同步報錯，捕獲不了 編譯報錯、異步報錯

圖片

window.onerror

代碼報錯時，會觸發 window.onerror 回調函數，這個回調函數接受了以下幾個參數

圖片

但是 window.onerror 也是有缺點的，捕獲不了 編譯報錯、資源報錯

圖片

window.addEventListener('error')

由于 冒泡機制 ，當資源報錯 時觸發 error，會冒泡到 window 上，所以 window.addEventListener('error') 可以捕獲到 資源報錯，但是它也只能捕獲 script、css、img 這些標簽加載資源的報錯，而捕獲不了 new Image 這種資源加載報錯，且捕獲不了 網絡錯誤

圖片

Promise catch

當 Promise 狀態變成 rejected 時，可以使用 catch 方法去捕獲

圖片

async/await

try...catch 雖然捕獲不了異步錯誤，但是我們知道 async/await 是用同步的方式去執行異步

圖片

window.addEventListener('unhandledrejection')

無論是 Promise、async/await 歸根結底都是 Promise異步報錯，都可以使用 window.addEventListener('unhandledrejection') 來捕獲錯誤

圖片

Vue & React

Vue 提供了 Vue.config.errorHandler 這個屬性，可傳入錯誤回調，只要是組件里報錯了，都會被這個回調函數捕獲

圖片

React 需要寫一個錯誤邊界接收組件 ErrorBoundary

圖片