前端異常處理最佳實踐（轉）

本文轉自前端社，https://mp.weixin.qq.com/s/l2IPFiYIEXhwfZbjfeqKMw本身保存記錄。

前端能夠說是最貼近用戶的一層，當產品不斷的迭代完善，產品的用戶體驗會更加趨向於完美，然而前端異常倒是很另人頭疼的一個問題，咱們應該怎麼去對待這些異常呢？

1、爲何要處理異常？

異常是不可控的，會影響最終的呈現結果，可是咱們有充分的理由去作這樣的事情。

1. 加強用戶體驗；

2. 遠程定位問題；

3. 未雨綢繆，及早發現問題；

4. 沒法複線問題，尤爲是移動端，機型，系統都是問題；

5. 完善的前端方案，前端監控系統；

對於 JS 而言，咱們面對的僅僅只是異常，異常的出現不會直接致使 JS 引擎崩潰，最多隻會使當前執行的任務終止。

2、須要處理哪些異常？

對於前端來講，咱們可作的異常捕獲還真很多。總結一下，大概以下：

• JS 語法錯誤、代碼異常

• AJAX 請求異常

• 靜態資源加載異常

• Promise 異常

• Iframe 異常

• 跨域 Script error

• 崩潰和卡頓

下面我會針對每種具體狀況來講明如何處理這些異常。

3、Try-Catch 的誤區

try-catch 只能捕獲到同步的運行時錯誤，對語法和異步錯誤卻無能爲力，捕獲不到。

一、同步運行時錯誤：

輸出：

二、不能捕獲到語法錯誤，咱們修改一下代碼，刪掉一個單引號：

輸出：

不過語法錯誤在咱們開發階段就能夠看到，應該不會順利上到線上環境。

三、異步錯誤

能夠看看日誌：

並無捕獲到異常，這是須要咱們特別注意的地方。

4、window.onerror 不是萬能的

當 JS 運行時錯誤發生時，window 會觸發一個 ErrorEvent 接口的 error 事件，並執行 window.onerror()。

一、首先試試同步運行時錯誤

能夠看到，咱們捕獲到了異常：

二、再試試語法錯誤呢？

控制檯打印出了這樣的異常：

居然沒有捕獲到語法錯誤？

三、懷着忐忑的心，咱們最後來試試異步運行時錯誤：

控制檯輸出了：

四、接着，咱們試試網絡請求異常的狀況：

咱們發現，不管是靜態資源異常，或者接口異常，錯誤都沒法捕獲到。

補充一點：window.onerror 函數只有在返回 true 的時候，異常纔不會向上拋出，不然即便是知道異常的發生控制檯仍是會顯示 Uncaught Error: xxxxx

控制檯就不會再有這樣的錯誤了：

須要注意：

• onerror 最好寫在全部 JS 腳本的前面，不然有可能捕獲不到錯誤；

• onerror 沒法捕獲語法錯誤；

到這裏基本就清晰了：在實際的使用過程當中，onerror 主要是來捕獲預料以外的錯誤，而 try-catch 則是用來在可預見狀況下監控特定的錯誤，二者結合使用更加高效。

問題又來了，捕獲不到靜態資源加載異常怎麼辦？

1、window.addEventListener

當一項資源（如圖片或腳本）加載失敗，加載資源的元素會觸發一個 Event 接口的 error 事件，並執行該元素上的onerror() 處理函數。這些 error 事件不會向上冒泡到 window ，不過（至少在 Firefox 中）能被單一的window.addEventListener 捕獲。

控制檯輸出：

因爲網絡請求異常不會事件冒泡，所以必須在捕獲階段將其捕捉到才行，可是這種方式雖然能夠捕捉到網絡請求的異常，可是沒法判斷 HTTP 的狀態是 404 仍是其餘好比 500 等等，因此還須要配合服務端日誌才進行排查分析才能夠。

須要注意：

不一樣瀏覽器下返回的 error 對象可能不一樣，須要注意兼容處理。
須要注意避免 addEventListener 重複監聽。

2、Promise Catch

在 promise 中使用 catch 能夠很是方便的捕獲到異步 error ，這個很簡單。沒有寫 catch 的 Promise 中拋出的錯誤沒法被 onerror 或 try-catch 捕獲到，因此咱們務必要在 Promise 中不要忘記寫 catch 處理拋出的異常。

解決方案： 爲了防止有漏掉的 Promise 異常，建議在全局增長一個對 unhandledrejection 的監聽，用來全局監聽Uncaught Promise Error。使用方式：

咱們繼續來嘗試一下：

那若是對 Promise 不進行 catch 呢？

嗯，事實證實，也是會被正常捕獲到的。

