如何用Webpack+Next.js上传Sourcemap至Sentry？Sentry显示压缩代码排查

1. Source Map上传逻辑被破坏 #

• 检查next.config.js是否还保留了Sentry向导自动注入的withSentryConfig包裹逻辑。如果手动修改配置时移除了这个包裹，或者覆盖了相关配置项，会直接导致Source Map无法上传到Sentry，从而无法解析压缩代码。
• 查看项目构建日志，确认是否有Uploading source maps to Sentry...这类输出。如果没有，说明Source Map上传步骤完全没执行。

2. 构建压缩配置干扰Source Map生成 #

• Next.js 12默认在生产环境开启代码压缩，若手动修改了minify、compression或Webpack的devtool配置，可能导致Source Map生成失败。比如将devtool设为false，或者自定义压缩工具未同步生成对应Source Map。
• 检查next.config.js的Webpack配置段，是否有修改output.sourceMapFilename、devtool等核心配置项。

3. 环境配置不匹配 #

• 确认项目构建时的环境变量（如NODE_ENV=production）与Sentry后台配置的环境一致。如果Source Map上传到了测试环境，但错误报告来自生产环境，Sentry无法匹配到对应的映射文件。
• 查看withSentryConfig的第二个参数（Sentry专属配置），确认environment字段是否与构建环境同步。

4. 版本兼容性问题 #

• 当前@sentry/nextjs@7.20.0与next@12.0.9的版本组合可能存在Source Map处理的兼容bug。可以尝试将@sentry/nextjs升级到Next.js 12对应的最新兼容版本，或回退到更稳定的版本测试。

5. 自定义Webpack配置冲突 #

• 如果在next.config.js中添加了自定义Webpack插件、修改了模块规则，可能破坏Sentry自动注入的Source Map生成逻辑。比如使用第三方压缩插件未兼容Sentry的Source Map流程，或手动修改了Webpack的输出规则。

快速排查步骤 #

• 临时恢复Sentry向导生成的原始next.config.js配置，重新构建上传，验证是否能正常显示原始代码。如果可以，说明问题出在后续的配置修改中。
• 检查项目/.next/static目录下是否生成了.map后缀的Source Map文件。
• 登录Sentry后台，进入项目的Source Maps页面，确认对应版本的Source Map是否存在且关联正确。

内容的提问来源于stack exchange，提问作者Vladimír