React JS关联Bugsnag源码映射后错误行号不显示问题

排查与修复步骤 #

1. 核对文件与版本一致性 #

• 确认build/static/js目录下同时存在编译后的JS文件和对应的.map文件，Bugsnag需要两者关联才能解析行号。
• 确保命令中的--app-version 1.2.3和应用上报错误时使用的版本号完全一致（大小写、后缀都不能差，比如不能把1.2.3写成1.2.3-build）。

2. 修正--base-url配置 #

• --base-url必须和应用加载JS文件的实际URL前缀完全匹配：比如实际加载路径是https://yourdomain.url/static/js/main.xyz789.js，则--base-url要设为https://yourdomain.url/static/js/，注意协议（http/https）不能错，末尾斜杠要保留。
• 可以在浏览器控制台的“网络”面板查看JS文件的实际请求路径，对比验证。

3. 检查源码映射文件有效性 #

• 打开本地的.map文件，确认sources字段包含原始源码的路径（如../src/components/Button.js），names字段保留了原始变量、函数名。如果这两个字段缺失或路径错误，Bugsnag无法解析。
• 确认React项目构建配置未禁用源码映射：在webpack.config.js或自定义配置文件中，devtool需设为source-map（生产环境推荐），不能是none或仅用于开发的选项。

4. 验证上传状态 #

• 登录Bugsnag控制台，进入项目的Source Maps页面，查看版本1.2.3下的文件是否显示为“Active”状态，且JS和map文件都已成功上传。
• 重新执行上传命令，查看终端输出，排查是否有文件缺失、API密钥错误或权限问题。

5. 测试错误上报 #

• 在源码中手动添加测试错误（比如throw new Error("Test source map resolution")），部署后触发错误。
• 查看Bugsnag控制台的错误堆栈，确认是否显示原始源码的文件名和准确行号。

内容的提问来源于stack exchange，提问作者Prerna More