如何利用Source Map获取可解析源码路径的Stack Trace字符串？

为了尽可能获取错误信息，我希望捕获堆栈跟踪（Stack Trace），既在浏览器控制台显示，也发送至外部日志服务。
使用console.error(myError)时，浏览器能正确解析Source Map文件，堆栈跟踪会显示相关的源码文件名。
但当我尝试通过(new Error()).stack将堆栈跟踪转为字符串时，得到的文件名并不对应源码：

My Error
at applicationError (http://localhost:3000/static/js/main.chunk.js:29259:
at http://localhost:3000/static/js/main.chunk.js:1624:
at onError (http://localhost:3000/static/js/0.chunk.js:82415:3)
at apiCall (http://localhost:3000/static/js/0.chunk.js:82449:12)
at async http://localhost:3000/static/js/main.chunk.js:26165:21
at async App.componentWillMount (http://localhost:3000/static/js/main.chunk.js:246:5)

我该如何获取可解析的堆栈跟踪，以便将相关信息发送给日志服务？

方法1：手动借助source-map库解析 #

浏览器原生的Error.stack不会自动解析Source Map，需要借助官方的source-map库完成转换，步骤如下：

1. 安装依赖：

npm install source-map

2. 编写解析逻辑（建议在服务端执行，避免前端暴露源码）：

const { SourceMapConsumer } = require('source-map');
const fetch = require('node-fetch'); // 服务端环境需要

async function parseStackTrace(stackTrace, sourceMapUrl) {
  // 加载对应的source map文件
  const response = await fetch(sourceMapUrl);
  const sourceMapData = await response.json();
  const consumer = await new SourceMapConsumer(sourceMapData);

  // 拆分堆栈行并逐行解析
  const parsedStack = stackTrace.split('\n').map(line => {
    // 匹配堆栈行中的文件路径、行号、列号
    const match = line.match(/at .+ \((.+):(\d+):(\d+)\)/);
    if (!match) return line;

    const [, minifiedUrl, lineNum, colNum] = match;
    // 查找对应的源码位置
    const originalPos = consumer.originalPositionFor({
      line: parseInt(lineNum),
      column: parseInt(colNum)
    });

    if (originalPos.source) {
      // 替换为源码路径和位置
      return line.replace(
        /\((.+):(\d+):(\d+)\)/,
        `(${originalPos.source}:${originalPos.line}:${originalPos.column})`
      );
    }
    return line;
  }).join('\n');

  consumer.destroy();
  return parsedStack;
}

使用时，将前端捕获的压缩堆栈和对应的source map文件路径传入该函数，即可得到解析后的源码堆栈。

方法2：使用成熟的错误监控工具 #

直接集成专业错误监控服务，它们会自动处理Source Map的上传与解析，不仅能将压缩后的堆栈转换为源码位置，还提供错误聚合、实时告警、用户行为关联等功能，无需手动实现解析逻辑。

方法3：开发环境临时方案（不推荐生产用） #

开发环境下，可以利用浏览器DevTools的特性，通过console.error输出后，手动复制已经解析好的堆栈，但这仅适用于本地调试，无法自动化发送到日志服务。

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