摘要：錯誤處理在開發和調試過程中都顯得尤為重要。跟全局函數有關的錯誤，在之后已經不再出現了內部錯誤。由引擎拋出的錯誤范圍錯誤。事件任何沒有的錯誤都會觸發對象的事件。事件可以接收三個參數錯誤消息錯誤所在的和行號。

錯誤處理在開發和調試過程中都顯得尤為重要。有些沒有進行錯誤處理的應用，直接就將瀏覽器的錯誤展示給了用戶，極大的降低了用戶體驗。比如有些很 low 的網站，打開某些頁面就直接彈出 "object" 這樣的錯誤，用戶看到之后一臉懵逼，心想這是什么鬼？讓人感覺極其的不專業。可見錯誤處理對一個應用來說是多么的重要。

這篇文章主要是給大家科普一些關于錯誤處理的知識，讓大家在腦海中有一個概覽。下一篇文章中我會結合具體的項目以及當前主流的一些框架，比如react, redux，來更深入的介紹如何運用這些框架去封裝一整套錯誤處理的解決方案。

Error 構造對象可以實例化一個 error 對象 (也就是Error 實例)，而 error 對象就是一個包含了錯誤信息的對象。當代碼解析或者運行時發生錯誤，javascript 引擎就會自動產生并拋出一個 error 對象, 然后程序就中斷在發生錯誤的地方。

示例：

const error = new Error("Whoop!");
error.message; // Whoop!
error.name; // Error
error.stack; // "Error: Whoops! at :1:13"

我們常用的 message 和 name 都是 error 的標準屬性，由于各個瀏覽器廠商對 error 進行了不同的擴展，所以在不同的瀏覽器中，error 也有不同的屬性和方法, 非標準屬性中我們常用的是 stack 屬性（很多瀏覽器都擴展了這一屬性), 它用來表示棧跟蹤信息。

除了普通的 Error 構造對象以外， javascript 還實現了其他幾種主要的 error 構造對象¹.

這里順便說一下 encodeURI 和 encodeURIComponent 的區別。已經了解的同學可以忽略這一小部分，繼續往前面看。

encodeURI 是對統一資源標識符 (URI) 全部編碼，而 encodeURIComponent 對統一資源標識符 (URI) 部分編碼。

假設一個 URI 是一個完整的 URI, 那么我們不必對那些在 URI 中保留的并且帶有特殊含義的字符進行編碼。由于 encodeURI 會替換掉所有字符，但是卻不包含一些保留字符，如 "&", "+", "=" 等（這些字符在 GET 和 POST 請求中是特殊字符，需要被編碼），所以 encodeURI 本身無法產生能使用與 HTTP GET 或者 POST 請求的 URI。但是我們可以使用 encodeURIComponent 來對這些字符進行編碼。

encodeURIComponent 轉義除了字母、數字、(、)、.、!、~、*、"、-和_之外的所有字符。
 為了避免服務器收到不可預知的請求，對任何用戶輸入的作為 URI 部分的內容都需要用 encodeURIComponent 進行轉義。

通常使用 throw 語句拋出錯誤，并用 try...catch 進行捕獲。通常會把所有可能會拋出錯誤的代碼都放在 try 語句塊中，而把那些用于錯誤處理的代碼放在 catch 塊中。

throw 過程是阻塞的，程序會中斷在第一個拋出錯誤的地方，所以后面的代碼不會執行。

throw new SyntaxError("this is syntax error"); 
throw 123; // 不執行
throw "hi there"; // 不執行
throw true;  // 不執行

catch 代碼塊捕獲錯誤之后，程序不會中斷，會按照正常流程繼續執行下去。

try {
  throw new Error("Whoops!");
} catch (e) {
  console.log(e.name + ":" + e.message);
}
console.log("hello!");

// Error:Whoops!
// hello!

finally 在 try...catch 中是可選的，但是一旦使用了它，它里面的代碼就一定會被執行，也就是說不管 try 語句塊中的代碼是否正常執行，finnaly 都會被執行。正如下面的代碼, 即使在 try 中資源被阻塞，由于我們在 finnaly 中執行了關閉操作，文件最后還是會被關閉。

openMyFile()
try {
   // 阻塞資源
   writeMyFile(theData);
} finally {
   closeMyFile(); // 始終會關閉資源
}

