fix(ttd): Equalize TTID and TTFD duration when TTFD manual API is called and resolved before auto TTID (#4680)

Author: krystofwoldrich

CHANGELOG.md

@@ -43,6 +43,7 @@
 - Handle non-string category in getCurrentScreen on iOS ([#4629](https://github.com/getsentry/sentry-react-native/pull/4629))
 - Use route name instead of route key for current route tracking ([#4650](https://github.com/getsentry/sentry-react-native/pull/4650))
   - Using key caused user interaction transaction names to contain route hash in the name.
+- Equalize TTID and TTFD duration when TTFD manual API is called and resolved before auto TTID ([#4680](https://github.com/getsentry/sentry-react-native/pull/4680))
 
 ### Dependencies
 

packages/core/src/js/tracing/reactnavigation.ts

@@ -32,8 +32,7 @@ import {
   getDefaultIdleNavigationSpanOptions,
   startIdleNavigationSpan as startGenericIdleNavigationSpan,
 } from './span';
-import { manualInitialDisplaySpans, startTimeToInitialDisplaySpan } from './timetodisplay';
-import { setSpanDurationAsMeasurementOnSpan } from './utils';
+import { manualInitialDisplaySpans, startTimeToInitialDisplaySpan, updateInitialDisplaySpan } from './timetodisplay';
 export const INTEGRATION_NAME = 'ReactNavigation';
 
 const NAVIGATION_HISTORY_MAX_SIZE = 200;
@@ -297,9 +296,10 @@ export const reactNavigationIntegration = ({
           return;
         }
 
-        latestTtidSpan.setStatus({ code: SPAN_STATUS_OK });
-        latestTtidSpan.end(newFrameTimestampInSeconds);
-        setSpanDurationAsMeasurementOnSpan('time_to_initial_display', latestTtidSpan, navigationSpanWithTtid);
+        updateInitialDisplaySpan(newFrameTimestampInSeconds, {
+          activeSpan: navigationSpanWithTtid,
+          span: latestTtidSpan,
+        });
       });
     }
 

packages/core/src/js/tracing/timetodisplay.tsx

@@ -6,7 +6,7 @@ import { isTurboModuleEnabled } from '../utils/environment';
 import { SPAN_ORIGIN_AUTO_UI_TIME_TO_DISPLAY, SPAN_ORIGIN_MANUAL_UI_TIME_TO_DISPLAY } from './origin';
 import { getRNSentryOnDrawReporter, nativeComponentExists } from './timetodisplaynative';
 import type {RNSentryOnDrawNextFrameEvent } from './timetodisplaynative.types';
-import { setSpanDurationAsMeasurement } from './utils';
+import { setSpanDurationAsMeasurement, setSpanDurationAsMeasurementOnSpan } from './utils';
 
 let nativeComponentMissingLogged = false;
 
@@ -206,14 +206,26 @@ function onDrawNextFrame(event: { nativeEvent: RNSentryOnDrawNextFrameEvent }):
   }
 }
 
-function updateInitialDisplaySpan(frameTimestampSeconds: number): void {
-  const span = startTimeToInitialDisplaySpan();
+/**
+ *
+ */
+export function updateInitialDisplaySpan(
+  frameTimestampSeconds: number,
+  {
+    activeSpan = getActiveSpan(),
+    span = startTimeToInitialDisplaySpan(),
+  }: {
+    activeSpan?: Span;
+    /**
+     * Time to initial display span to update.
+     */
+    span?: Span;
+  } = {}): void {
   if (!span) {
     logger.warn(`[TimeToDisplay] No span found or created, possibly performance is disabled.`);
     return;
   }
 
-  const activeSpan = getActiveSpan();
   if (!activeSpan) {
     logger.warn(`[TimeToDisplay] No active span found to attach ui.load.initial_display to.`);
     return;
@@ -239,7 +251,7 @@ function updateInitialDisplaySpan(frameTimestampSeconds: number): void {
     updateFullDisplaySpan(frameTimestampSeconds, span);
   }
 
-  setSpanDurationAsMeasurement('time_to_initial_display', span);
+  setSpanDurationAsMeasurementOnSpan('time_to_initial_display', span, activeSpan);
 }
 
 function updateFullDisplaySpan(frameTimestampSeconds: number, passedInitialDisplaySpan?: Span): void {

packages/core/test/tracing/reactnavigation.ttid.test.tsx

@@ -351,6 +351,28 @@ describe('React Navigation - TTID', () => {
       expect(getSpanDurationMs(transaction, 'ui.load.initial_display')).toEqual(transaction.measurements?.time_to_initial_display?.value);
     });
 
+    test('ttfd span duration and measurement should equal ttid from ttfd is called earlier than ttid', () => {
+      jest.runOnlyPendingTimers(); // Flush app start transaction
+
+      mockedNavigation.navigateToNewScreen();
+      TestRenderer.render(<TimeToFullDisplay record />);
+      emitNativeFullDisplayEvent();
+      mockedEventEmitter.emitNewFrameEvent();
+
+      jest.runOnlyPendingTimers(); // Flush navigation transaction
+
+      const transaction = getLastTransaction(transportSendMock);
+      const ttfdSpanDuration = getSpanDurationMs(transaction, 'ui.load.full_display');
+      const ttidSpanDuration = getSpanDurationMs(transaction, 'ui.load.initial_display');
+      expect(ttfdSpanDuration).toBeDefined();
+      expect(ttidSpanDuration).toBeDefined();
+      expect(ttfdSpanDuration).toEqual(ttidSpanDuration);
+
+      expect(transaction.measurements?.time_to_full_display?.value).toBeDefined();
+      expect(transaction.measurements?.time_to_initial_display?.value).toBeDefined();
+      expect(transaction.measurements?.time_to_full_display?.value).toEqual(transaction.measurements?.time_to_initial_display?.value);
+    });
+
     test('ttfd span duration and measurement should equal for application start up', () => {
       mockedNavigation.finishAppStartNavigation();
       mockedEventEmitter.emitNewFrameEvent();