JavaScript 错误监控：Source Map 还原线上错误

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免费学习笔记（深入）”；

Logomaster.ai

Logo在线生成工具

99

查看详情

• 监听 window.onerror 捕获运行时错误
• 使用 window.addEventListener('unhandledrejection') 处理未捕获的 Promise 异常
• 上报数据包括：错误消息、scriptURI（出错脚本地址）、lineNumber、columnNumber

注意：跨域脚本需配置 CORS 或使用 <script crossorigin> 才能获取详细堆栈。

服务端解析 Source Map

收到错误上报后，服务端下载对应版本的 Source Map 文件，使用工具解析映射：

• Node.js 可使用 source-map 库的 SourceMapConsumer
• 调用 originalPositionFor({ line, column }) 获取原始文件名、行号、列号及变量名
• 结合版本号或构建哈希定位正确的 map 文件，避免版本错乱

例如压缩代码第 1 行第 520 列的错误，可能对应原始文件 utils.js 第 45 行的某个函数调用。

基本上就这些。只要构建流程支持、上报信息完整、服务端能正确解析，Source Map 还原就能显著提升线上问题定位速度。关键是把 map 文件管理好，别丢了也别暴露给用户。不复杂但容易忽略细节。

以上就是JavaScript 错误监控：Source Map 还原线上错误的详细内容，更多请关注php中文网其它相关文章！