JS前端錯(cuò)誤監(jiān)控捕獲以及上報(bào)方法詳解

更新時(shí)間：2023年01月08日 14:58:11 作者：let_code

這篇文章主要為大家介紹了前端錯(cuò)誤監(jiān)控捕獲以及上報(bào)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前端錯(cuò)誤捕獲方法

前端捕獲錯(cuò)誤的方法：

try..catch：捕獲的異常必須是線程執(zhí)行進(jìn)入到try...catch且try...catch未執(zhí)行完的時(shí)候拋出來。

語法異常在語法檢查階段就報(bào)錯(cuò)了，線程尚未進(jìn)入try...catch代碼塊，所以無法捕獲到異常。

try {
    a.
}catch(e) {
    console.log('catch error:', e)
}

不能捕獲setTimeout或者Promise中的錯(cuò)誤。以下錯(cuò)誤都不能捕獲。如果想捕獲，要將try...catch放入到異步代碼內(nèi)部。

        try {
            new Promise((res, rej) => {
                rej('promise reject error')
                // throw new Error('promise throw error')
            })
        } catch (e) {
            console.log('catch error:', e)
        }
?
?
        try {
            setTimeout(() => {
                throw new Error('setTimeout throw error')
            }, 0)
        } catch (e) {
            console.log('catch error:', e)
        }

能捕獲async 異常

        async function fn() {
            try {
                let res = await new Promise((res, rej) => {
                    // rej('my reject err') // unhandledrejection 可以處理
                    throw Error('my throw error') // unhandledrejection 可以處理
                })
            } catch (err) {
                console.log('catch err', err)
            }
        }
?
        fn()

window.onerror：當(dāng)資源加載失敗或無法使用時(shí)，會(huì)在Window對(duì)象觸發(fā)error事件，無法捕獲promise錯(cuò)誤，可以捕獲setTimeout錯(cuò)誤。

當(dāng)加載自不同域的腳本中發(fā)生語法錯(cuò)誤時(shí)，瀏覽器為避免信息泄露的安全風(fēng)險(xiǎn)，語法錯(cuò)誤的細(xì)節(jié)將不會(huì)報(bào)告給瀏覽器console中，而是使用"Script error."信息代替。解決辦法是為 script 標(biāo)簽添加 crossOrigin 屬性，并且服務(wù)端配置Access-Control-Alow-Origin:*

unhandledrejection：當(dāng) Promise 被 reject 且沒有 reject 處理器的時(shí)候，會(huì)觸發(fā) unhandledrejection 事件

不同場景錯(cuò)誤處理方式

總結(jié)先行： addEventListener('error') + addEventListener('unhandledrejection') 的方式恰好能夠覆蓋5種異常錯(cuò)誤（同步任務(wù)，普通異步任務(wù)，promise任務(wù)，async任務(wù)，資源加載）的捕獲。

可以將unhandledrejection捕獲到的錯(cuò)誤throw出來讓error進(jìn)行捕獲之后統(tǒng)一上報(bào)。

