摘要:二需要處理哪些異常對(duì)于前端來(lái)說(shuō),我們可做的異常捕獲還真不少??偨Y(jié)一下,大概如下語(yǔ)法錯(cuò)誤代碼異常請(qǐng)求異常靜態(tài)資源加載異常異常異??缬虮罎⒑涂D下面我會(huì)針對(duì)每種具體情況來(lái)說(shuō)明如何處理這些異常。
前端一直是距離用戶最近的一層,隨著產(chǎn)品的日益完善,我們會(huì)更加注重用戶體驗(yàn),而前端異常卻如鯁在喉,甚是煩人。
一、為什么要處理異常?
異常是不可控的,會(huì)影響最終的呈現(xiàn)結(jié)果,但是我們有充分的理由去做這樣的事情。
1.增強(qiáng)用戶體驗(yàn);
2.遠(yuǎn)程定位問(wèn)題;
3.未雨綢繆,及早發(fā)現(xiàn)問(wèn)題;
4.無(wú)法復(fù)線問(wèn)題,尤其是移動(dòng)端,機(jī)型,系統(tǒng)都是問(wèn)題;
5.完善的前端方案,前端監(jiān)控系統(tǒng);
對(duì)于 JS 而言,我們面對(duì)的僅僅只是異常,異常的出現(xiàn)不會(huì)直接導(dǎo)致 JS 引擎崩潰,最多只會(huì)使當(dāng)前執(zhí)行的任務(wù)終止。
二、需要處理哪些異常?
對(duì)于前端來(lái)說(shuō),我們可做的異常捕獲還真不少??偨Y(jié)一下,大概如下:
JS 語(yǔ)法錯(cuò)誤、代碼異常
AJAX 請(qǐng)求異常
靜態(tài)資源加載異常
Promise 異常
Iframe 異常
跨域 Script error
崩潰和卡頓
下面我會(huì)針對(duì)每種具體情況來(lái)說(shuō)明如何處理這些異常。
三、Try-Catch 的誤區(qū)
try-catch 只能捕獲到同步的運(yùn)行時(shí)錯(cuò)誤,對(duì)語(yǔ)法和異步錯(cuò)誤卻無(wú)能為力,捕獲不到。
1.同步運(yùn)行時(shí)錯(cuò)誤:
??
輸出:
??
2.不能捕獲到語(yǔ)法錯(cuò)誤,我們修改一下代碼,刪掉一個(gè)單引號(hào):
??
輸出:
??
不過(guò)語(yǔ)法錯(cuò)誤在我們開發(fā)階段就可以看到,應(yīng)該不會(huì)順利上到線上環(huán)境。
3.異步錯(cuò)誤:
??
可以看看日志:
??
并沒(méi)有捕獲到異常,這是需要我們特別注意的地方。
四、window.onerror 不是萬(wàn)能的
當(dāng) JS 運(yùn)行時(shí)錯(cuò)誤發(fā)生時(shí),window 會(huì)觸發(fā)一個(gè) ErrorEvent 接口的 error 事件,并執(zhí)行 window.onerror()。
??
首先試試同步運(yùn)行時(shí)錯(cuò)誤
??
可以看到,我們捕獲到了異常:
??
再試試語(yǔ)法錯(cuò)誤呢?
??
控制臺(tái)打印出了這樣的異常:
??
竟然沒(méi)有捕獲到語(yǔ)法錯(cuò)誤?
懷著忐忑的心,我們最后來(lái)試試異步運(yùn)行時(shí)錯(cuò)誤:
??
控制臺(tái)輸出了:
??
接著,我們?cè)囋嚲W(wǎng)絡(luò)請(qǐng)求異常的情況:
??
我們發(fā)現(xiàn),不論是靜態(tài)資源異常,或者接口異常,錯(cuò)誤都無(wú)法捕獲到。
補(bǔ)充一點(diǎn):window.onerror 函數(shù)只有在返回 true 的時(shí)候,異常才不會(huì)向上拋出,否則即使是知道異常的發(fā)生控制臺(tái)還是會(huì)顯示 Uncaught Error: xxxxx
??
控制臺(tái)就不會(huì)再有這樣的錯(cuò)誤了:
??
需要注意:
onerror 最好寫在所有 JS 腳本的前面,否則有可能捕獲不到錯(cuò)誤;
onerror 無(wú)法捕獲語(yǔ)法錯(cuò)誤;
到這里基本就清晰了:在實(shí)際的使用過(guò)程中,onerror 主要是來(lái)捕獲預(yù)料之外的錯(cuò)誤,而 try-catch 則是用來(lái)在可預(yù)見情況下監(jiān)控特定的錯(cuò)誤,兩者結(jié)合使用更加高效。
問(wèn)題又來(lái)了,捕獲不到靜態(tài)資源加載異常怎么辦?
一、window.addEventListener
當(dāng)一項(xiàng)資源(如圖片或腳本)加載失敗,加載資源的元素會(huì)觸發(fā)一個(gè) Event 接口的 error 事件,并執(zhí)行該元素上的onerror() 處理函數(shù)。這些 error 事件不會(huì)向上冒泡到 window ,不過(guò)(至少在 Firefox 中)能被單一的window.addEventListener 捕獲。
??
控制臺(tái)輸出:
??
由于網(wǎng)絡(luò)請(qǐng)求異常不會(huì)事件冒泡,因此必須在捕獲階段將其捕捉到才行,但是這種方式雖然可以捕捉到網(wǎng)絡(luò)請(qǐng)求的異常,但是無(wú)法判斷 HTTP 的狀態(tài)是 404 還是其他比如 500 等等,所以還需要配合服務(wù)端日志才進(jìn)行排查分析才可以。
需要注意:
不同瀏覽器下返回的 error 對(duì)象可能不同,需要注意兼容處理。
需要注意避免 addEventListener 重復(fù)監(jiān)聽。
二、Promise Catch
在 promise 中使用 catch 可以非常方便的捕獲到異步 error ,這個(gè)很簡(jiǎn)單。沒(méi)有寫 catch 的 Promise 中拋出的錯(cuò)誤無(wú)法被 onerror 或 try-catch 捕獲到,所以我們務(wù)必要在 Promise 中不要忘記寫 catch 處理拋出的異常。
解決方案: 為了防止有漏掉的 Promise 異常,建議在全局增加一個(gè)對(duì) unhandledrejection 的監(jiān)聽,用來(lái)全局監(jiān)聽Uncaught Promise Error。使用方式:
??
我們繼續(xù)來(lái)嘗試一下:
??
那如果對(duì) Promise 不進(jìn)行 catch 呢?
??
嗯,事實(shí)證明,也是會(huì)被正常捕獲到的。
所以,正如我們上面所說(shuō),為了防止有漏掉的 Promise 異常,建議在全局增加一個(gè)對(duì) unhandledrejection 的監(jiān)聽,用來(lái)全局監(jiān)聽 Uncaught Promise Error。
補(bǔ)充一點(diǎn):如果去掉控制臺(tái)的異常顯示,需要加上:
??
三、VUE errorHandler
??
四、React 異常捕獲
React 16 提供了一個(gè)內(nèi)置函數(shù) componentDidCatch,使用它可以非常簡(jiǎn)單的獲取到 react 下的錯(cuò)誤信息
??
UI 的某部分引起的 JS 錯(cuò)誤不應(yīng)該破壞整個(gè)程序,為了幫 React 的使用者解決這個(gè)問(wèn)題,React 16 介紹了一種關(guān)于錯(cuò)誤邊界(error boundary)的新觀念。
需要注意的是: error boundaries 并不會(huì)捕捉下面這些錯(cuò)誤。
1.事件處理器
2.異步代碼
3.服務(wù)端的渲染代碼
4.在 error boundaries 區(qū)域內(nèi)的錯(cuò)誤
我們來(lái)舉一個(gè)小例子,在下面這個(gè) componentDIdCatch(error,info) 里的類會(huì)變成一個(gè) error boundary:
??
然后我們像使用普通組件那樣使用它:
componentDidCatch() 方法像 JS 的 catch{} 模塊一樣工作,但是對(duì)于組件,只有 class 類型的組件(class component )可以成為一個(gè) error boundaries 。
實(shí)際上,大多數(shù)情況下我們可以在整個(gè)程序中定義一個(gè) error boundary 組件,之后就可以一直使用它了!
五、iframe 異常
對(duì)于 iframe 的異常捕獲,我們還得借力 window.onerror:
??
一個(gè)簡(jiǎn)單的例子可能如下:
??
六、Script error
一般情況,如果出現(xiàn) Script error 這樣的錯(cuò)誤,基本上可以確定是出現(xiàn)了跨域問(wèn)題。這時(shí)候,是不會(huì)有其他太多輔助信息的,但是解決思路無(wú)非如下:
跨源資源共享機(jī)制( CORS ):我們?yōu)?script 標(biāo)簽添加 crossOrigin 屬性。
??
或者動(dòng)態(tài)去添加 js 腳本:
??
特別注意,服務(wù)器端需要設(shè)置:Access-Control-Allow-Origin
此外,我們也可以試試這個(gè)-解決 Script Error 的另類思路:
??
簡(jiǎn)單解釋一下:
改寫了 EventTarget 的 addEventListener 方法;
對(duì)傳入的 listener 進(jìn)行包裝,返回包裝過(guò)的 listener,對(duì)其執(zhí)行進(jìn)行 try-catch;
瀏覽器不會(huì)對(duì) try-catch 起來(lái)的異常進(jìn)行跨域攔截,所以 catch 到的時(shí)候,是有堆棧信息的;
重新 throw 出來(lái)異常的時(shí)候,執(zhí)行的是同域代碼,所以 window.onerror 捕獲的時(shí)候不會(huì)丟失堆棧信息;
利用包裝 addEventListener,我們還可以達(dá)到「擴(kuò)展堆棧」的效果:
??
七、崩潰和卡頓
卡頓也就是網(wǎng)頁(yè)暫時(shí)響應(yīng)比較慢, JS 可能無(wú)法及時(shí)執(zhí)行。但崩潰就不一樣了,網(wǎng)頁(yè)都崩潰了,JS 都不運(yùn)行了,還有什么辦法可以監(jiān)控網(wǎng)頁(yè)的崩潰,并將網(wǎng)頁(yè)崩潰上報(bào)呢?
崩潰和卡頓也是不可忽視的,也許會(huì)導(dǎo)致你的用戶流失。
利用 window 對(duì)象的 load 和 beforeunload 事件實(shí)現(xiàn)了網(wǎng)頁(yè)崩潰的監(jiān)控。
??
基于以下原因,我們可以使用 Service Worker 來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)崩潰的監(jiān)控:
Service Worker 有自己獨(dú)立的工作線程,與網(wǎng)頁(yè)區(qū)分開,網(wǎng)頁(yè)崩潰了,Service Worker 一般情況下不會(huì)崩潰;
Service Worker 生命周期一般要比網(wǎng)頁(yè)還要長(zhǎng),可以用來(lái)監(jiān)控網(wǎng)頁(yè)的狀態(tài);
網(wǎng)頁(yè)可以通過(guò) navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 發(fā)送消息。
八、錯(cuò)誤上報(bào)
1.通過(guò) Ajax 發(fā)送數(shù)據(jù):
因?yàn)?Ajax 請(qǐng)求本身也有可能會(huì)發(fā)生異常,而且有可能會(huì)引發(fā)跨域問(wèn)題,一般情況下更推薦使用動(dòng)態(tài)創(chuàng)建 img 標(biāo)簽的形式進(jìn)行上報(bào)。
2.動(dòng)態(tài)創(chuàng)建 img 標(biāo)簽的形式:
??
收集異常信息量太多,怎么辦?實(shí)際中,我們不得不考慮這樣一種情況:如果你的網(wǎng)站訪問(wèn)量很大,那么一個(gè)必然的錯(cuò)誤發(fā)送的信息就有很多條,這時(shí)候,我們需要設(shè)置采集率,從而減緩服務(wù)器的壓力:
??
采集率應(yīng)該通過(guò)實(shí)際情況來(lái)設(shè)定,隨機(jī)數(shù),或者某些用戶特征都是不錯(cuò)的選擇。
九、總結(jié)
回到我們開頭提出的那個(gè)問(wèn)題,如何優(yōu)雅的處理異常呢?
1.可疑區(qū)域增加 Try-Catch
2.全局監(jiān)控 JS 異常 window.onerror
3.全局監(jiān)控靜態(tài)資源異常 window.addEventListener
4.捕獲沒(méi)有 Catch 的 Promise 異常:unhandledrejection
5.VUE errorHandler 和 React componentDidCatch
6.監(jiān)控網(wǎng)頁(yè)崩潰:window 對(duì)象的 load 和 beforeunload
7.跨域 crossOrigin 解決
其實(shí)很簡(jiǎn)單,采用組合方案,分類型的去捕獲異常,這樣基本 80%-90% 的問(wèn)題都化于無(wú)形。
喜歡小編的文章可以關(guān)注小編哦~
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/54805.html
摘要:區(qū)間表示參數(shù)錯(cuò)誤區(qū)間表示用戶錯(cuò)誤區(qū)間表示接口異常這樣前端開發(fā)人員在得到返回值后,根據(jù)狀態(tài)碼就可以知道,大概什么錯(cuò)誤,再根據(jù)相關(guān)的信息描述,可以快速定位。享學(xué)課堂特邀作者:老顧前言在移動(dòng)互聯(lián)網(wǎng),分布式、微服務(wù)盛行的今天,現(xiàn)在項(xiàng)目絕大部分都采用的微服務(wù)框架,前后端分離方式,(題外話:前后端的工作職責(zé)越來(lái)越明確,現(xiàn)在的前端都稱之為大前端,技術(shù)棧以及生態(tài)圈都已經(jīng)非常成熟;以前后端人員瞧不起前端人員,...
摘要:現(xiàn)在我就用框架來(lái)進(jìn)行實(shí)戰(zhàn)下在實(shí)際業(yè)務(wù)中是如何優(yōu)雅的使用異常的場(chǎng)景描述選擇一個(gè)比較簡(jiǎn)單的業(yè)務(wù)場(chǎng)景,以登錄模塊為例,用戶在移動(dòng)端進(jìn)行登錄時(shí),需要進(jìn)行登錄,注冊(cè),忘記密碼,獲取手機(jī)驗(yàn)證碼等接口。 前言 剛開始接觸PHP的時(shí)候沒(méi)有意識(shí)到異常的重要性,有時(shí)候出問(wèn)題很難精確的找到問(wèn)題點(diǎn),正確的處理異常也是一門學(xué)問(wèn) 異常的類別 PHP7異常做了很多變動(dòng),異常類 Exception 和錯(cuò)誤類 Erro...
摘要:自從有了前后端分離,一些后端小伙伴給出的數(shù)據(jù)結(jié)構(gòu)也來(lái)越混亂了。由于是若類型的語(yǔ)言,所以在使用數(shù)據(jù)的時(shí)候經(jīng)常會(huì)出現(xiàn)這個(gè)幾個(gè)錯(cuò)誤而這些異常很難發(fā)現(xiàn),及時(shí)發(fā)上線了都不一定能發(fā)現(xiàn)。因?yàn)檫@些問(wèn)題都是由于數(shù)據(jù)異常導(dǎo)致的。 自從有了前后端分離,一些后端小伙伴給出的數(shù)據(jù)結(jié)構(gòu)也來(lái)越混亂了。以為分離減輕了他們的負(fù)擔(dān)接口的質(zhì)量會(huì)非常高但是人的惰性卻體現(xiàn)的很完美。由于js是若類型的語(yǔ)言,所以在使用數(shù)據(jù)的時(shí)候經(jīng)...
摘要:摘要堆棧是的關(guān)鍵。假設(shè)捕獲了一個(gè)異常,上報(bào)的堆棧是這個(gè)這個(gè)堆棧,你看得出問(wèn)題來(lái)嗎我們發(fā)布到的腳本文件,普遍是經(jīng)過(guò)壓縮的,所以堆棧可讀性相當(dāng)?shù)牟?。假如有下面的一個(gè)堆棧查看工具,又如何眼尖的同學(xué),一眼就能找到問(wèn)題。 摘要: 堆棧是Debug的關(guān)鍵。 原文:如何優(yōu)雅地查看 JS 錯(cuò)誤堆棧? 作者:小芭樂(lè) Fundebug經(jīng)授權(quán)轉(zhuǎn)載,版權(quán)歸原作者所有。 在前端,我們經(jīng)常會(huì)通過(guò) wind...
閱讀 1695·2021-11-23 09:51
閱讀 3217·2021-09-26 10:21
閱讀 814·2021-09-09 09:32
閱讀 893·2019-08-29 16:06
閱讀 3321·2019-08-26 13:36
閱讀 782·2019-08-26 10:56
閱讀 2575·2019-08-26 10:44
閱讀 1154·2019-08-23 14:04