如何从Webpack生成的Sourcemap中获取真实错误堆栈信息？

完全可行，Sourcemap的核心设计目的就是将Webpack压缩混淆后的生产代码映射回原始源码，只要你持有对应版本的Sourcemap文件，结合错误的行号、列号信息，就能还原出完整的原始错误堆栈。

具体实现方式有两种：

1. 本地手动还原 #

你可以借助工具或自己编写脚本完成映射：

• 使用source-map-cli工具：先通过npm全局安装，之后执行命令就能直接解析指定位置的原始代码信息：

  source-map resolve <生产脚本文件路径/URL> <错误行号> <错误列号> --sourcemap <Sourcemap文件路径/URL>
  

• 手动编写Node.js脚本：利用Node官方的source-map模块，加载Sourcemap文件后，通过SourceMapConsumer的originalPositionFor方法逐个解析堆栈中的每一行位置，最终拼接出完整的原始堆栈。

2. 集成到错误监控系统 #

如果是长期的生产环境错误排查，建议直接对接错误监控平台。这类平台会自动处理Sourcemap的匹配和堆栈还原：

• 构建生产代码时，将生成的Sourcemap文件上传到监控平台（不要直接暴露到公网，防止源码泄露）；
• 当平台捕获到生产环境的错误时，会自动匹配对应版本的Sourcemap，把压缩后的行号、列号转换成原始源码的文件名、行号、列号，直接展示完整的原始错误堆栈。

关键注意事项 #

• 必须保证Sourcemap文件和生产环境的脚本版本严格对应，每一次Webpack构建生成的Sourcemap都属于特定版本的代码，混用会导致映射结果完全错误；
• 生产环境切勿将Sourcemap文件放在可公开访问的路径下，避免源码泄露，仅在内部排查或监控平台中使用。

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