JavaScript 調試中的隱藏寶石：error.cause-js教程-PHP中文網

JavaScript 調試中的隱藏寶石：error.cause

DDD

發布： 2025-01-12 16:45:47

原創

728 人瀏覽過

A Hidden Gem in JavaScript Debugging: error.cause

調試的挑戰

調試過程中最大的挑戰是什麼？其中之一無疑是追查錯誤的根源。

想像一下這個場景：

const func = () => {
  doSth('A');
  doSth('B');
};

登入後複製

當func拋出錯誤時，如何判斷錯誤發生在哪一步？是由 doSth('A')、doSth('B') 還是 func 本身引起的？顯然，該錯誤缺乏足夠的上下文。

常見解決方案

解決此問題的常見方法可能如下所示：

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', error);
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', error);
  }
};

登入後複製

透過這種方法，您可以更輕鬆地定位錯誤的根源。然而，這個解決方案有幾個限制：

錯誤詳細資訊遺失:

如果錯誤包含大量資訊（例如有效負載、HTTP 狀態代碼、錯誤代碼），則此方法僅將 doSth 的錯誤訊息新增至新建構的錯誤。其他重要細節（包括原始堆疊追蹤）都會遺失。
日誌可讀性降低：

如果潛在錯誤點超過兩個，日誌可能會變得混亂且難以解釋。
表達意圖不明確:

程式碼沒有明確表明新錯誤是由捕獲的特定 doSth 函數引起的，為提高程式碼可讀性留下了空間。

引入error.cause

為了解決這些問題，ECMAScript 2022 引入了 error.cause。

此功能可讓開發人員在建立新的錯誤物件時指定錯誤的根本原因。透過使用 error.cause，您可以建立錯誤鏈，從而更輕鬆地偵錯和追蹤問題的根本原因。

這是一個簡單的例子：

try {
  // Some operation that may throw an error
} catch (error) {
  throw new Error('Something went wrong', { cause: error });
}

登入後複製

透過這種方法，您可以在錯誤之間建立因果聯繫。例如：

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', { cause: error });
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', { cause: error });
  }
};

登入後複製

這使我們能夠捕獲較低級別函數拋出的錯誤（例如，doSth('A')），拋出一個添加相關上下文的新錯誤（例如，「執行doSth('A') 時發生錯誤” ），並保留原始錯誤詳細資訊（例如，“A 是非法參數。”）。

建立錯誤鏈

error.cause 的另一個優點是它能夠創建連結錯誤鏈，使開發人員能夠透過應用程式的多個層追溯問題：

const func = () => {
  try {
    try {
      try {
        doSth('A');
      } catch (error) {
        throw new Error('Error at depth 3', { cause: error });
      }
    } catch (error) {
      throw new Error('Error at depth 2', { cause: error });
    }
  } catch (error) {
    throw new Error('Error at depth 1', { cause: error });
  }
};

console.log(error.cause.cause); // Error at depth 3

登入後複製

在 Node.js 中，有原因的錯誤會在控制台中進行特殊處理。列印所有相關的錯誤堆疊：

const func = () => {
  doSth('A');
  doSth('B');
};

登入後複製

結論

當您可以立即存取錯誤上下文和詳細資訊時，偵錯變得更加容易。
實現這一目標的有效方法是使用 error.cause 功能採用「catch re throw with context」模式：

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', error);
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', error);
  }
};

登入後複製

這種方法不僅提高了錯誤可追溯性，還增強了程式碼的可讀性和可維護性。