Ionic Capacitor打包React webapp为安卓应用时出现Something went wrong错误

这个「Something went wrong」提示是ReactJS运行时抛出的错误边界兜底提示，既不是Android模拟器的系统报错，也不是Capacitor原生层的报错。

各环节报错特征区分 #

• Android模拟器/系统原生报错：会弹出系统级「应用已停止运行」弹窗，直接触发应用闪退，不会在应用内部显示自定义文案的错误提示
• Capacitor原生层报错：只会在Android Studio的Logcat面板输出原生代码的异常栈信息，前端没有手动捕获的前提下要么出现白屏，要么触发系统闪退，不会输出该固定前端提示
• React错误边界报错：你观察到的「短暂显示初始布局后触发提示」完全符合React的执行逻辑：原生层和WebView加载正常，React完成初始渲染后执行业务逻辑时抛出了未被手动捕获的异常，触发了React内置的默认错误边界兜底UI。

排查方案 #

• 优先使用Chrome远程调试定位具体报错：模拟器保持应用打开状态，在Chrome浏览器地址栏输入chrome://inspect，找到对应应用的WebView调试入口，打开开发者工具的控制台面板就能看到完整的JS报错栈，直接定位问题代码
• 也可以直接在Android Studio的Logcat面板，筛选标签为Chrome的日志，就能看到WebView输出的JS报错信息，无需额外打开浏览器也能快速排查
• 这类Capacitor打包后触发的React报错常见原因可优先排查：
  • 代码中调用了仅浏览器环境支持的API，在Capacitor WebView环境下不存在或者行为不一致
  • 路由使用了BrowserRouter，Capacitor本地文件加载的路径规则和浏览器服务端部署规则不匹配，建议切换为HashRouter
  • 项目构建的publicPath配置错误，导致后续加载JS、CSS等静态资源时404触发异常

内容的提问来源于stack exchange，提问作者Sander Smith