處理JavaScript異常的正確姿式

譯者按： 錯誤是沒法避免的，妥善處理它纔是最重要的！

• 原文: A Guide to Proper Error Handling in JavaScript Related Topics:
• 譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。

若是你相信墨菲定律的話，任何事情若是會出問題，那麼就必定會出問題。對於代碼，即便咱們有100%的自信沒有問題，依然有可能出問題。在這篇文章，咱們來研究如何處理JavaScript的錯誤。我會先介紹壞的處理方式、好的處理方式，最終介紹異步代碼和Ajax。

我的感受，事件驅動的編程設計使得JavaScript語言很是的豐富靈活。咱們設想瀏覽器就是事件驅動機器，錯誤一樣由它的驅動產生。當一個錯誤觸發，致使某個事件被拋出。從理論上說，錯誤在JavaScript中就是事件。

若是你對此感到陌生，那麼暫且無論它。在這篇文章中，我主要關注瀏覽器端的JavaScript。

這篇文章基於JavaScript中的錯誤處理部分的概念。若是你還不熟悉，我建議你先閱讀一下。

Demo演示

咱們使用的Demo能夠在GitHub下載，程序運行起來會呈現以下頁面：

全部的按鈕都會觸發錯誤，拋出TypeError。下面是該模塊的定義：

// scripts/error.js

function error() {
  var foo = {};
  return foo.bar();
}
複製代碼

在error()中定義了一個空對象foo，所以調用foo.bar()會由於未被定義而報錯。咱們使用單元測試來驗證一下：

// tests/scripts/errorTest.js

it('throws a TypeError', function () {
  should.throws(error, TypeError);
});
複製代碼

咱們使用了Mocha配合Should.js作單元測試。

當你克隆了代碼庫並安裝了依賴包之後，你能夠使用npm t來執行測試。固然，你也能夠執行某個測試文件，好比：./node_modules/mocha/bin/mocha tests/scripts/errorTest.js

相信我，像JavaScript這樣的動態語言來講，無論誰都很容易遇到這樣的錯誤。

壞的處理方式

我已經將按鈕對應的處理事件函數抽象得簡單一點，以下所示：

// scripts/badHandler.js

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
}
複製代碼

badHandler接收一個fn做爲回調函數，該回調函數在badHandler中被調用。咱們編寫相應的單元測試：

// tests/scripts/badHandlerTest.js

it('returns a value without errors', function() {
  var fn = function() {
    return 1;
  };

  var result = badHandler(fn);

  result.should.equal(1);
});

it('returns a null with errors', function() {
  var fn = function() {
    throw new Error('random error');
  };

  var result = badHandler(fn);

  should(result).equal(null);
});
複製代碼

你會發現，若是出現異常，badHandler只是簡單的返回null。若是配合完整的代碼，你會發現問題所在：

// scripts/badHandlerDom.js

(function (handler, bomb) {
  var badButton = document.getElementById('bad');

  if (badButton) {
    badButton.addEventListener('click', function () {
      handler(bomb);
      console.log('Imagine, getting promoted for hiding mistakes');
    });
  }
}(badHandler, error));
複製代碼

若是出錯的時候將其try-catch，而後僅僅返回null，我根本找不到哪裏出錯了。這種安靜失敗(fail-silent)策略可能致使UI紊亂也可能致使數據錯亂，而且在Debug的時候可能花了幾個小時卻忽略了try-catch裏面的代碼纔是致禍根源。若是代碼複雜到有多層次的調用，簡直不可能找到哪裏出了錯。所以，咱們不建議使用安靜失敗策略，咱們須要更加優雅的方式。

不壞但很爛的方式

// scripts/uglyHandler.js

function uglyHandler(fn) {
  try {
    return fn();
  } catch (e) {
    throw new Error('a new error');
  }
}
複製代碼

