React Native StackOverflowException

Question

I'm having the following exception in my react-native app on Android

E/unknown:ReactNative: Exception in native call
    com.facebook.react.uimanager.IllegalViewOperationException: StackOverflowException
        at com.facebook.react.ReactRootView.handleException(ReactRootView.java:563)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:669)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at android.view.View.draw(View.java:14468)
        at android.widget.FrameLayout.draw(FrameLayout.java:472)
        at android.widget.ScrollView.draw(ScrollView.java:1603)
        at com.facebook.react.views.scroll.ReactScrollView.draw(ReactScrollView.java:354)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at android.view.View.draw(View.java:14468)
        at android.widget.FrameLayout.draw(FrameLayout.java:472)
        at android.widget.HorizontalScrollView.draw(HorizontalScrollView.java:1609)
        at com.facebook.react.views.scroll.ReactHorizontalScrollView.draw(ReactHorizontalScrollView.java:275)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.v

I have the following versions in my React-Native app:

• react-native: 0.55.3
• react: 16.3.1
• Android: 4.4.2

The main problem is that, this exception does not have a certain case, it just happens anywhere in the app. For example, while you've been in the app for a while, and then try to go to a screen, it crashes with this exception.

I have searched a lot about IllegalViewOperationException.

https://github.com/facebook/react-native/issues/13984 -> The issue here suggest to remove LayoutAnimation however I've totally removed it from my project and I'm still facing the issue.

com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag -> the exception here seems to be caused by another reason, in my case I don't have an unknown view tag issue

I have searched a lot about StackOverflowException in react-native, but even in it's GitHub issues, there are zero results.

I've also checked Exception in native call error. For example, in this link, E/unknown:React: Exception in native call, the issue is caused by bundling. However my case is not related to bundling. I can successfully run the app in the emulator and navigate among screens. The exception also occurs in release mode on real devices too.

I'm unable to find an answer including Exception in native call, IllegalViewOperationException, and StackOverflowException keywords. The exception occurs on Android devices with only 4.x version. It does not occur on 5 and higher Android versions. I guess that it might be related to device's insufficient RAM, or the device might not handle too many renderings in consecutive page navigations. Any ideas on how I can prevent this exception?

Answer 1

可能您有一个强制重新渲染的递归操作。

https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

  @Override
  protected void dispatchDraw(Canvas canvas) {
    try {
      super.dispatchDraw(canvas);
    } catch (StackOverflowError e) {
      // Adding special exception management for StackOverflowError for logging purposes.
      // This will be removed in the future.
      handleException(e);
    }
  }

https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java

该dispatchDraw方法是 android SDK 的一部分。是视图系统的一部分，允许在 viewGroup（根组件）内绘制其他视图。根据该过程的本质（因为 ViewGroup 也是一个 View，您可以在根内嵌套无限的视图树），StackoverflowException（VM 耗尽内存空间来进行另一个调用）是可能的。React-Native 依赖于自定义视图组件 ReactRootView，如果呈现无限/过于昂贵的视图树，它会抛出您看到的异常。RN 应用程序的结构是一个 Android Activity，带有一个 ReactRootView（framelayout 子类），其中包含您在 JS 中添加的所有内容。每个屏幕。因此，如果你的一个屏幕渲染了太多次并且你渲染了另一个屏幕，你就会到达 ReactRootView 溢出内存堆栈的地步，很快就会出现异常。

您在较旧的手机上看到这种情况，要么是因为设备规格低于渲染过程对其施加的压力，要么是因为 4.4.2 上暴露了 RN 视图生成代码上的特定错误。

尝试使用渲染评估工具（例如“why-did-you-render”）来检测不需要的渲染周期。否则，您需要减少渲染量。