我之前寫了一個前端監(jiān)控的庫 sunshine-track，很多人都來問我說，錯誤監(jiān)控 這個環(huán)節(jié)的思路是什么，要怎么在前端項(xiàng)目中做錯誤監(jiān)控？

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

圖片

錯誤類型

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

常見錯誤類型

1、SyntaxError

SyntaxError 是解析時(shí)發(fā)生語法錯誤，這個錯誤是捕獲不到的，因?yàn)樗前l(fā)生在構(gòu)建階段，而不是運(yùn)行階段

圖片

圖片

2、TypeError

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

圖片

圖片

3、ReferenceError

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

圖片

圖片

4、RangeError

RangeError 指的是：當(dāng)一個值不在其所允許的范圍或者集合中，通常會在無限遞歸時(shí)報(bào)錯

圖片

圖片

網(wǎng)絡(luò)錯誤

1、ResourceError

ResourceError 指的是：資源加載錯誤

圖片

2、請求錯誤

圖片

錯誤監(jiān)聽

接下來講一下我們應(yīng)該如何監(jiān)聽這些錯誤

try...catch

try...catch 是捕獲錯誤的重要方式，但是它只能捕獲運(yùn)行報(bào)錯、同步報(bào)錯，捕獲不了 編譯報(bào)錯、異步報(bào)錯

圖片

window.onerror

代碼報(bào)錯時(shí)，會觸發(fā) window.onerror 回調(diào)函數(shù)，這個回調(diào)函數(shù)接受了以下幾個參數(shù)

圖片

但是 window.onerror 也是有缺點(diǎn)的，捕獲不了 編譯報(bào)錯、資源報(bào)錯

圖片

window.addEventListener('error')

由于 冒泡機(jī)制 ，當(dāng)資源報(bào)錯 時(shí)觸發(fā) error，會冒泡到 window 上，所以 window.addEventListener('error') 可以捕獲到 資源報(bào)錯，但是它也只能捕獲 script、css、img 這些標(biāo)簽加載資源的報(bào)錯，而捕獲不了 new Image 這種資源加載報(bào)錯，且捕獲不了 網(wǎng)絡(luò)錯誤

圖片

Promise catch

當(dāng) Promise 狀態(tài)變成 rejected 時(shí)，可以使用 catch 方法去捕獲

圖片

async/await

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

圖片

window.addEventListener('unhandledrejection')

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

圖片

Vue & React

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

圖片

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

圖片