它處理錯誤的方式是抓到錯誤e，而後拋出一個新的錯誤。這樣作的確優於以前安靜失敗的策略。若是出了錯，我能夠一層層找回去，直到找到本來拋出的錯誤e。簡單的拋出一個Error('a new error')信息量比較有限，不精確，咱們來自定義錯誤對象，傳出更多信息：

// scripts/specifiedError.js

// Create a custom error
var SpecifiedError = function SpecifiedError(message) {
  this.name = 'SpecifiedError';
  this.message = message || '';
  this.stack = (new Error()).stack;
};

SpecifiedError.prototype = new Error();
SpecifiedError.prototype.constructor = SpecifiedError;

// scripts/uglyHandlerImproved.js

function uglyHandlerImproved(fn) {
  try {
    return fn();
  } catch (e) {
    throw new SpecifiedError(e.message);
  }
}

// tests/scripts/uglyHandlerImprovedTest.js

it('returns a specified error with errors', function () {
  var fn = function () {
    throw new TypeError('type error');
  };

  should.throws(function () {
    uglyHandlerImproved(fn);
  }, SpecifiedError);
});
複製代碼

如今，這個自定義的錯誤對象包含了本來錯誤的信息，所以變得更加有用。可是由於再度拋出來，依然是未處理的錯誤。

截獲異常

一個思路是對全部的函數用try...catch包圍起來：

function main(bomb) {
  try {
    bomb();
  } catch (e) {
    // Handle all the error things
  }
}
複製代碼

可是，這樣的代碼將會變得很是臃腫、不可讀，並且效率低下。是否還記得？在本文開始咱們有提到在JavaScript中異常不過也是一個事件而已，幸運的是，有一個全局的異常事件處理方法(onerror)。

// scripts/errorHandlerDom.js

window.addEventListener('error', function (e) {
  var error = e.error;
  console.log(error);
});
複製代碼

獲取堆棧信息

你能夠將錯誤信息發送到服務器：

// scripts/errorAjaxHandlerDom.js

window.addEventListener('error', function (e) {
  var stack = e.error.stack;
  var message = e.error.toString();

  if (stack) {
    message += '\n' + stack;
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/log', true);
  // Fire an Ajax request with error details
  xhr.send(message);
});
複製代碼

爲了獲取更詳細的報錯信息，而且省去處理數據的麻煩，你也能夠使用fundebug的JavaScript監控插件三分鐘快速接入bug監控服務。

下面是服務器接收到的報錯消息：

若是你的腳本是放在另外一個域名下，若是你不開啓CORS，除了Script error.，你將看不到任何有用的報錯信息。若是想知道具體解法，請參考：Script error.全面解析。

異步錯誤處理

因爲setTimeout異步執行，下面的代碼異常將不會被try...catch捕獲：

// scripts/asyncHandler.js

function asyncHandler(fn) {
  try {
    // This rips the potential bomb from the current context
    setTimeout(function () {
      fn();
    }, 1);
  } catch (e) { }
}
複製代碼

try...catch語句只會捕獲當前執行環境下的異常。可是在上面異常拋出的時候，JavaScript解釋器已經不在try...catch中了，所以沒法被捕獲。全部的Ajax請求也是這樣。

咱們能夠稍微改進一下，將try...catch寫到異步函數的回調中：

setTimeout(function () {
  try {
    fn();
  } catch (e) {
    // Handle this async error
  }
}, 1);
複製代碼

不過，這樣的套路會致使項目中充滿了try...catch，代碼很是不簡潔。而且，執行JavaScript的V8引擎不鼓勵在函數中使用try...catch。好在，咱們不須要這麼作，全局的錯誤處理onerror會捕獲這些錯誤。

結論

個人建議是不要隱藏錯誤，勇敢地拋出來。沒有人會由於代碼出現bug致使程序崩潰而羞恥，咱們可讓程序中斷，讓用戶重來。錯誤是沒法避免的，如何去處理它纔是最重要的。

版權聲明:
轉載時請註明做者Fundebug以及本文地址：
blog.fundebug.com/2017/11/27/…