因此，正如咱們上面所說，爲了防止有漏掉的 Promise 異常，建議在全局增長一個對 unhandledrejection 的監聽，用來全局監聽 Uncaught Promise Error。

補充一點：若是去掉控制檯的異常顯示，須要加上：

3、VUE errorHandler

4、React 異常捕獲

React 16 提供了一個內置函數 componentDidCatch，使用它能夠很是簡單的獲取到 react 下的錯誤信息


UI 的某部分引發的 JS 錯誤不該該破壞整個程序，爲了幫 React 的使用者解決這個問題，React 16 介紹了一種關於錯誤邊界（error boundary)的新觀念。

須要注意的是： error boundaries 並不會捕捉下面這些錯誤。

1. 事件處理器

2. 異步代碼

3. 服務端的渲染代碼

4. 在 error boundaries 區域內的錯誤

咱們來舉一個小例子，在下面這個 componentDIdCatch(error,info) 裏的類會變成一個 error boundary：

而後咱們像使用普通組件那樣使用它：

componentDidCatch() 方法像 JS 的 catch{} 模塊同樣工做，可是對於組件，只有 class 類型的組件(class component )能夠成爲一個 error boundaries 。

實際上，大多數狀況下咱們能夠在整個程序中定義一個 error boundary 組件，以後就能夠一直使用它了！

5、iframe 異常

對於 iframe 的異常捕獲，咱們還得借力 window.onerror：

一個簡單的例子可能以下：

6、Script error

通常狀況，若是出現 Script error 這樣的錯誤，基本上能夠肯定是出現了跨域問題。這時候，是不會有其餘太多輔助信息的，可是解決思路無非以下：

跨源資源共享機制( CORS )：咱們爲 script 標籤添加 crossOrigin 屬性。

或者動態去添加 js 腳本：

特別注意，服務器端須要設置：Access-Control-Allow-Origin
此外，咱們也能夠試試這個-解決 Script Error 的另類思路：

簡單解釋一下：

改寫了 EventTarget 的 addEventListener 方法；

對傳入的 listener 進行包裝，返回包裝過的 listener，對其執行進行 try-catch；

瀏覽器不會對 try-catch 起來的異常進行跨域攔截，因此 catch 到的時候，是有堆棧信息的；

從新 throw 出來異常的時候，執行的是同域代碼，因此 window.onerror 捕獲的時候不會丟失堆棧信息；

利用包裝 addEventListener，咱們還能夠達到「擴展堆棧」的效果

7、崩潰和卡頓

卡頓也就是網頁暫時響應比較慢， JS 可能沒法及時執行。但崩潰就不同了，網頁都崩潰了，JS 都不運行了，還有什麼辦法能夠監控網頁的崩潰，並將網頁崩潰上報呢？

崩潰和卡頓也是不可忽視的，也許會致使你的用戶流失。

一、利用window對象的load和beforeunload事件實現了對網頁崩潰的監控。

二、基於如下緣由，咱們可使用service Worker來實現對網頁崩潰的監控。

• Service Worker 有本身獨立的工做線程，與網頁區分開，網頁崩潰了，Service Worker 通常狀況下不會崩潰；

• Service Worker 生命週期通常要比網頁還要長，能夠用來監控網頁的狀態；

• 網頁能夠經過 navigator.serviceWorker.controller.postMessage API 向掌管本身的 SW 發送消息。

8、錯誤上報

一、經過 Ajax 發送數據
由於 Ajax 請求自己也有可能會發生異常，並且有可能會引起跨域問題，通常狀況下更推薦使用動態建立 img 標籤的形式進行上報。

二、動態建立 img 標籤的形式

收集異常信息量太多，怎麼辦？實際中，咱們不得不考慮這樣一種狀況：若是你的網站訪問量很大，那麼一個必然的錯誤發送的信息就有不少條，這時候，咱們須要設置採集率，從而減緩服務器的壓力:

採集率應該經過實際狀況來設定，隨機數，或者某些用戶特徵都是不錯的選擇。

9、總結

回到咱們開頭提出的那個問題，如何優雅的處理異常呢？

1. 可疑區域增長 Try-Catch

2. 全局監控 JS 異常 window.onerror

3. 全局監控靜態資源異常 window.addEventListener

4. 捕獲沒有 Catch 的 Promise 異常：unhandledrejection

5. VUE errorHandler 和 React componentDidCatch

6. 監控網頁崩潰：window 對象的 load 和 beforeunload

7. 跨域 crossOrigin 解決

其實很簡單，採用組合方案，分類型的去捕獲異常，這樣基本 80%-90% 的問題都化於無形。