JS `Error.cause` (ES2022)：错误链追踪与调试 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女们，早上好/下午好/晚上好！今天咱们来聊点刺激的，关于 JavaScript 中 Error.cause 这个磨人的小妖精，哦不，是 ES2022 引入的错误链追踪神器。

前戏：错误处理的老梗

在没有 Error.cause 的日子里，JavaScript 的错误处理就像盲人摸象，你只能摸到最外层的那层皮，不知道错误发生的真正原因，只能靠猜、靠日志、靠debug大佬的经验。

function doSomethingRisky() {
  try {
    JSON.parse('invalid json');
  } catch (error) {
    throw new Error('Failed to process data'); // 丢失了原始错误信息
  }
}

try {
  doSomethingRisky();
} catch (error) {
  console.error(error.message); // "Failed to process data"
  // 原始的 JSON 解析错误信息没了！
}

这段代码的问题在于，我们只看到了 "Failed to process data" 这个错误信息，却不知道是因为 JSON 解析失败导致的。原始的 JSON.parse 抛出的错误信息被无情地吞噬了。

正餐：Error.cause 的闪亮登场

ES2022 给我们带来了 Error.cause，它可以把原始错误像俄罗斯套娃一样嵌套到新的错误里，保留完整的错误链条。

function doSomethingRisky() {
  try {
    JSON.parse('invalid json');
  } catch (error) {
    throw new Error('Failed to process data', { cause: error }); // 传递原始错误
  }
}

try {
  doSomethingRisky();
} catch (error) {
  console.error(error.message); // "Failed to process data"
  console.error(error.cause);   // "SyntaxError: Unexpected token i in JSON at position 0"
}

现在，我们不仅看到了 "Failed to process data"，还能通过 error.cause 访问到原始的 SyntaxError，这简直是 debug 的福音！

Error.cause 的正确食用方式

构建错误时传递 cause:

在创建新的 Error 对象时，使用可选的 options 参数，将 cause 设置为原始错误。
```
throw new Error('Something went wrong', { cause: originalError });
```

访问 cause 属性:

通过 error.cause 属性访问原始错误。如果 cause 不存在，则返回 undefined。

try {
  // ...
} catch (error) {
  if (error.cause) {
    console.error('Original error:', error.cause);
  }
}

错误链的深度遍历:

如果错误链很长，你可以递归地遍历 cause 属性，直到找到最原始的错误。

function printErrorChain(error) {
  console.error(error.message);
  if (error.cause) {
    console.error('Caused by:');
    printErrorChain(error.cause);
  }
}

try {
  // ...
} catch (error) {
  printErrorChain(error);
}

Error.cause 的实际应用场景

API 请求错误处理:

