线上报错日志里出现 `app.3f7a2b.js:1:48291` 这种堆栈时，你盯着压缩后的单行代码基本看不出问题在哪。很多人第一反应是去本地复现，反复刷新、切换网络、mock 数据，结果半小时过去了连是哪个组件报的错都不确定。sourceMap 就是为这种场景准备的：它把压缩后的行列号映射回原始源码，让 Sentry、Bugsnag 这类工具直接展示出 `UserList.vue` 第 42 行的 `user.name`。但生产环境直接暴露 `.map` 文件又存在源码泄露风险，同时构建产物里带上完整的 sourceMap 会让包体积成倍增长。这篇文章会从 Webpack、Vite 的 sourceMap 配置差异讲起，然后给出一个在 CI 阶段上传 sourceMap 到监控平台、并保证浏览器不加载源码映射的落地做法。

## 为什么开发时正常，线上就定位不到

开发阶段 devtool 通常是 `eval-cheap-module-source-map`，映射粒度到行，且未压缩。生产构建为了体积会关掉 sourceMap 或只生成 `hidden-source-map`。

```js
// webpack.prod.js
module.exports = {
 mode: 'production',
 devtool: 'hidden-source-map',
 // ...
};
```

`hidden-source-map` 会生成 `.map` 文件，但打包产物里不会追加 `//# sourceMappingURL=` 注释。浏览器 DevTools 不知道去哪找映射，也就不会加载源码；但 Sentry 这类工具可以通过上传的 map 文件完成还原。

Vite 的配置名字不同：

```js
// vite.config.js
export default defineConfig({
 build: {
 sourcemap: 'hidden',
 },
});
```

`sourcemap: true` 会生成 map 并保留 `sourceMappingURL` 注释，任何人打开 DevTools 都能看到源码，内网系统无所谓，公网产品不建议。

## 只上传不公开：CI 里的处理方式

构建完成后，产物目录里会有 `assets/index-abc123.js` 和对应的 `.map`。上传到 Sentry 用官方 CLI：

```bash
npx @sentry/cli releases new "$VERSION"
npx @sentry/cli releases files "$VERSION" upload-sourcemaps ./dist \
 --url-prefix '~/static/js' \
 --rewrite
npx @sentry/cli releases finalize "$VERSION"
```

`--url-prefix` 要和线上实际访问路径对齐。比如 Nginx 把静态资源挂在 `/static/js/` 下，而构建产物在 `dist/assets/`，这个前缀填错就会出现 map 上传成功但 Sentry 匹配不上的情况，报错堆栈里仍然是一串乱码。

上传完记得删掉 map 文件再发到 CDN：

```bash
find ./dist -name '*.map' -delete
```

也可以交给 CI 的 artifact 步骤先发布再清理，但顺序不能反。

## 一次真实的排查

去年有个页面在 iOS Safari 上偶发白屏，Sentry 里堆栈指向 `index-8f2c1d.js` 的 `t.render` 里 `undefined is not an object (evaluating 'e.data.list')`。没有 sourceMap 的话只能靠猜。上传 map 后就直接定位到：

```js
// UserProfile.jsx
export default function UserProfile({ user }) {
 return (
 <div>
 {user.profile.data.list.map(item => (
 <Item key={item.id} {...item} />
 ))}
 </div>
 );
}
```

后端接口在部分账号下返回的 `profile` 是 `null`，于是 `user.profile.data` 直接抛错。加上可选链和兜底很快就修了。如果当时没有 sourceMap，这个 case 大概率会拖一两天。

## 保留源码映射的代价

`hidden-source-map` 生成的 map 文件体积通常和 bundle 同量级，甚至更大，因为里面包含 `sourcesContent`，也就是原始源码。构建时间也会增加，尤其是大型项目。

如果真的不想让源码进入 map，可以在配置里去掉 sourcesContent：

```js
// webpack.prod.js
module.exports = {
 devtool: 'hidden-source-map',
 output: {
 devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]?[loaders]',
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 enforce: 'pre',
 use: ['source-map-loader'],
 },
 ],
 },
};
```

去掉 `sourcesContent` 后 Sentry 仍能还原文件名、行号、函数名，只是看不到原始代码片段。排查多数问题够用了。

## 关于 sourceRoot 的一个坑

Monorepo 里包的路径可能是 `../../packages/utils/src/format.ts`。上传到 Sentry 后，它会按相对路径去还原，如果 `sourceRoot` 没配好，就会出现 map 已上传但还原失败。Webpack 里可以用：

