不知道前端代碼哪里報(bào)錯(cuò)了？我有七種方式去監(jiān)控它！
我之前寫(xiě)了一個(gè)前端監(jiān)控的庫(kù) sunshine-track，很多人都來(lái)問(wèn)我說(shuō)，錯(cuò)誤監(jiān)控 這個(gè)環(huán)節(jié)的思路是什么，要怎么在前端項(xiàng)目中做錯(cuò)誤監(jiān)控？
鏈接：https://github.com/sanxin-lin/sunshine-track
圖片
錯(cuò)誤類型
我們先來(lái)說(shuō)說(shuō)前端中的錯(cuò)誤類型有哪一些
常見(jiàn)錯(cuò)誤類型
1、SyntaxError
SyntaxError 是解析時(shí)發(fā)生語(yǔ)法錯(cuò)誤，這個(gè)錯(cuò)誤是捕獲不到的，因?yàn)樗前l(fā)生在構(gòu)建階段，而不是運(yùn)行階段
圖片
圖片
2、TypeError
TypeError 指的是：值不是所期待的類型
圖片
圖片
3、ReferenceError
ReferenceError 指的是：引用未聲明的變量
圖片
圖片
4、RangeError
RangeError 指的是：當(dāng)一個(gè)值不在其所允許的范圍或者集合中，通常會(huì)在無(wú)限遞歸時(shí)報(bào)錯(cuò)
圖片
圖片
網(wǎng)絡(luò)錯(cuò)誤
1、ResourceError
ResourceError 指的是：資源加載錯(cuò)誤
圖片
2、請(qǐng)求錯(cuò)誤
圖片
錯(cuò)誤監(jiān)聽(tīng)
接下來(lái)講一下我們應(yīng)該如何監(jiān)聽(tīng)這些錯(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')
無(wú)論是 Promise、async/await 歸根結(jié)底都是 Promise異步報(bào)錯(cuò)，都可以使用 window.addEventListener('unhandledrejection') 來(lái)捕獲錯(cuò)誤
圖片
Vue & React
Vue 提供了 Vue.config.errorHandler 這個(gè)屬性，可傳入錯(cuò)誤回調(diào)，只要是組件里報(bào)錯(cuò)了，都會(huì)被這個(gè)回調(diào)函數(shù)捕獲
圖片
React 需要寫(xiě)一個(gè)錯(cuò)誤邊界接收組件 ErrorBoundary
圖片
