source map 是记录压缩代码与源码位置映射的 json 文件，包含 sources、names 和 mappings 等字段。构建时需通过 webpack 或 vite 配置生成 map 文件并妥善部署。前端通过 onerror 和 unhandledrejection 捕获错误，上报脚本地址、行列号等信息。服务端根据版本定位对应 source map，利用 source-map 库解析原始文件位置，实现错误精准还原，提升排查效率。关键在于构建输出、上报完整信息与服务端正确解析。
线上 JavaScript 错误监控中，压缩后的代码让堆栈信息难以阅读。通过 Source Map 可将混淆的错误位置还原到原始源码位置，极大提升排查效率。关键在于构建时生成 Source Map，并在错误上报后服务端解析映射关系。
Source Map 是什么
Source Map 是一个 JSON 文件，记录了压缩代码与原始源码之间的位置映射。包含字段如 sources（源文件路径）、names（变量/函数原始名称）、mappings（Base64-VLQ 编码的位置映射）。浏览器报错时返回的是压缩文件的行列号，通过 Source Map 可反查对应原始文件的准确位置。
构建阶段生成 Source Map
使用 Webpack、Vite 等工具时，需开启 Source Map 输出：
- Webpack：配置 devtool: 'source-map'，生产环境建议用 'hidden-source-map' 避免暴露给客户端
- Vite：在 vite.config.js 中设置 build.sourcemap: true
- 输出的 map 文件应保留并部署到服务器，与 JS 文件同目录或集中存储便于管理
前端错误捕获与上报
通过全局事件监听收集错误：
立即学习“Java免费学习笔记（深入）”；
- 监听 window.onerror 捕获运行时错误
- 使用 window.addEventListener('unhandledrejection') 处理未捕获的 Promise 异常
- 上报数据包括：错误消息、scriptURI（出错脚本地址）、lineNumber、columnNumber
注意：跨域脚本需配置 CORS 或使用 <script crossorigin></script> 才能获取详细堆栈。
服务端解析 Source Map
收到错误上报后，服务端下载对应版本的 Source Map 文件，使用工具解析映射：
- Node.js 可使用 source-map 库的 SourceMapConsumer
- 调用 originalPositionFor({ line, column }) 获取原始文件名、行号、列号及变量名
- 结合版本号或构建哈希定位正确的 map 文件，避免版本错乱
例如压缩代码第 1 行第 520 列的错误，可能对应原始文件 utils.js 第 45 行的某个函数调用。
基本上就这些。只要构建流程支持、上报信息完整、服务端能正确解析，Source Map 还原就能显著提升线上问题定位速度。关键是把 map 文件管理好，别丢了也别暴露给用户。不复杂但容易忽略细节。
