标准答案

  1. 生产构建会压缩、混淆和合并代码,浏览器错误栈通常只指向构建产物的文件名、行号和列号。
  2. Source map 记录构建产物位置到源码位置的映射关系,是还原源码栈的基础。
  3. 错误监控平台需要知道本次构建的 release、dist 或 commit,并接收到同版本的 source map。
  4. 构建后通常把 source map 上传到监控平台或内部符号服务,而不是直接公开在 CDN 上。
  5. 如果 release 不一致、资源 URL 不匹配、map 没上传或被公开路径改写,源码还原就会失败。

题目解析

线上错误栈只看到 app.8f3a1c.js:1:234567 时,很难判断是哪一行源码出错。Source map 的作用就是把这个压缩产物位置映射回原始文件、行号和列号。

还原能否成功,关键不是“有没有生成 map”这么简单,而是构建版本和错误上报版本必须一致。监控 SDK 上报的 release,要和上传 source map 时的 release 对上,资源 URL 前缀也要能匹配。

生产环境通常不建议把完整 source map 公开给所有用户下载。更稳的方式是构建生成 map,发布流程上传到 Sentry 类平台,然后阻止公开访问或不把 map 部署到公开 CDN。

代码示例

关键链路是构建、上传 source map、初始化 SDK 时使用同一个 release。

Text
build:
  generate app.8f3a1c.js and app.8f3a1c.js.map

upload:
  release = web@2026-07-08-001
  sourcemaps = dist/assets/*.map

runtime:
  monitoring.init({ release: 'web@2026-07-08-001' })

常见误区

  • 只生成 source map,没有上传到监控平台或没有和 release 绑定。
  • 发布后改写了 CDN 路径,导致错误栈里的文件 URL 和 source map 里的路径对不上。
  • 把完整 source map 公开部署到 CDN,带来源码泄露风险。

作者信息