如何捕获并定位JavaScript函数抛出的错误及堆栈信息？

问题场景 #

我有多个第三方定义的函数，它们可能抛出任意类型的错误（不一定是Error实例）。使用try/catch配合console.error捕获错误时，点击控制台的VMxxx:xx无法定位到真正抛出错误的throw语句；但直接调用函数时，却能正常定位到错误源。

示例代码 #

// 第三方定义的函数集合，可能抛出错误
var fns = [
  () => 1,
  () => 2,
  () => {
    throw new Error('3');
  },
  () => 3,
  () => {
    throw 5
  }, // 无法保证抛出的是Error实例
];

// 当前的错误捕获逻辑
fns.forEach(fn => {
  try {
    fn();
  } catch (error) {
    console.error(error);
  }
});

现象对比 #

• 捕获时的错误输出（无法定位到原throw位置）：

VM531:14  Error: 3
    at fns (<anonymous>:5:17)
    at <anonymous>:12:5
    at Array.forEach (<anonymous>)
    at <anonymous>:10:5
(anonymous) @ VM531:14
(anonymous) @ VM531:10
VM531:14  5
(anonymous) @ VM531:14
(anonymous) @ VM531:10
undefined

• 直接调用时的错误输出（可正常定位）：

fns[2]()
VM531:5 Uncaught Error: 3
    at Array.fns (<anonymous>:5:17)
    at <anonymous>:1:7

尝试过替换console.error为console.trace，但没有效果。

解决方法 #

1. 统一包装为Error实例 #

对于非Error类型的错误，将其包装成Error对象，确保浏览器能识别并解析堆栈信息：

fns.forEach(fn => {
  try {
    fn();
  } catch (error) {
    // 包装非Error错误，保留原始信息
    const errorToLog = error instanceof Error 
      ? error 
      : new Error(`Non-Error thrown: ${error}`);
    console.error(errorToLog);
  }
});

2. 直接传递Error实例给console.error #

不要将错误转为字符串输出，必须直接传递Error对象给console.error，这样控制台才能识别堆栈并提供可跳转的行号链接。

3. 优化非Error错误的堆栈追踪 #

如果需要更完整的堆栈，可在包装时保留原始错误，并生成当前上下文的堆栈：

fns.forEach(fn => {
  try {
    fn();
  } catch (error) {
    if (!(error instanceof Error)) {
      const wrappedErr = new Error(`Thrown value: ${error}`);
      wrappedErr.originalError = error;
      // 可选：优化堆栈显示格式
      wrappedErr.stack = wrappedErr.stack?.replace(/^Error:\s+/, `${wrappedErr.message}\n`);
      console.error(wrappedErr);
    } else {
      console.error(error);
    }
  }
});

4. 检查控制台设置 #

确保浏览器控制台的**"折叠堆栈跟踪"**选项处于关闭状态，这样可以看到完整的堆栈信息，避免关键调用栈被隐藏。

内容的提问来源于stack exchange，提问作者xialvjun