關(guān)鍵要點

• 巧妙運用try…catch語句塊有效管理異常，通過允許錯誤向上冒泡到調(diào)用棧來增強調(diào)試過程，從而更清晰地顯示錯誤。
• 實現(xiàn)全局錯誤處理程序（例如window.onerror事件）來集中和簡化錯誤處理，以便於在應(yīng)用程序的不同部分進行管理和維護。
• 利用瀏覽器記錄詳細錯誤信息（包括調(diào)用棧）的能力來改進錯誤診斷，並更清晰地了解錯誤的來源和上下文。
• 通過在try…catch塊中使用setTimeout或使用適用於所有執(zhí)行上下文的全局錯誤處理程序來解決異步錯誤處理難題，確保有效捕獲和管理異步代碼中的錯誤。
• 通過創(chuàng)建自定義錯誤類型或豐富錯誤消息來增強錯誤信息，從而更容易識別和解決特定問題，並提高JavaScript代碼的整體健壯性。

JavaScript中的錯誤處理，充滿了挑戰(zhàn)。遵循墨菲定律，任何可能出錯的事情都會出錯。本文將探討JavaScript中的錯誤處理，涵蓋陷阱、最佳實踐，並以異步代碼和Ajax為例進行講解。

本文於2017年6月8日更新，以解決讀者反饋。具體來說，已向代碼片段中添加文件名，清理了單元測試，向uglyHandler添加了包裝器模式，並增加了關(guān)於CORS和第三方錯誤處理程序的部分。

我認為JavaScript的事件驅(qū)動範式為該語言增添了豐富性。我喜歡將瀏覽器想像成這臺事件驅(qū)動的機器，錯誤也不例外。當發(fā)生錯誤時，某個時刻會拋出一個事件。理論上，可以說錯誤只是JavaScript中的簡單事件。

如果您覺得這很陌生，請係好安全帶，因為您將經(jīng)歷一段相當精彩的旅程。在本文中，我將只關(guān)注客戶端JavaScript。

本主題基於在《JavaScript中卓越的異常處理》中解釋的概念。如果您不熟悉，我建議您閱讀基礎(chǔ)知識。本文還假設(shè)您具備中等水平的JavaScript知識。如果您想提升水平，為什麼不註冊SitePoint Premium並觀看我們的課程JavaScript：下一步？第一課是免費的。

無論哪種情況，我的目標都是探索超越處理異常的必要條件。閱讀本文後，下次看到一個不錯的try...catch塊時，您會三思而後行。

演示

本文將使用的演示程序可在GitHub上找到，它呈現(xiàn)如下頁面：

所有按鈕在單擊時都會引爆一顆“炸彈”。這顆炸彈模擬了一個作為TypeError拋出的異常。以下是此模塊的定義：

// scripts/error.js

function error() {
  var foo = {};
  return foo.bar();
}

首先，此函數(shù)聲明一個名為foo的空對象。請注意，bar()在任何地方都沒有定義。讓我們用一個好的單元測試來驗證這將引爆一顆炸彈：

// tests/scripts/errorTest.js

it('throws a TypeError', function () {
  should.throws(error, TypeError);
});

此單元測試使用Mocha進行測試斷言，並使用Should.js進行斷言。 Mocha是一個測試運行器，而Should.js是斷言庫。如果您還不熟悉，請隨意探索測試API。測試以it('description')開頭，並在should中以通過/失敗結(jié)束。單元測試在Node上運行，不需要瀏覽器。我建議您注意這些測試，因為它們用純JavaScript證明了關(guān)鍵概念。

克隆存儲庫並安裝依賴項後，您可以使用npm t運行測試。或者，您可以像這樣運行此單個測試：./node_modules/mocha/bin/mocha tests/scripts/errorTest.js。

如所示，error()定義了一個空對象，然後嘗試訪問一個方法。由於bar()不存在於對像中，因此它會拋出一個異常。相信我，對於像JavaScript這樣的動態(tài)語言，這種情況發(fā)生在每個人身上！

糟糕的處理方式

接下來是一些糟糕的錯誤處理。我已經(jīng)將按鈕上的處理程序從實現(xiàn)中抽像出來。以下是處理程序的樣子：

// scripts/badHandler.js

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
}

此處理程序接收一個fn回調(diào)作為參數(shù)。然後，此回調(diào)在處理程序函數(shù)內(nèi)被調(diào)用。單元測試顯示了它的用途：

// 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);
});

如您所見，如果出現(xiàn)問題，此糟糕的錯誤處理程序?qū)⒎祷?code>null。回調(diào)fn()可以指向一個合法的方法或一顆炸彈。

下面的單擊事件處理程序說明了其餘的故事：

// 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));

糟糕的是，我只得到一個null。當我試圖找出哪裡出錯時，這讓我一無所知。這種靜默失敗策略的範圍從糟糕的用戶體驗到數(shù)據(jù)損壞。令人沮喪的是，我可能會花數(shù)小時調(diào)試癥狀，卻忽略了try-catch塊。這個邪惡的處理程序會吞沒代碼中的錯誤，並假裝一切正常。對於那些不重視代碼質(zhì)量的組織來說，這可能是可以接受的。但是，隱藏錯誤會在將來導致您花費數(shù)小時進行調(diào)試。在一個具有深層調(diào)用棧的多層解決方案中，不可能找出出錯的地方。就錯誤處理而言，這非常糟糕。

靜默失敗策略會讓您渴望更好的錯誤處理。 JavaScript提供了一種更優(yōu)雅的處理異常的方法。

(以下內(nèi)容與之前的輸出類似，只是對語言和表達方式進行了細微的調(diào)整，以保持文章大意不變，並避免重複。)

... (其餘部分與之前的輸出類似，只是對語言和表達方式進行了細微的調(diào)整，以保持文章大意不變，並避免重複。) ...

以上是在JavaScript中正確處理正確錯誤的指南的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！