如何優雅處理前端異常？

前端一直是距離用戶最近的一層，隨著產品的日益完善，我們會更加注重用戶體驗，而前端異常卻如鯁在喉，甚是煩人。

一、為什么要處理異常？

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

• 增強用戶體驗；
• 遠程定位問題；
• 未雨綢繆，及早發現問題；
• 無法復線問題，尤其是移動端，機型，系統都是問題；
• 完善的前端方案，前端監控系統；

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

二、需要處理哪些異常？

對于前端來說，我們可做的異常捕獲還真不少。總結一下，大概如下：

• JS?語法錯誤、代碼異常
• AJAX?請求異常
• 靜態資源加載異常
• Promise?異常
• Iframe?異常
• 跨域 Script error
• 崩潰和卡頓

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

三、Try-Catch 的誤區

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

1. 同步運行時錯誤：

try {
  let name = 'jartto';
  console.log(nam);
} catch(e) {
  console.log('捕獲到異常：',e);
}

輸出：

捕獲到異常： ReferenceError: nam is not defined
    at <anonymous>:3:15

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

try {
  let name = 'jartto;
  console.log(nam);
} catch(e) {

  console.log('捕獲到異常：',e);
}

輸出：

Uncaught SyntaxError: Invalid or unexpected token

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

3. 異步錯誤

try {
  setTimeout(() => {
    undefined.map(v => v);
  }, 1000)
} catch(e) {
  console.log('捕獲到異常：',e);
}

我們看看日志：

Uncaught TypeError: Cannot read property 'map' of undefined
    at setTimeout (<anonymous>:3:11)

并沒有捕獲到異常，這是需要我們特別注意的地方。

四、window.onerror 不是萬能的

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

/**
* @param {String}  message    錯誤信息
* @param {String}  source    出錯文件
* @param {Number}  lineno    行號
* @param {Number}  colno    列號
* @param {Object}  error  Error對象（對象）
*/

window.onerror = function(message, source, lineno, colno, error) {
   console.log('捕獲到異常：',{message, source, lineno, colno, error});
}

1. 首先試試同步運行時錯誤

window.onerror = function(message, source, lineno, colno, error) {
// message：錯誤信息（字符串）。
// source：發生錯誤的腳本URL（字符串）
// lineno：發生錯誤的行號（數字）
// colno：發生錯誤的列號（數字）
// error：Error對象（對象）
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
Jartto;

可以看到，我們捕獲到了異常：

2. 再試試語法錯誤呢？

window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
let name = 'Jartto

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

Uncaught SyntaxError: Invalid or unexpected token

什么，竟然沒有捕獲到語法錯誤？

3. 懷著忐忑的心，我們最后來試試異步運行時錯誤：

window.onerror = function(message, source, lineno, colno, error) {
    console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
setTimeout(() => {
    Jartto;
});

控制臺輸出了：