處理一個特定的錯誤。

    try {
      foo.bar();
    } catch (e) {
      switch (e.name) {
        case "RangeError":
          //do something
          console.log("RangeError: " + e.message);
          break;
        case "ReferenceError":
          //do something
          console.log("ReferenceError: " + e.message);
          break;
        default:
          console.log(e.name + ":" + e.message);
      }
    }

任何沒有 catch 的錯誤都會觸發 window 對象的 error 事件。

error 事件可以接收三個參數：錯誤消息、錯誤所在的 URL 和行號。你可以通過以下兩種方式給 window 綁上 error 事件²。

  // message: 錯誤消息, source: 發生錯誤文件的 URL, lineno: 錯誤行號

  // 方法一
  window.onerror = function(messageOrEvent, source, lineno, colno, error) {
    alert(messageOrEvent, source, lineno, colno, error);
  }
  
  or 
  
  window.onerror = console.log;
  throw new Error("whoops!");
  
  // 方法二 
  window.addEventListener("error", function(errorEvent){
      alert(errorEvent.error);
  });

在實際情況中，error 事件并不常用（但是在某些情況下，如微信端的調試，error 事件還是挺有用的），因為我們還是希望所有的異常都能得到很好的處理，而不是把錯誤交給瀏覽器。但有的時候并不是所有的錯誤都能夠被撲獲，并且某些業務場景會使用到追蹤瀏覽器報錯的工具，這時候可能就需要將瀏覽器的錯誤拋出去，所以在這種情況下也需要去全局監聽 error 事件。

創建一個自定義類 CustomError, 以方便去擴展更多的自定義 Error

CustomError.js

class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = this.constructor.name;
    if (typeof Error.captureStackTrace === "function") {
      // 在瀏覽器領域，除了使用V8引擎的 Chrome，
      // 其它瀏覽器中不存在 Error.captureStackTrace()這一接口,
      // 所以在這里做一個條件判斷。
      Error.captureStackTrace(this, this.constructor); // 返回調用堆棧信息, 用于在 error 對象上添加合理的 stack 屬性。
    } else {
      this.stack = new Error(message).stack;
    }
  }
}

Error.captureStackTrace 是用來在 targetObject 中添加一個 .stack 屬性。對該屬性進行訪問時，將以字符串的形式返回 Error.captureStackTrace() 語句被調用時的代碼位置信息(即：調用棧歷史)。

Error.captureStackTrace(targetObject[, constructorOpt])

除了 targetObject, captureStackTrace 還接受一個類型為 function 的可選參數 constructorOpt，當傳遞該參數時，調用棧中所有 constructorOpt 函數之上的信息(包括 constructorOpt 函數自身)，都會在訪問 targetObject.stack 時被忽略。當需要對終端用戶隱藏內部的技術細節時, constructorOpt 參數會很有用。

通過基類 CustomError，我們可以創建出更多的自定義 Error, 比如下面的 HttpRequestError 和 LoginExpiredError

HttpRequestError.js

class HttpRequestError extends CustomError {
  constructor(message, requestId, code, httpStatusCode) {
    const defaultAPIErrorMessage = () => {
      // 檢查是否有網
      return window.navigator.onLine ? "Something wrong" : "No connection";
    };

    message = message || defaultAPIErrorMessage();
    super(message);

    this.requestId = requestId;
    this.code = code;
    this.httpStatusCode = httpStatusCode;
  }
}

throw new HttpRequestError(null, "requestId", "code", "httpStatusCode");

LoginExpiredError.js

class LoginExpiredError extends CustomError {
  constructor(message) {
    message = message || "Your session has expired!";

    super(message);
  }
}

throw new LoginExpiredError();

當我們創建了各種自定義 Error 之后，我們可以在不同的場景去使用它們了，比如在 http 請求失敗的時候拋出 HttpRequestError，并彈出對話框提示用戶。在用戶登錄過期之后，拋出 LoginExpiredError，彈出對話框，并自動 logout 等等。通過拋出不同的 Error 類型，才能讓我們進行不同的撲獲處理。

  const deffer = Q.deffer();

  if (expired) {
    deffer.reject(new LoginExpiredError()); // 通過 promise 拋出異常
  }

  if (error instanceof LoginExpiredError) { // 撲獲異常
    logout();
  }

關于 Error 的介紹就先講到這里。