[Android] TimeToInitialDisplay doesn't track Tab screens from react-navigation

[serzmerz]

OS:

• Windows
• MacOS
• Linux

Platform:

• iOS
• Android

SDK:

• @sentry/react-native (>= 1.0.0)
• react-native-sentry (<= 0.43.2)

SDK version: 5.22.2

react-native version: 0.73.6

Are you using Expo?

• Yes
• No

Are you using sentry.io or on-premise?

• sentry.io (SaaS)
• on-premise

If you are using sentry.io, please post a link to your issue so we can take a look:

[Link to issue]

Configuration:

(@sentry/react-native)

export const routingInstrumentation = new NativeSentry.ReactNavigationInstrumentation({
  enableTimeToInitialDisplay: true
});

Sentry.init({
  dsn: Config.get("REACT_APP_SENTRY_DSN"),
  environment: Config.get("ENV"),
  ignoreErrors,
  integrations: [
    new NativeSentry.ReactNativeTracing({
      routingInstrumentation
    })
  ],
  tracesSampleRate: Config.get("ENV") === "prod" && !__DEV__ ? 0.2 : 1,
  _experiments: {
    profilesSampleRate: Config.get("ENV") === "prod" && !__DEV__ ? 0 : 1
  }
});

---

I have the following issue:

On Android, when enableTimeToInitialDisplay flag is active, sentry doesn't capture initial time on screens from Tab navigator (react-navigation). It is happening in @sentry/react-native/android/src/main/java/io/sentry/react/RNSentryReactFragmentLifecycleTracer.java because:

1. Tab screen has Class name com.swmansion.rnscreens.ScreenFragment, not com.swmansion.rnscreens.ScreenStackFragment and it doesnt subscribe to eventDispatcher.
2. Even if I remove this condition, EventDispatcher doesn't report com.swmansion.rnscreens.events.ScreenAppearEvent event, since this event(transitionEnd) only available for Stack screens.

My navigation setup is next: Root stack navigator and one of the screens is TabNavigator

<RootStackNavigator.Navigator screenOptions={rootScreenOptions}>
        {routes.map(({ name, component, options }) => (
          <RootStackNavigator.Screen
            key={name}
            name={name}
            component={component}
            options={options}
          />
        ))}
      </RootStackNavigator.Navigator>
      
      
      
Tabs rendered as a screen inside root stack navigator:

<Tab.Navigator sceneContainerStyle={sceneContainerStyle} screenOptions={tabBarOptions}>
        {tabs.map(({ component, options, listeners, name }) => {
          return (
            <Tab.Screen
              key={name}
              name={name}
              component={component}
              options={options}
              listeners={listeners}
            />
          );
        })}
      </Tab.Navigator>     

Steps to reproduce:

• Launch the app
• Tab navigator is active screen
• Navigate between tabs with tab bar

Actual result:

On android you will get deadline_exceeded for ui.load.initial_display span. (Note: first default screen will be reported correctly, since router fire ScreenAppearEvent for this stack screen). It works as expected on ios with both tab and stack screens.

Expected result:

ui.load.initial_display span captured correctly for tab screens for Android

Next steps:

Have you considered any other options how to trigger navigation end for tab screens? Maybe you know any workarounds?
I can help investigate or provide demo if it will be helpful.
Tabs usually is the most heaviest screens, so we would like to track performance of them, especially for android(which is more slower platform for our app)

[krystofwoldrich]

Hi @serzmerz,
thank you for the detailed information and the code snipped,

we will investigate it.

Currently you can work around this by using the manual TTID instrumentation in the tabs.

<Sentry.TimeToInitialDisplay record={true} />

https://docs.sentry.io/platforms/react-native/performance/instrumentation/time-to-display/#time-to-initial-display-overwrite

[serzmerz]

Hello @krystofwoldrich, manual TTID instrumentation also doesn't work

[serzmerz]

this happening because event will not be emitted from native side for android for tabs here https://github.com/getsentry/sentry-react-native/blob/main/src/js/tracing/reactnavigation.ts#L236
and transaction will be cancelled by timeout

[krystofwoldrich]

@serzmerz Thank you for the details. If I understand this correctly the native events (https://github.com/getsentry/sentry-react-native/blob/main/src/js/tracing/reactnavigation.ts?rgh-link-date=2024-05-10T12%3A31%3A17Z#L236) are also not emitting for the manual instrumentation?

[serzmerz]

yes, for some reason is not emitted with manual instrumentation as well

[krystofwoldrich]

Could you confirm does it happen both in emulator and on device?

[serzmerz]

Good catch, I checked on real device and manual instrumentation works, thanks.

DEBUG Sentry Logger [debug]: [TimeToDisplay] onDrawNextFrame: {"newFrameTimestampInSeconds":1715846467.9390001,"type":"initialDisplay" DEBUG Sentry Logger [debug]: [TimeToDisplay] Found existing ui.load.initial_display span. DEBUG Sentry Logger [debug]: [TimeToDisplay] MessagesTab initial display span updated with end timestamp.

[serzmerz]

Also, I'm checking TimeToFullDisplay and it doesn't work on Tab on real device, only TimeToInitialDisplay works.
To make it work I need to have first: <Sentry.TimeToInitialDisplay record={true} />
And : <Sentry.TimeToFullDisplay record={true} />

With that I managed to record both: initial and full display on the tab

[krystofwoldrich]

Thank you for the confirmation.