```js
output: {
 devtoolModuleFilenameTemplate: info =>
 `webpack://my-app/${info.resourcePath.replace(/^\.\//, '')}`,
}
```

Vite 下配置 `build.sourcemap` 后，Rollup 会自动处理，但跨包引用的路径依然需要检查。上传完可以在 Sentry 的 release 页面里点开某个 artifact，确认文件树里能看到对应的源文件路径，看不到就是路径没对上。

## 别把 devtool 一直开着

有几个项目为了排查方便，生产环境直接把 `devtool: 'source-map'` 打开，`.map` 和 `.js` 一起推到 CDN。任何人在 Chrome 里打开 Sources 面板都能看到完整源码，包括接口地址、内部注释、甚至一些临时调试代码。等到发现时已经被爬虫抓过一轮。

合理的做法是本地/预发用完整 sourceMap 方便调试，生产用 `hidden-source-map` 或 `source-map` 配合上传后删除。构建脚本里可以用环境变量区分：

```js
const isProd = process.env.NODE_ENV === 'production';

export default defineConfig({
 build: {
 sourcemap: isProd ? 'hidden' : true,
 },
});
```

这样本地出问题继续用完整映射，线上靠 Sentry 还原。两边都不耽误。

 推荐查看天气：http://www.362tq.com/hengfeng/zuotian.html
 推荐查看天气：http://www.362tq.com/hengfeng/7tian.html
 推荐查看天气：http://www.362tq.com/hengfeng/10tian.html
 推荐查看天气：http://www.362tq.com/hengfeng/15tian.html
 推荐查看天气：http://www.362tq.com/hengfeng/40tian.html
 推荐查看天气：http://www.362tq.com/shangraoyiyang/
 推荐查看天气：http://www.362tq.com/shangraoyiyang/zuotian.html
 推荐查看天气：http://www.362tq.com/shangraoyiyang/7tian.html
 推荐查看天气：http://www.362tq.com/shangraoyiyang/10tian.html
 推荐查看天气：http://www.362tq.com/shangraoyiyang/15tian.html
 推荐查看天气：http://www.362tq.com/shangraoyiyang/40tian.html
 推荐查看天气：http://www.362tq.com/yugan/
 推荐查看天气：http://www.362tq.com/yugan/zuotian.html
 推荐查看天气：http://www.362tq.com/yugan/7tian.html
 推荐查看天气：http://www.362tq.com/yugan/10tian.html
 推荐查看天气：http://www.362tq.com/yugan/15tian.html
 推荐查看天气：http://www.362tq.com/yugan/40tian.html
 推荐查看天气：http://www.362tq.com/poyang/
 推荐查看天气：http://www.362tq.com/poyang/zuotian.html
 推荐查看天气：http://www.362tq.com/poyang/7tian.html
 推荐查看天气：http://www.362tq.com/poyang/10tian.html
 推荐查看天气：http://www.362tq.com/poyang/15tian.html
 推荐查看天气：http://www.362tq.com/poyang/40tian.html
 推荐查看天气：http://www.362tq.com/wannian/
 推荐查看天气：http://www.362tq.com/wannian/zuotian.html
 推荐查看天气：http://www.362tq.com/wannian/7tian.html
 推荐查看天气：http://www.362tq.com/wannian/10tian.html
 推荐查看天气：http://www.362tq.com/wannian/15tian.html
 推荐查看天气：http://www.362tq.com/wannian/40tian.html
 推荐查看天气：http://www.362tq.com/mouyuan/
 推荐查看天气：http://www.362tq.com/mouyuan/zuotian.html
 推荐查看天气：http://www.362tq.com/mouyuan/7tian.html
 推荐查看天气：http://www.362tq.com/mouyuan/10tian.html
 推荐查看天气：http://www.362tq.com/mouyuan/15tian.html
 推荐查看天气：http://www.362tq.com/mouyuan/40tian.html
 推荐查看天气：http://www.362tq.com/dexing/
 推荐查看天气：http://www.362tq.com/dexing/zuotian.html
 推荐查看天气：http://www.362tq.com/dexing/7tian.html
 推荐查看天气：http://www.362tq.com/dexing/10tian.html
 推荐查看天气：http://www.362tq.com/dexing/15tian.html
 推荐查看天气：http://www.362tq.com/dexing/40tian.html
 推荐查看天气：http://www.362tq.com/jinan/
 推荐查看天气：http://www.362tq.com/jinan/zuotian.html
 推荐查看天气：http://www.362tq.com/jinan/7tian.html
 推荐查看天气：http://www.362tq.com/jinan/10tian.html
 推荐查看天气：http://www.362tq.com/jinan/15tian.html
 推荐查看天气：http://www.362tq.com/jinan/40tian.html
 推荐查看天气：http://www.362tq.com/lixia/
 推荐查看天气：http://www.362tq.com/lixia/zuotian.html
 推荐查看天气：http://www.362tq.com/lixia/7tian.html
 推荐查看天气：http://www.362tq.com/lixia/10tian.html
 推荐查看天气：http://www.362tq.com/lixia/15tian.html
 推荐查看天气：http://www.362tq.com/lixia/40tian.html
 推荐查看天气：http://www.362tq.com/huaiyin/
 推荐查看天气：http://www.362tq.com/huaiyin/zuotian.html
 推荐查看天气：http://www.362tq.com/huaiyin/7tian.html
 推荐查看天气：http://www.362tq.com/huaiyin/10tian.html
 推荐查看天气：http://www.362tq.com/huaiyin/15tian.html
 推荐查看天气：http://www.362tq.com/huaiyin/40tian.html
 推荐查看天气：http://www.362tq.com/tianqiao/
 推荐查看天气：http://www.362tq.com/tianqiao/zuotian.html
 推荐查看天气：http://www.362tq.com/tianqiao/7tian.html
 推荐查看天气：http://www.362tq.com/tianqiao/10tian.html
 推荐查看天气：http://www.362tq.com/tianqiao/15tian.html
 推荐查看天气：http://www.362tq.com/tianqiao/40tian.html
 推荐查看天气：http://www.362tq.com/licheng/
 推荐查看天气：http://www.362tq.com/licheng/zuotian.html
 推荐查看天气：http://www.362tq.com/licheng/7tian.html
 推荐查看天气：http://www.362tq.com/licheng/10tian.html
 推荐查看天气：http://www.362tq.com/licheng/15tian.html
 推荐查看天气：http://www.362tq.com/licheng/40tian.html
 推荐查看天气：http://www.362tq.com/changqing/
 推荐查看天气：http://www.362tq.com/changqing/zuotian.html
 推荐查看天气：http://www.362tq.com/changqing/7tian.html
 推荐查看天气：http://www.362tq.com/changqing/10tian.html
 推荐查看天气：http://www.362tq.com/changqing/15tian.html
 推荐查看天气：http://www.362tq.com/changqing/40tian.html
 推荐查看天气：http://www.362tq.com/pingyin/
 推荐查看天气：http://www.362tq.com/pingyin/zuotian.html
 推荐查看天气：http://www.362tq.com/pingyin/7tian.html
 推荐查看天气：http://www.362tq.com/pingyin/10tian.html
 推荐查看天气：http://www.362tq.com/pingyin/15tian.html
 推荐查看天气：http://www.362tq.com/pingyin/40tian.html
 推荐查看天气：http://www.362tq.com/jiyang/
 推荐查看天气：http://www.362tq.com/jiyang/zuotian.html
 推荐查看天气：http://www.362tq.com/jiyang/7tian.html
 推荐查看天气：http://www.362tq.com/jiyang/10tian.html
 推荐查看天气：http://www.362tq.com/jiyang/15tian.html
 推荐查看天气：http://www.362tq.com/jiyang/40tian.html
 推荐查看天气：http://www.362tq.com/shanghe/
 推荐查看天气：http://www.362tq.com/shanghe/zuotian.html
 推荐查看天气：http://www.362tq.com/shanghe/7tian.html
 推荐查看天气：http://www.362tq.com/shanghe/10tian.html
 推荐查看天气：http://www.362tq.com/shanghe/15tian.html
 推荐查看天气：http://www.362tq.com/shanghe/40tian.html
 推荐查看天气：http://www.362tq.com/zhangqiu/
 推荐查看天气：http://www.362tq.com/zhangqiu/zuotian.html
 推荐查看天气：http://www.362tq.com/zhangqiu/7tian.html
 推荐查看天气：http://www.362tq.com/zhangqiu/10tian.html
 推荐查看天气：http://www.362tq.com/zhangqiu/15tian.html
 推荐查看天气：http://www.362tq.com/zhangqiu/40tian.html
 推荐查看天气：http://www.362tq.com/qingdao/
 推荐查看天气：http://www.362tq.com/qingdao/zuotian.html
 推荐查看天气：http://www.362tq.com/qingdao/7tian.html
 推荐查看天气：http://www.362tq.com/qingdao/10tian.html
 推荐查看天气：http://www.362tq.com/qingdao/15tian.html
 推荐查看天气：http://www.362tq.com/qingdao/40tian.html
 推荐查看天气：http://www.362tq.com/shinan/
 推荐查看天气：http://www.362tq.com/shinan/zuotian.html
 推荐查看天气：http://www.362tq.com/shinan/7tian.html
 推荐查看天气：http://www.362tq.com/shinan/10tian.html
 推荐查看天气：http://www.362tq.com/shinan/15tian.html
 推荐查看天气：http://www.362tq.com/shinan/40tian.html
 推荐查看天气：http://www.362tq.com/shibei/
 推荐查看天气：http://www.362tq.com/shibei/zuotian.html
 推荐查看天气：http://www.362tq.com/shibei/7tian.html
 推荐查看天气：http://www.362tq.com/shibei/10tian.html
 推荐查看天气：http://www.362tq.com/shibei/15tian.html
 推荐查看天气：http://www.362tq.com/shibei/40tian.html
 推荐查看天气：http://www.362tq.com/huangdao/
 推荐查看天气：http://www.362tq.com/huangdao/zuotian.html
 推荐查看天气：http://www.362tq.com/huangdao/7tian.html
 推荐查看天气：http://www.362tq.com/huangdao/10tian.html
 推荐查看天气：http://www.362tq.com/huangdao/15tian.html
 推荐查看天气：http://www.362tq.com/huangdao/40tian.html
 推荐查看天气：http://www.362tq.com/laoshan/
 推荐查看天气：http://www.362tq.com/laoshan/zuotian.html
 推荐查看天气：http://www.362tq.com/laoshan/7tian.html
 推荐查看天气：http://www.362tq.com/laoshan/10tian.html
 推荐查看天气：http://www.362tq.com/laoshan/15tian.html
 推荐查看天气：http://www.362tq.com/laoshan/40tian.html
 推荐查看天气：http://www.362tq.com/licang/
 推荐查看天气：http://www.362tq.com/licang/zuotian.html
 推荐查看天气：http://www.362tq.com/licang/7tian.html
 推荐查看天气：http://www.362tq.com/licang/10tian.html
 推荐查看天气：http://www.362tq.com/licang/15tian.html
 推荐查看天气：http://www.362tq.com/licang/40tian.html
 推荐查看天气：http://www.362tq.com/chengyang/
 推荐查看天气：http://www.362tq.com/chengyang/zuotian.html
 推荐查看天气：http://www.362tq.com/chengyang/7tian.html
 推荐查看天气：http://www.362tq.com/chengyang/10tian.html
 推荐查看天气：http://www.362tq.com/chengyang/15tian.html
 推荐查看天气：http://www.362tq.com/chengyang/40tian.html
 推荐查看天气：http://www.362tq.com/jiaozhou/
 推荐查看天气：http://www.362tq.com/jiaozhou/zuotian.html
 推荐查看天气：http://www.362tq.com/jiaozhou/7tian.html
 推荐查看天气：http://www.362tq.com/jiaozhou/10tian.html
 推荐查看天气：http://www.362tq.com/jiaozhou/15tian.html
 推荐查看天气：http://www.362tq.com/jiaozhou/40tian.html
 推荐查看天气：http://www.362tq.com/jimo/
 推荐查看天气：http://www.362tq.com/jimo/zuotian.html
 推荐查看天气：http://www.362tq.com/jimo/7tian.html
 推荐查看天气：http://www.362tq.com/jimo/10tian.html
 推荐查看天气：http://www.362tq.com/jimo/15tian.html
 推荐查看天气：http://www.362tq.com/jimo/40tian.html
 推荐查看天气：http://www.362tq.com/pingdu/
 推荐查看天气：http://www.362tq.com/pingdu/zuotian.html
 推荐查看天气：http://www.362tq.com/pingdu/7tian.html
 推荐查看天气：http://www.362tq.com/pingdu/10tian.html
 推荐查看天气：http://www.362tq.com/pingdu/15tian.html
 推荐查看天气：http://www.362tq.com/pingdu/40tian.html
 推荐查看天气：http://www.362tq.com/jiaonan/
 推荐查看天气：http://www.362tq.com/jiaonan/zuotian.html
 推荐查看天气：http://www.362tq.com/jiaonan/7tian.html
 推荐查看天气：http://www.362tq.com/jiaonan/10tian.html
 推荐查看天气：http://www.362tq.com/jiaonan/15tian.html
 推荐查看天气：http://www.362tq.com/jiaonan/40tian.html
 推荐查看天气：http://www.362tq.com/laixi/
 推荐查看天气：http://www.362tq.com/laixi/zuotian.html
 推荐查看天气：http://www.362tq.com/laixi/7tian.html
 推荐查看天气：http://www.362tq.com/laixi/10tian.html
 推荐查看天气：http://www.362tq.com/laixi/15tian.html
 推荐查看天气：http://www.362tq.com/laixi/40tian.html
 推荐查看天气：http://www.362tq.com/zibo/
 推荐查看天气：http://www.362tq.com/zibo/zuotian.html
 推荐查看天气：http://www.362tq.com/zibo/7tian.html
 推荐查看天气：http://www.362tq.com/zibo/10tian.html
 推荐查看天气：http://www.362tq.com/zibo/15tian.html
 推荐查看天气：http://www.362tq.com/zibo/40tian.html
 推荐查看天气：http://www.362tq.com/zichuan/
 推荐查看天气：http://www.362tq.com/zichuan/zuotian.html
 推荐查看天气：http://www.362tq.com/zichuan/7tian.html
 推荐查看天气：http://www.362tq.com/zichuan/10tian.html
 推荐查看天气：http://www.362tq.com/zichuan/15tian.html
 推荐查看天气：http://www.362tq.com/zichuan/40tian.html
 推荐查看天气：http://www.362tq.com/zhangdian/
 推荐查看天气：http://www.362tq.com/zhangdian/zuotian.html
 推荐查看天气：http://www.362tq.com/zhangdian/7tian.html
 推荐查看天气：http://www.362tq.com/zhangdian/10tian.html
 推荐查看天气：http://www.362tq.com/zhangdian/15tian.html
 推荐查看天气：http://www.362tq.com/zhangdian/40tian.html
 推荐查看天气：http://www.362tq.com/boshan/
 推荐查看天气：http://www.362tq.com/boshan/zuotian.html
 推荐查看天气：http://www.362tq.com/boshan/7tian.html
 推荐查看天气：http://www.362tq.com/boshan/10tian.html
 推荐查看天气：http://www.362tq.com/boshan/15tian.html
 推荐查看天气：http://www.362tq.com/boshan/40tian.html
 推荐查看天气：http://www.362tq.com/linzi/
 推荐查看天气：http://www.362tq.com/linzi/zuotian.html
 推荐查看天气：http://www.362tq.com/linzi/7tian.html

线上报错日志里出现 app.3f7a2b.js:1:48291 这种堆栈时，你盯着压缩后的单行代码基本看不出问题在哪。很多人第一反应是去本地复现，反复刷新、切换网络、mock 数据，结果半小时过去了连是哪个组件报的错都不确定。sourceMap 就是为这种场景准备的：它把压缩后的行列号映射回原始源码，让 Sentry、Bugsnag 这类工具直接展示出 UserList.vue 第 42 行的 user.name。但生产环境直接暴露 .map 文件又存在源码泄露风险，同时构建产物里带上完整的 sourceMap 会让包体积成倍增长。这篇文章会从 Webpack、Vite 的 sourceMap 配置差异讲起，然后给出一个在 CI 阶段上传 sourceMap 到监控平台、并保证浏览器不加载源码映射的落地做法。

别急着关掉 sourceMap，它能在生产环境救你一命

线上报错日志里出现 app.3f7a2b.js:1:48291 这种堆栈时，你盯着压缩后的单行代码基本看不出问题在哪。很多人第一反应是去本地复现，反复刷新、切换网络、mock 数据，结果半小时过去了连是哪个组件报的错都不确定。sourceMap 就是为这种场景准备的：它把压缩后的行列号映射回原始源码，让 Sentry、Bugsnag 这类工具直接展示出 UserList.vue 第 42 行的 u

前端

开发工具

线上压缩代码报错难定位？本文讲解sourceMap在生产环境的正确用法：Webpack用hidden-source-map、Vite用sourcemap:'hidden'避免源码泄露，CI阶段通过Sentry CLI上传map文件后删除本地产物，配合真实案例演示如何快速还原报错到具体源码行，并解决Monorepo路径配置坑，实现安全高效的线上错误排查。

代码解释

Nginx

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

线上压缩代码报错难定位？本文讲解sourceMap在生产环境的正确用法：Webpack用hidden-source-map、Vite用sourcemap:'hidden'避免源码泄露，CI阶段通过Sentry CLI上传map文件后删除本地产物，配合真实案例演示如何快速还原报错到具体源码行，并解决Monorepo路径配...

别急着关掉 sourceMap，它能在生产环境救你一命-腾讯云开发者社区-腾讯云

别急着关掉 sourceMap，它能在生产环境救你一命

别急着关掉 sourceMap，它能在生产环境救你一命

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