当 API 请求失败时，你可以将 fetch 或 XMLHttpRequest 抛出的原始错误（例如网络错误、HTTP 状态码错误）作为 cause 传递给自定义错误。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`, { cause: new Error(`HTTP ${response.status} - ${response.statusText}`) });
    }
    return await response.json();
  } catch (error) {
    throw new Error(`Failed to fetch data from ${url}`, { cause: error });
  }
}

async function processData() {
  try {
    const data = await fetchData('https://example.com/api/data');
    // ...
  } catch (error) {
    console.error("Error processing data:", error.message);
    if (error.cause) {
      console.error("Original error:", error.cause.message);
    }
  }
}

processData();

数据库操作错误处理:

在数据库操作中，你可以将数据库驱动程序抛出的原始错误作为 cause 传递给自定义错误。

async function queryDatabase(query) {
  try {
    const result = await db.query(query);
    return result;
  } catch (error) {
    throw new Error(`Failed to execute query: ${query}`, { cause: error });
  }
}

async function updateUserData(userId, data) {
  try {
    await queryDatabase(`UPDATE users SET ... WHERE id = ${userId}`);
  } catch (error) {
    console.error("Failed to update user data:", error.message);
    if (error.cause) {
      console.error("Database error:", error.cause.message);
    }
  }
}

模块之间的错误传递:

当一个模块调用另一个模块时，可以将被调用模块抛出的错误作为 cause 传递给调用模块的错误。

// moduleA.js
import { doSomethingRisky } from './moduleB.js';

async function processData() {
  try {
    await doSomethingRisky();
  } catch (error) {
    throw new Error('Failed to process data in moduleA', { cause: error });
  }
}

// moduleB.js
export async function doSomethingRisky() {
  try {
    JSON.parse('invalid json');
  } catch (error) {
    throw new Error('Failed to parse JSON in moduleB', { cause: error });
  }
}

Error.cause 的优势

清晰的错误链: Error.cause 让你能够追踪错误的根源，而不仅仅是表面的错误信息。
更好的调试体验: 更容易定位 bug，节省调试时间。
更健壮的代码: 可以根据不同的错误原因采取不同的处理策略。

Error.cause 的兼容性

Error.cause 是 ES2022 的新特性，一些老旧的浏览器和 Node.js 版本可能不支持。不过，你可以使用 polyfill 来提供兼容性。

// Polyfill for Error.cause
if (!('cause' in Error.prototype)) {
  Object.defineProperty(Error.prototype, 'cause', {
    get() {
      return this._cause;
    },
    set(value) {
      this._cause = value;
    },
  });

  // Override the Error constructor to support the cause option
  const OriginalError = Error;
  Error = function Error(message, options) {
    const error = new OriginalError(message);
    if (options && options.cause) {
      error.cause = options.cause;
    }
    return error;
  };
  Error.prototype = OriginalError.prototype;
  Error.prototype.constructor = Error;

  // Copy static properties from the original Error constructor
  for (const prop in OriginalError) {
    if (OriginalError.hasOwnProperty(prop)) {
      Error[prop] = OriginalError[prop];
    }
  }
}

// Now you can use Error.cause even in older environments
try {
  throw new Error("Outer error", { cause: new Error("Inner error") });
} catch (e) {
  console.log(e.message);       // Outer error
  console.log(e.cause.message); // Inner error
}

这个polyfill会模拟 Error.cause 的行为，让你在不支持 ES2022 的环境中也能使用它。但是要注意，polyfill可能会带来一些性能开销，所以在生产环境中要谨慎使用。

一些需要注意的点

不要滥用 Error.cause: 只在真正需要保留原始错误信息的情况下才使用 Error.cause。过度使用会导致错误链过于复杂，难以理解。
cause 可以是任何值: 虽然 cause 通常是一个 Error 对象，但它实际上可以是任何 JavaScript 值。不过，为了保持代码的可读性和一致性，建议始终使用 Error 对象作为 cause。
循环引用: 避免在错误链中创建循环引用，例如 error1.cause = error2; error2.cause = error1;。这会导致无限循环。

Error.cause 的最佳实践

标准化错误处理: 在你的项目中建立一套标准的错误处理机制，包括如何创建错误、如何传递 cause、如何记录错误等。

使用自定义错误类: 创建自定义错误类，继承自 Error，可以更好地组织和管理你的错误。

class CustomError extends Error {
  constructor(message, options) {
    super(message, options);
    this.name = this.constructor.name; // 设置错误名称
    if (options && options.cause) {
      this.cause = options.cause;
    }
  }
}

try {
  // ...
} catch (error) {
  throw new CustomError('Something went wrong', { cause: error });
}

使用错误追踪工具: 结合错误追踪工具（例如 Sentry、Bugsnag）可以更好地监控和分析你的应用程序中的错误。

表格总结

特性	描述	优点	缺点
`Error.cause`	允许将原始错误作为 `cause` 传递给新的 `Error` 对象，形成错误链。	追踪错误的根源，改善调试体验，提高代码的健壮性。	可能导致错误链过于复杂，需要 polyfill 来提供兼容性，可能存在循环引用的风险。
Polyfill	为不支持 `Error.cause` 的环境提供兼容性。	允许在老旧环境中使用 `Error.cause`。	可能会带来一些性能开销，需要谨慎使用。
自定义错误类	创建继承自 `Error` 的自定义错误类。	更好地组织和管理错误，提高代码的可读性和可维护性。	需要额外的代码来实现。
错误追踪工具	监控和分析应用程序中的错误。	实时监控错误，提供详细的错误报告，帮助定位问题。	需要付费订阅。

最后的彩蛋：一个更复杂的例子

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) {
      throw new Error(`Failed to fetch user data: ${response.status}`, { cause: new Error(`HTTP ${response.status} - ${response.statusText}`) });
    }
    return await response.json();
  } catch (error) {
    throw new Error(`Network error while fetching user data`, { cause: error });
  }
}

async function validateUserData(userData) {
  try {
    if (!userData.name) {
      throw new Error('User name is required');
    }
    if (!userData.email) {
      throw new Error('User email is required');
    }
    if (!userData.email.includes('@')) {
      throw new Error('Invalid email format');
    }
  } catch (error) {
    throw new Error('Failed to validate user data', { cause: error });
  }
}

async function processUser(userId) {
  try {
    const userData = await fetchUserData(userId);
    await validateUserData(userData);
    console.log('User data processed successfully:', userData);
  } catch (error) {
    console.error('Error processing user:', error.message);
    if (error.cause) {
      console.error('Cause:', error.cause.message);
      if (error.cause.cause) {
        console.error('Original Cause:', error.cause.cause.message);
      }
    }
  }
}

processUser(123); // 假设用户ID为123

这个例子展示了 Error.cause 在一个更真实的场景中的应用，包括 API 请求、数据验证和错误处理。你可以根据这个例子来学习如何在你的项目中应用 Error.cause。

好了，今天的讲座就到这里。希望 Error.cause 能够帮助你成为更优秀的 JavaScript 开发者，摆脱 debug 地狱！记住，代码虐我千百遍，我待代码如初恋！下次再见！

发表回复 取消回复

发表回复取消回复