跨域資源加載問題：window.addEventListener('error',()=>{})，并且script 標(biāo)簽添加 crossOrigin 屬性，并且服務(wù)端配置Access-Control-Alow-Origin
定時(shí)器內(nèi)部函數(shù)拋出錯(cuò)誤：window.onerror或者window.addEventListener('error',()=>{})
靜態(tài)資源加載的異常：window.addEventListener('error'）可以捕獲，但是window.onerror不能捕獲
網(wǎng)絡(luò)請(qǐng)求的異常：axios的響應(yīng)攔截器
線上壓縮代碼：開啟sourceMap

promise：常常配置catchhandler進(jìn)行處理，沒有處理的rejected的promise通過unhandledrejection

// 能觸發(fā) unhandledrejection ，因?yàn)槲达@式處理reason 
Promise.reject('error').then() 
Promise.reject('error').then(console.log) 
?
// 不能觸發(fā) unhandledrejection ，因?yàn)橐烟幚韗eason 
Promise.reject('error').then(console.log, console.log) 
// 不能觸發(fā) unhandledrejection ，因?yàn)闆]處理reason，直接拋出異常 
Promise.reject('error')

React捕獲錯(cuò)誤：錯(cuò)誤邊界（Error Boundaries）

部分 UI 的 JavaScript 錯(cuò)誤不應(yīng)該導(dǎo)致整個(gè)應(yīng)用崩潰，錯(cuò)誤邊界是一種 React 組件，這種組件可以捕獲發(fā)生在其子組件樹任何位置的 JavaScript 錯(cuò)誤，并打印這些錯(cuò)誤，同時(shí)展示降級(jí) UI，而并不會(huì)渲染那些發(fā)生崩潰的子組件樹。錯(cuò)誤邊界可以捕獲發(fā)生在整個(gè)子組件樹的渲染期間、生命周期方法以及構(gòu)造函數(shù)中的錯(cuò)誤。

錯(cuò)誤邊界無法捕獲以下場景中產(chǎn)生的錯(cuò)誤：

事件處理（了解更多）
異步代碼（例如 setTimeout 或 requestAnimationFrame 回調(diào)函數(shù)）
服務(wù)端渲染
它自身拋出來的錯(cuò)誤（并非它的子組件）

Vue捕獲錯(cuò)誤：

全局-Vue.config.errorHandler：指定組件的渲染和觀察期間未捕獲錯(cuò)誤的處理函數(shù)。這個(gè)處理函數(shù)被調(diào)用時(shí)，可獲取錯(cuò)誤信息和 Vue 實(shí)例。

從 2.2.0 起，這個(gè)鉤子也會(huì)捕獲組件生命周期鉤子里的錯(cuò)誤。同樣的，當(dāng)這個(gè)鉤子是 undefined 時(shí)，被捕獲的錯(cuò)誤會(huì)通過 console.error 輸出而避免應(yīng)用崩潰。
從 2.4.0 起，這個(gè)鉤子也會(huì)捕獲 Vue 自定義事件處理函數(shù)內(nèi)部的錯(cuò)誤了。
從 2.6.0 起，這個(gè)鉤子也會(huì)捕獲 v-on DOM 監(jiān)聽器內(nèi)部拋出的錯(cuò)誤。另外，如果任何被覆蓋的鉤子或處理函數(shù)返回一個(gè) Promise 鏈 (例如 async 函數(shù))，則來自其 Promise 鏈的錯(cuò)誤也會(huì)被處理。
錯(cuò)誤追蹤服務(wù) Sentry 和 Bugsnag 都通過此選項(xiàng)提供了官方支持。

生命周期鉤子-errorCaptured：在捕獲一個(gè)來自后代組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳

傳播規(guī)則：

默認(rèn)情況下，如果全局的 config.errorHandler 被定義，所有的錯(cuò)誤仍會(huì)發(fā)送它，因此這些錯(cuò)誤仍然會(huì)向單一的分析服務(wù)的地方進(jìn)行匯報(bào)。
如果一個(gè)組件的 inheritance chain (繼承鏈)或 parent chain (父鏈)中存在多個(gè) errorCaptured 鉤子，則它們將會(huì)被相同的錯(cuò)誤逐個(gè)喚起。
如果此 errorCaptured 鉤子自身拋出了一個(gè)錯(cuò)誤，則這個(gè)新錯(cuò)誤和原本被捕獲的錯(cuò)誤都會(huì)發(fā)送給全局的 config.errorHandler。
一個(gè) errorCaptured 鉤子能夠返回 false 以阻止錯(cuò)誤繼續(xù)向上傳播。本質(zhì)上是說“這個(gè)錯(cuò)誤已經(jīng)被搞定了且應(yīng)該被忽略”。它會(huì)阻止其它任何會(huì)被這個(gè)錯(cuò)誤喚起的 errorCaptured 鉤子和全局的 config.errorHandler。

錯(cuò)誤信息上報(bào)

捕獲到錯(cuò)誤信息后進(jìn)行上報(bào)，對(duì)于前端監(jiān)控很重要。

上報(bào)的方式有三種：

ajax進(jìn)行上報(bào)

發(fā)現(xiàn)錯(cuò)誤的時(shí)候上傳錯(cuò)誤到接口進(jìn)行存儲(chǔ)。

但是存在一些問題：

有嚴(yán)格的跨域限制
上報(bào)請(qǐng)求可能會(huì)阻塞業(yè)務(wù)
請(qǐng)求容易丟失（被瀏覽器強(qiáng)制cancel）

image上報(bào)

由于圖片天然可跨域，又能兼容所有的瀏覽器，而js和css等其他資源文件則可能出現(xiàn)安全攔截和跨域加載問題。

let img = new Image()
img.src='請(qǐng)求的url'

但由于是一個(gè)get請(qǐng)求，上報(bào)的數(shù)據(jù)量在不同的瀏覽器下上限不一致（2kb-8kb），這就可能出現(xiàn)超出長度限制而無法上報(bào)完整數(shù)據(jù)的情況。因此，圖片上報(bào)也是一個(gè)“不安全”的方式。

sendBeacon

navigator.sendBeacon() 方法可用于通過 HTTP POST 將少量數(shù)據(jù) 異步傳輸?shù)?Web 服務(wù)器。

它主要用于將統(tǒng)計(jì)數(shù)據(jù)發(fā)送到 Web 服務(wù)器，同時(shí)避免了用傳統(tǒng)技術(shù)

這個(gè)方法主要用于滿足統(tǒng)計(jì)和診斷代碼的需要，這些代碼通常嘗試在卸載（unload）文檔之前向 Web 服務(wù)器發(fā)送數(shù)據(jù)。過早的發(fā)送數(shù)據(jù)可能導(dǎo)致錯(cuò)過收集數(shù)據(jù)的機(jī)會(huì)。然而，對(duì)于開發(fā)者來說保證在文檔卸載期間發(fā)送數(shù)據(jù)一直是一個(gè)困難。因?yàn)橛脩舸硗ǔ?huì)忽略在 unload 事件處理器中產(chǎn)生的異步 XMLHttpRequest。