React JS项目集成Sentry时上传source map出现413错误求助

413错误本质是请求体超过服务端限制，除了Sentry公开的20MB总source map大小上限外，还有两个容易被忽略的限制规则：单source map文件最大1MB、单上传请求体大小限制，你可以按以下步骤排查解决：

1. 校验单文件体积并优化拆包 #

• 先统计所有source map的单文件大小，以Create React App默认构建路径为例，执行命令：
  ls -lh build/static/js/*.map
• 对超过1MB的单文件做拆包优化：
  • 配置webpack splitChunks规则，把大体积第三方依赖、公共业务模块拆分为独立chunk，避免单个js文件对应过大的map文件
  • 调整webpack devtool配置为source-map，不要使用inline-source-map、eval-source-map等会把source map内容嵌入js文件的配置，减少不必要的体积
  • 若使用Create React App不想 eject 配置，可以通过react-app-rewired、craco等工具自定义拆包规则
• 开启source map压缩，可通过SourceMapDevToolPlugin配置压缩逻辑，删除map文件中不需要的调试信息

2. 调整上传配置拆分请求 #

默认情况下Sentry webpack插件和CLI都会把多个文件合并为单个请求上传，就算总大小低于20MB，也可能触发单请求大小限制：

• 若使用@sentry/webpack-plugin，添加chunkSize配置，限制单个请求的最大字节数：

  new SentryWebpackPlugin({
    // 其他原有配置
    chunkSize: 1 * 1024 * 1024 // 单请求限制为1MB，自动拆分多个请求上传
  })
  

• 若使用sentry-cli上传，添加参数限制单请求大小或文件数量：
  sentry-cli releases files <release版本号> upload-sourcemaps --max-batch-size-bytes 1048576 ./build
  或通过--max-batch-size 10限制单次请求最多上传10个文件

3. 过滤不需要上传的文件 #

• 配置上传规则过滤非必要的map文件，比如css对应的map文件、测试文件对应的map文件：
  • webpack插件配置ignore: ['**/*.css.map', '**/*test*.map']
  • CLI上传时添加--ignore '**/*.css.map'参数
• 上传前清理历史构建产物，避免把旧版本的source map一起上传

4. 私有部署场景额外检查 #

如果你使用的是私有部署的Sentry，需要检查反向代理层的请求大小限制：

• Nginx配置中调整client_max_body_size 20M;，避免代理层拦截大请求
• 检查Sentry服务端配置的SENTRY_MAX_FILE_SIZE、SENTRY_MAX_BODY_SIZE参数是否和官方默认值一致

验证步骤 #

你可以先尝试手动上传单个小于1MB的source map文件，如果上传成功说明问题出在批量上传的配置或者单文件体积过大，如果依然报错413，可以到Sentry后台组织设置的配额页面，核对当前账号实际生效的source map大小限制，部分自定义配额的账号阈值可能和公开文档不同。

内容的提问来源于stack exchange，提问作者Lokesh Dugar