本文首發(fā)于 vivo互聯(lián)網(wǎng)技術(shù) 微信公眾號(hào) https://mp.weixin.qq.com/s/E51lKQOojsvhHvACIyXwhw
創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為江源企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，江源網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
作者：黃文佳
對(duì)于用戶(hù)在訪(fǎng)問(wèn)頁(yè)面時(shí)發(fā)生的錯(cuò)誤，主要包括以下幾個(gè)類(lèi)型：
JavaScript代碼在用戶(hù)瀏覽器中執(zhí)行時(shí)，由于一些邊界情況、本地環(huán)境的不可控等因素，可能會(huì)存在js運(yùn)行時(shí)錯(cuò)誤。
而依賴(lài)客戶(hù)端的某些方法，由于兼容性或者網(wǎng)絡(luò)等問(wèn)題，也有概率會(huì)出現(xiàn)運(yùn)行時(shí)錯(cuò)誤。
e.g: 下圖是當(dāng)使用了未定義的變量"foo"，導(dǎo)致產(chǎn)生js運(yùn)行時(shí)錯(cuò)誤時(shí)的上報(bào)數(shù)據(jù)：
這里的靜態(tài)資源包括js、css以及image等?，F(xiàn)在的web項(xiàng)目，往往依賴(lài)了大量的靜態(tài)資源，而且一般也會(huì)有cdn存在。
如果某個(gè)節(jié)點(diǎn)出現(xiàn)問(wèn)題導(dǎo)致某個(gè)靜態(tài)資源無(wú)法訪(fǎng)問(wèn)，就需要能夠捕獲這種異常并進(jìn)行上報(bào)，方便第一時(shí)間解決問(wèn)題。
e.g: 下圖是圖片資源不存在時(shí)的上報(bào)數(shù)據(jù)：
未使用catch捕獲的promise錯(cuò)誤，往往都會(huì)存在比較大的風(fēng)險(xiǎn)。而編碼時(shí)有可能覆蓋的不夠全面，因此有必要監(jiān)控未處理的promise錯(cuò)誤并進(jìn)行上報(bào)。
e.g: 下圖是promise請(qǐng)求接口發(fā)生錯(cuò)誤后，未進(jìn)行catch時(shí)的上報(bào)數(shù)據(jù)：
異步錯(cuò)誤的捕獲分為兩個(gè)部分：一個(gè)是傳統(tǒng)的XMLHttpRequest，另一個(gè)是使用fetch api。
像axios和jQuery等庫(kù)就是在xhr上的封裝，而有些情況也可能會(huì)使用原生的fetch，因此對(duì)這兩種情況都要進(jìn)行捕獲。
e.g: 下圖是xhr請(qǐng)求接口返回400時(shí)捕獲后的上報(bào)數(shù)據(jù)：
使用window.onerror和window.addEventListener('error')都能捕獲，但是window.onerror含有詳細(xì)的error堆棧信息，存在error.stack中，所以我們選擇使用onerror的方式對(duì)js運(yùn)行時(shí)錯(cuò)誤進(jìn)行捕獲。
重慶分公司
重慶分公司
window.onerror = function (msg, url, lineNo, columnNo, error) {
// 處理錯(cuò)誤信息
}
// demo
msg: Uncaught TypeError: Uncaught ReferenceError: a is not defined
error.statck: TypeError: ReferenceError: a is not defined at http://xxxx.js:1:13
window.addEventListener('error', event => (){
// 處理錯(cuò)誤信息
}, false);
// true代表在捕獲階段調(diào)用，false代表在冒泡階段捕獲。使用true或false都可以，默認(rèn)為false
實(shí)現(xiàn)原理：當(dāng)一項(xiàng)資源（如或
此步驟的作用是告知瀏覽器以匿名方式獲取目標(biāo)腳本。這意味著請(qǐng)求腳本時(shí)不會(huì)向服務(wù)端發(fā)送潛在的用戶(hù)身份信息（例如 Cookies、HTTP 證書(shū)等）。
添加跨域 HTTP 響應(yīng)頭：
Access-Control-Allow-Origin: *
或者
Access-Control-Allow-Origin: http://test.com
注意：大部分主流 CDN 默認(rèn)添加了 Access-Control-Allow-Origin 屬性。
完成上述兩步之后，即可通過(guò) window.onerror 捕獲跨域腳本的報(bào)錯(cuò)信息。
難以在 HTTP 請(qǐng)求響應(yīng)頭中添加跨域?qū)傩詴r(shí)，還可以考慮 try catch 這個(gè)備選方案。
在如下示例 HTML 頁(yè)面中加入 try catch：
Test page in http://test.com
// app.js里面有一個(gè)foo方法，調(diào)用了不存在的bar方法
// 運(yùn)行輸出結(jié)果如下：
=> ReferenceError: bar is not defined
at foo (http://another-domain.com/app.js:2:3)
at http://test.com/:15:3
=> "Script error.", "", 0, 0, undefined
可見(jiàn) try catch 中的 Console 語(yǔ)句輸出了完整的信息，但 window.onerror 中只能捕獲“Script error”。根據(jù)這個(gè)特點(diǎn)，可以在 catch 語(yǔ)句中手動(dòng)上報(bào)捕獲的異常。
上述的錯(cuò)誤捕獲基本覆蓋了前端監(jiān)控所需的錯(cuò)誤場(chǎng)景，但是第三部分指出的兩個(gè)其他問(wèn)題，目前解決的方式都不太完美。
對(duì)于有使用框架的項(xiàng)目：一是需要有額外的處理流程，比如示例中就需要單獨(dú)為vue項(xiàng)目進(jìn)行初始化；二是對(duì)于其他框架，都需要單獨(dú)處理，例如react項(xiàng)目的話(huà)，則需要使用官方提供的componentDidCatch方法來(lái)做錯(cuò)誤捕獲。
而對(duì)于跨域js捕獲的問(wèn)題：我們并不能保證所有的跨域靜態(tài)資源都添加跨域 HTTP 響應(yīng)頭；而通過(guò)第二種包裹try-catch的方式進(jìn)行上報(bào)，則需要考慮的場(chǎng)景繁多并且無(wú)法保證沒(méi)有遺漏。
雖然存在這兩點(diǎn)不足，但前端錯(cuò)誤捕獲這部分還是和項(xiàng)目的使用場(chǎng)景密切相關(guān)的。我們可以在了解這些方式以后，選擇最適合自己項(xiàng)目的方案，為自己的監(jiān)控工具服務(wù)。
—— —— 參考文檔 —— ——
1.Using XMLHttpRequest：
_https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest_
2.script error 產(chǎn)生的原因和解決辦法：
https://www.alibabacloud.com/help/zh/faq-detail/88579.htm
3.JavaScript執(zhí)行錯(cuò)誤：
https://docs.fundebug.com/notifier/javascript/type/javascript.html
4.betterjs的script error：
https://github.com/BetterJS/badjs-report/issues/3
5.Vuejs的errorHandler：
https://cn.vuejs.org/v2/api/index.html#errorHandler
6.React的componentDidCatch：
https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
