不知道前端代碼哪里報(bào)錯(cuò)了？我有七種方式去監(jiān)控它！
共 1695字，需瀏覽 4分鐘
·
2024-11-29 22:20
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~
我之前寫了一個(gè)前端監(jiān)控的庫(kù) 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ā)生語(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)聽
接下來講一下我們應(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')
無(wú)論是 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
結(jié)語(yǔ)
我是林三心，一個(gè)待過小型toG型外包公司、大型外包公司、小公司、潛力型創(chuàng)業(yè)公司、大公司的作死型前端選手