如何从浏览器中的JavaScript Error对象获取源映射堆栈？

浏览器DevTools中console.log(err)显示的映射后堆栈是DevTools内部自动解析Source Map生成的，但err.stack属性返回的是基于编译后代码的原始堆栈字符串。要获取映射后的堆栈，有两种可行方案：

方案一：利用DevTools内置能力（仅限控制台/扩展场景） #

如果你只是在DevTools控制台中需要获取映射后的堆栈，可以直接右键点击控制台中输出的错误信息，选择「复制已解析的堆栈」选项。

如果需要在代码中通过DevTools API获取（仅适用于DevTools扩展开发），可以使用Chromium系浏览器的chrome.devtools.inspectedWindow.eval()方法，该方法执行的代码会自动应用Source Map映射，你可以通过它捕获处理后的堆栈。

方案二：手动解析Source Map（页面代码中可用） #

如果需要在页面脚本中自行处理堆栈映射，可以借助source-map库完成，步骤如下：

1. 安装并引入source-map库（可通过npm安装后打包到项目中）
2. 加载对应编译产物的Source Map文件（可从编译文件末尾的sourceMappingURL注释中提取地址，再通过fetch请求加载）
3. 拆分err.stack字符串，提取每一行的文件路径、行号和列号
4. 使用Source Map解析器将编译后位置映射到原始代码位置

示例代码：

import { SourceMapConsumer } from 'source-map';

async function getMappedStackTrace(error) {
  // 1. 加载Source Map文件
  const bundleUrl = '/path/to/your/bundle.js';
  const sourceMapUrl = `${bundleUrl}.map`;
  const sourceMapRes = await fetch(sourceMapUrl);
  const sourceMapData = await sourceMapRes.json();

  // 2. 解析原始堆栈行
  const stackLines = error.stack.split('\n').filter(line => line.trim().startsWith('at '));
  
  // 3. 初始化Source Map解析器
  const consumer = await new SourceMapConsumer(sourceMapData);
  
  // 4. 逐行映射位置
  const mappedLines = await Promise.all(stackLines.map(line => {
    // 匹配编译后的文件、行号、列号（正则需根据浏览器堆栈格式调整）
    const match = line.match(/at .+ \((.+):(\d+):(\d+)\)/);
    if (!match) return line;
    
    const [, compiledFile, compiledLine, compiledCol] = match;
    // 跳过无关文件（如浏览器内置代码）
    if (!compiledFile.includes(bundleUrl.split('/').pop())) return line;
    
    // 映射到原始代码位置
    const originalPos = consumer.originalPositionFor({
      line: parseInt(compiledLine, 10),
      column: parseInt(compiledCol, 10)
    });
    
    // 替换为原始位置信息
    if (originalPos.source && originalPos.line) {
      return line.replace(
        `${compiledFile}:${compiledLine}:${compiledCol}`,
        `${originalPos.source}:${originalPos.line}:${originalPos.column || 1}`
      );
    }
    return line;
  }));
  
  consumer.destroy();
  return mappedLines.join('\n');
}

// 使用示例
const err = new Error("test-error");
getMappedStackTrace(err).then(mappedStack => {
  console.log(mappedStack);
});

注意事项 #

• 不同浏览器的err.stack格式存在差异，需要调整正则表达式以匹配对应格式
• 生产环境中需确保Source Map文件可被页面访问，或考虑内联Source Map以避免额外请求
• 部分构建工具（如Webpack）提供了错误处理插件，可简化堆栈映射逻辑

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