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

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

圖片

錯(cuò)誤類型

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

常見錯(cuò)誤類型

1、SyntaxError

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

圖片

圖片

2、TypeError

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

圖片

圖片

3、ReferenceError

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

圖片

圖片

4、RangeError

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

圖片

圖片

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

1、ResourceError

ResourceError 指的是：資源加載錯(cuò)誤

圖片

2、請(qǐng)求錯(cuò)誤

圖片

錯(cuò)誤監(jiān)聽

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

try...catch

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

圖片

window.onerror

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

圖片

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

圖片

window.addEventListener('error')

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

圖片

Promise catch

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

圖片

async/await

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

圖片

window.addEventListener('unhandledrejection')

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

圖片

Vue & React

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

圖片

React 需要寫一個(gè)錯(cuò)誤邊界接收組件 ErrorBoundary

圖片