如何为Heroku部署的React项目向Sentry上传Sourcemaps

完全可以实现这个需求，核心思路是构建阶段生成Sourcemaps，部署到Heroku时排除这些文件，同时单独将同版本的Sourcemaps上传到Sentry，确保代码与映射文件的版本一致性。以下是具体步骤：

1. 配置React项目生成Sourcemaps #

开启生产构建时的Sourcemaps生成：

• 如果使用Create React App（CRA），在项目根目录的.env.production文件中添加：

  GENERATE_SOURCEMAP=true
  

• 如果使用Vite，在vite.config.js的生产构建配置中开启Sourcemaps：

  export default defineConfig({
    build: {
      sourcemap: true
    }
  })
  

2. 让Heroku部署时排除Sourcemaps #

在项目根目录创建或修改.slugignore文件，添加规则让Heroku打包时忽略所有.map文件：

*.map

这样Heroku最终部署到生产环境的产物中不会包含Sourcemaps，避免源码暴露。

3. 配置Sentry上传Sourcemaps #

使用Sentry CLI完成Sourcemaps的上传，确保与部署代码版本一致：

1. 安装Sentry CLI依赖：

   npm install @sentry/cli --save-dev
   

2. 在package.json的scripts中添加构建与上传命令：

   "scripts": {
     "build": "react-scripts build",
     "sentry:upload": "sentry-cli sourcemaps upload ./build"
   }
   

3. 配置Sentry环境变量（可在Heroku控制台或本地.env文件中设置）：
   • SENTRY_DSN：项目的Sentry DSN地址
   • SENTRY_ORG：Sentry组织名称
   • SENTRY_PROJECT：Sentry项目名称
4. 每次构建后执行上传命令，或合并成一个命令：

   npm run build && npm run sentry:upload
   

4. 确保版本一致性（可选但推荐） #

为了让Sentry精准关联错误与对应源码，可通过Sentry的Release功能绑定版本号：

# 创建新Release
sentry-cli releases new "v$(npm run version --silent)"
# 关联代码提交记录
sentry-cli releases set-commits "v$(npm run version --silent)" --auto
# 上传Sourcemaps并绑定到该Release
sentry-cli sourcemaps upload --release "v$(npm run version --silent)" ./build

注意事项 #

• 不要将Sourcemaps提交到Git仓库，在.gitignore中添加*.map规则
• 确保Sentry的环境变量仅在构建/上传阶段可用，避免生产环境泄露
• 测试验证：触发一个生产环境错误，查看Sentry是否能正常解析为源码位置

内容的提问来源于stack exchange，提问作者S Ro