Crash app, TypeError: null is not an object (evaluating 'state.routes'), ReactNavigationV4Instrumentation

Thanks, committers!

Environment

System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 43.17 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.22.0 - ~/.anyenv/envs/nodenv/versions/10.22.0/bin/node
    Yarn: 1.22.4 - ~/work/voice-memo-chat/node_modules/.bin/yarn
    npm: 6.14.6 - ~/.anyenv/envs/nodenv/versions/10.22.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29, 30
      Build Tools: 23.0.1, 23.0.2, 25.0.0, 26.0.1, 26.0.3, 27.0.3, 28.0.2, 28.0.3, 29.0.0, 29.0.2, 30.0.0, 30.0.0, 30.0.2, 30.0.3
      System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

How do you use Sentry? Sentry SaaS (sentry.io) or self-hosted/on-premise (which version?) "@sentry/react-native": "^2.4.0",

Which SDK and version? e.g: JavaScript 5.11.1, .NET 1.2.0 "@sentry/react-native": "^2.4.0",

Steps to Reproduce

I am using it with react-navigation version4.

I noticed that when I run the navigate function, the app crashes. This problem is reproduced, for example, when I quickly tap the button twice to navigate to a particular screen.

The code we will try for the integration is as follows.

const routingInstrumentation = new Sentry.ReactNavigationV4Instrumentation();

Sentry.init({
  dsn: Config.SENTRY_DSN,
  tracesSampleRate: 0.2,
  integrations: [
    new Sentry.ReactNativeTracing({
      routingInstrumentation: routingInstrumentation,
      tracingOrigins: [
      ],
      // ... other options
    }),
  ],
});

<AppNavigator
  ref={(navigatorRef) => {
    routingInstrumentation.registerAppContainer(navigatorRef); //If remove this line, the problem will no longer occur.
  }}
>
</AppNavigator>

Actual Result

With the error in the issue title.

TypeError: null is not an object (evaluating 'state.routes')

ReactNavigationV4Instrumentation#_getCurrentRouteFromState
    reactnavigationv4.js:178:34
ReactNavigationV4Instrumentation#_onStateChange
    reactnavigationv4.js:117:60
_appContainer._navigation.router.getStateForAction
    reactnavigationv4.js:107:36
NavigationContainer#dispatch
    createAppContainer.js:351:8
actionHelpers.actionName
    getChildNavigation.js:1:1529
TouchableOpacity.props.onPress
    setting.js:247:45
createReactClass$argument_0.touchableHandlePress
    TouchableOpacity.js:264:45
touchableHandlePress
    [native code]:0
TouchableMixin._performSideEffectsForTransition
    Touchable.js:880:34
_performSideEffectsForTransition
    [native code]:0
TouchableMixin._receiveSignal
    Touchable.js:779:44
_receiveSignal
    [native code]:0
TouchableMixin.touchableHandleResponderRelease
    Touchable.js:490:24
touchableHandleResponderRelease
    [native code]:0
forEach
    [native code]:0
callFunctionReturnFlushedQueue
    [native code]:0

[jennmueng]

I will try to reproduce this

[jennmueng]

@liamjones I see this now, added to our immediate TODO.