如果未附加调试器，则 React Native 应用程序在启动时无响应 [英] React Native app unresponsive on start if debugger is not attached

查看：108
本文介绍了如果未附加调试器，则 React Native 应用程序在启动时无响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 React Native (0.59.8) 应用程序，它在模拟器上运行良好，通过 Xcode 部署到设备时运行良好，但仅当用户没有在应用程序启动时通过 TestFlight 分发约 3 分钟时无响应已登录.

I have a React Native (0.59.8) app that works perfectly fine on simulator, perfectly fine when deployed to device through Xcode, but unresponsive when distributed over TestFlight for about 3 minutes on app start only if the user hasn't logged in.

这是发生了什么:

  • 我通过 TestFlight 安装我的应用
  • 打开应用.
  • 欢迎页面上有一个开始"按钮，可将用户带到登录屏幕.我点了那个按钮
  • 大约 2-3 分钟没有任何反应
  • 应用进入登录屏幕，一切正常.

一些观察:

  • 这仅发生在 TestFlight 存档构建中，不会发生在模拟器上或通过 Xcode > Run 部署时发生.
  • 这种情况发生在多个物理设备上(虽然都是 iPhone X，但我们目前没有任何其他设备可供测试).
  • 当应用处于崩溃"状态时，旋转我的手机会将所有内容完美地旋转到陆地空间方向.即，应用程序实际上正在运行并响应/布局正确的旋转.但是，底部的标签栏图标布局没有正确更改为横向/纵向.
  • 如果用户未在我的应用内登录，而我终止应用并重新启动，则会出现同样的问题.
  • 一旦用户登录，一切正常.
  • 如果我终止应用程序并在用户登录时重新启动，我的主页将位于选项卡栏中并具有一些可点击的视图.滚动视图完美流畅地滚动，但标签栏按钮和可点击链接不起作用.当我让它保持几分钟时，它会崩溃，并在 Console.app 中显示以下来自我 iPhone 的日志:
  • This happens only on TestFlight archive builds, it doesn't happen on simulator or when deployed through Xcode > Run.
  • This happens on multiple physical devices (though both a iPhone X, we currently don't have any other devices to test).
  • When app is in that "crashed" state, rotating my phone rotates everything perfectly to landspace orientation. i.e., the app is actually running and responding/layouting correcty to rotations. Though, the tab bar icon layout atht the bottom doesn't change correctly to the landscape/portraint orientation.
  • If the user isn't logged in inside my app, and I kill the app and relaunch, same problem occurs.
  • Once the user is logged in everything works.
  • If I kill the app and relaunch when the user is logged in, I get my homepage that is inside a tab bar and has some tappable views. The scroll view scrolls perfectly and smoothly BUT tab bar buttons and tappable links don't work. When I let it stay on for a few minutes, it crashes with the following log from my iPhone in Console.app:

-

*** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Exception in HostFunction: std::bad_alloc', reason: 'Unhandled JS Exception: Exception in HostFunction: std::bad_alloc, stack:
<unknown>@<null>:<null>
<unknown>@4:3638
value@1033:573
onLayout@1033:1815
y@95:576
P@95:719
E@95:773
M@95:1940
H@95:2699
j@95:2514
<unknown>@95:14003
Ue@95:83341
De@95:13673
We@95:13846
receiveEvent@95:14222
value@28:3311
<unknown>@28:822
value@28:2565
value@28:794
value@<null>:<null>
'
*** First throw call stack:
(0x208f5d27c 0x2081379f8 0x100c2703c 0x100c23574 0x208f64900 0x208e464d0 0x208e47104 0x100c3a6b0 0x100c7a1d4 0x100c79f34 0x20899ca38 0x20899d7d4 0x208978dec 0x20897992c 0x208981e08 0x208b7d114 0x208b7fcd4)

  • 我可以通过向下滑动来刷新我的主页，它开始刷新(获取数据需要一两秒钟)，但它永远保持刷新状态.
  • 在挂起"状态下，我的手机在一两分钟内变得非常热，所以我怀疑 CPU 处于 100% 状态，但我不知道如何验证.
  • 我只每周发送一次构建，上周没有出现这样的问题，而且我已经更改了项目的数百个部分，所以我不确定问题是从什么时候开始的，因为它不会出现在模拟器中或通过 Xcode 进行设备测试.

    • 我来自 package.json 的依赖项:

    "dependencies": {
    "@babel/runtime": "^7.4.5",
    "@bankify/react-native-animate-number": "^0.2.1",
    "@react-native-community/async-storage": "^1.4.2",
    "@types/algoliasearch": "^3.30.12",
    "@types/react-native-permissions": "^1.1.1",
    "algoliasearch": "^3.33.0",
    "art": "sebmarkbage/art#19/head",
    "base-64": "^0.1.0",
    "global": "^4.3.2",
    "immutability-helper": "^3.0.1",
    "iso-639-1": "^2.0.5",
    "lerna": "^3.14.1",
    "lodash": "^4.17.11",
    "portable-fetch": "^3.0.0",
    "q": "^1.5.1",
    "querystring": "^0.2.0",
    "react": "16.8.6",
    "react-art": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-native": "^0.59.8",
    "react-native-geolocation-service": "^2.0.1",
    "react-native-gesture-handler": "^1.2.1",
    "react-native-intercom": "^13.1.0",
    "react-native-linear-gradient": "^2.5.4",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-onesignal": "^3.2.14",
    "react-native-permissions": "^1.1.1",
    "react-native-simple-radio-button": "^2.7.3",
    "react-native-static-safe-area-insets": "^1.3.3",
    "react-native-svg": "^9.5.1",
    "react-native-svg-charts": "^5.2.0",
    "react-native-swipeout": "^2.3.6",
    "react-native-web": "^0.11.4",
    "react-native-webview": "^5.10.0",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-api-middleware": "^3.0.1",
    "redux-persist": "^5.10.0",
    "redux-refresh-token": "^0.1.0",
    "reselect": "latest",
    "superagent": "^5.0.5",
    "url": "^0.11.0"
  },

    有人遇到过这样的问题吗?可能是什么原因?它似乎与布局和状态更改的某种组合有关，但我不知道如何调试，因为它只发生在存档的发布"版本上.

    Did anyone ever have such an issue? What might be the cause? It seems like it's related to some combination of layout and state changes, but I don't know how to debug as it only occurs on archived "release" builds.

    更新:我已设法附加到 Xcode 上的调试版本，还有一些其他观察:

    UPDATE: I've managed to attach to a debug build on Xcode, some other observations:

    • 在性能监视器中，RAM 使用率一直越来越高.

    • 整个 CPU 都被 React Javascript 线程消耗:

    • In performance monitor, the RAM usage keeps getting higher and higher forever.

    • The whole CPU is consumed by the React Javascript thread:

    当我通过摇动设备重新加载应用程序时，RAM 使用仍然存在.即我的应用程序现在使用 1.5GB，我重新加载应用程序，它没有重置为某个合理的值，它从 1.5GB 继续并不断增加.(不过，当我杀死并重新打开应用程序时，它显然会重置)

    When I reload the app by shaking the device, the RAM use persists. i.e. my app is using 1.5GB now, I reload the app, it doesnt reset to some sane value, it continues from 1.5GB and keeps increasing. (it obviously does reset when I kill and reopen the app though)

    只有 RAM(标有 RAM 的那个)使用量在增加.JSC 使用量为 0 MB.这是性能监视器的屏幕截图:

    Only the RAM (the one labeled with RAM) use is increasing. JSC use is 0 MB. Here is a screenshot of the performance monitor:

    • 当/如果事情在几分钟后变得正常"，那么在正常的 RAM 使用情况下，一切都非常顺利，UI 和 JS 线程的速度均为 60fps.

    更新 2:

    • 当我在 Xcode 调试器中暂停应用程序时，JS 线程始终处于同一功能:

    • 在最后一部分，我没有远程调试 JS.当我摇晃设备并远程选择 Debug JS 时，什么也没发生(尽管 CPU 仍然用完了，而且 RAM 越来越大).我暂停了执行，结果卡在了这里:

    • 当我尝试重新加载时它崩溃了，甚至没有响应震动(开发者菜单没有出现).我杀死了应用程序并重新启动，它卡在启动画面(甚至没有到达欢迎屏幕)，再次卡在与上一个屏幕截图的同一行.

    • When I tried to reload it crashed and didn't even respond to shake (the developer menu didn't come up). I killed the app and restarted, and it got stuck at splash screen (not even reaching the welcome screen), again stuck at the same line with previous screenshot.

    不确定是否相关，但我在日志中收到了无数错误，例如 nw_socket_handle_socket_event [C4.1:1] Socket SO_ERROR [61: Connection denied].

    Not sure if related, but I'm getting endless errors like nw_socket_handle_socket_event [C4.1:1] Socket SO_ERROR [61: Connection refused] in the log.

    更新 3:

    • 我启用了 Debug JS Remotely 第二天再次启动了我的应用程序，而没有更改一行代码，并且它开始时没有出现任何问题.我可以验证正常运行的应用没有这些问题:
    • I enabled Debug JS Remotely again launched my app next day without changing a line of code, and it started with no issues. I can verify that the healthy running app has none of those issues:

    • 我禁用了远程 JS 调试，问题又来了.我认为这解释了为什么我在本地测试中没有问题(因为我总是远程调试 JS)但有问题.我正在将问题标题从 What is cause of touch unresponsiveness on React Native app start 更新为 React Native app 在启动时无响应，如果没有附加调试器 以反映这个问题.
    • I've disabled remote JS debugging and the problem came again. I think this explains why I don't have issue on local testing (since I always debug JS remotely) but have problems. I'm updating the question title from What is causing a few minutes of touch unresponsiveness on React Native app start to React Native app unresponsive on start if debugger is not attached to reflect this issue.

    推荐答案

    在澄清问题后(它只挂在没有附加调试器的调试版本中)之后，问题就更清楚了.我已经阅读了 react native ios application crash if远程调试未启用，结果完全相同:日志导致 JS 线程挂起.如果连接没有问题，它们会被路由到调试器，但是当没有调试器时，它会使控制台膨胀.

    After clarifying the problem (that it hangs only in debug builds where debugger is not attached) it was more clear. I've read react native ios application crash if remote debug is not enabled and it turns out that it was exactly the same: logs were causing JS thread to hang. They were routed to a debugger if attached with no issue but when there wasn't a debugger it bloated the console.

    我添加了 babel-plugin-transform-remove-console 脚本添加到我的开发依赖项中，该脚本仅在发布模式下触发，问题就消失了.(如果我没有在调试版本上附加调试器，它仍然会发生，但无论如何我在开发时总是附加一个)

    I've added babel-plugin-transform-remove-console script to my dev dependencies which only triggers on release mode, and the problem is gone. (It still happens if I do NOT have a debugger attached on a debug build, but I always have one attached while developing anyway)

    似乎在升级到 React Native 0.60(以及一些结构性变化)后 babel-plugin-transform-remove-console 没有明显原因停止工作或错误.我已将以下代码添加到我的应用程序的主 index.js 以从生产版本中删除日志记录:

    It seems that after upgrading to React Native 0.60 (and also some structural changes) babel-plugin-transform-remove-console stopped working for no apparent reason or error. I've added the following code to my app's main index.js to remove logging from production builds:

    if (!__DEV__) {
    global.console.log = () => {}
    global.console.warn = () => {}
    global.console.error = () => {}
}

    完美运行，无需任何插件.

    It works perfectly, with no need for any plugin.

    这篇关于如果未附加调试器，则 React Native 应用程序在启动时无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