fix(ttfd): Use TTID end timestamp when TTFD should be updated with an earlier timestamp

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Add missing logs to dropped App Start spans ([#3861](https://github.com/getsentry/sentry-react-native/pull/3861))
 - Make all options of `startTimeToInitialDisplaySpan` optional ([#3867](https://github.com/getsentry/sentry-react-native/pull/3867))
 - Add Span IDs to Time to Display debug logs ([#3868](https://github.com/getsentry/sentry-react-native/pull/3868))
+- Use TTID end timestamp when TTFD should be updated with an earlier timestamp ([#3869](https://github.com/getsentry/sentry-react-native/pull/3869))
 
 ### Dependencies
 

src/js/tracing/timetodisplay.tsx

@@ -267,7 +267,12 @@ function updateFullDisplaySpan(frameTimestampSeconds: number, passedInitialDispl
     return;
   }
 
-  span.end(frameTimestampSeconds);
+  if (initialDisplayEndTimestamp > frameTimestampSeconds) {
+    logger.warn(`[TimeToDisplay] Using initial display end. Full display end frame timestamp is before initial display end.`);
+    span.end(initialDisplayEndTimestamp);
+  } else {
+    span.end(frameTimestampSeconds);
+  }
 
   span.setStatus('ok');
   logger.debug(`[TimeToDisplay] ${spanJSON.description} (${spanJSON.span_id}) span updated with end timestamp.`);

test/tracing/timetodisplay.test.tsx

@@ -241,6 +241,42 @@ describe('TimeToDisplay', () => {
     expect(spanToJSON(fullDisplaySpan!).timestamp).toEqual(initialDisplayEndTimestampMs / 1_000);
   });
 
+  test('full display which ended before but processed after initial display is extended to initial display end', async () => {
+    const fullDisplayEndTimestampMs = secondInFutureTimestampMs();
+    const initialDisplayEndTimestampMs = secondInFutureTimestampMs() + 500;
+    const [initialDisplaySpan, fullDisplaySpan, activeSpan] = startSpanManual(
+      {
+        name: 'Root Manual Span',
+        startTime: secondAgoTimestampMs(),
+      },
+      (activeSpan: Span | undefined) => {
+        const initialDisplaySpan = startTimeToInitialDisplaySpan();
+        const fullDisplaySpan = startTimeToFullDisplaySpan();
+
+        const timeToDisplayComponent = TestRenderer.create(<><TimeToInitialDisplay record={false} /><TimeToFullDisplay record={true}/></>);
+        timeToDisplayComponent.update(<><TimeToInitialDisplay record={true} /><TimeToFullDisplay record={true} /></>);
+
+        emitNativeInitialDisplayEvent(initialDisplayEndTimestampMs);
+        emitNativeFullDisplayEvent(fullDisplayEndTimestampMs);
+
+        activeSpan?.end();
+        return [initialDisplaySpan, fullDisplaySpan, activeSpan];
+      },
+    );
+
+    await jest.runOnlyPendingTimersAsync();
+    await client.flush();
+
+    expectFinishedInitialDisplaySpan(initialDisplaySpan, activeSpan);
+    expectFinishedFullDisplaySpan(fullDisplaySpan, activeSpan);
+
+    expectInitialDisplayMeasurementOnSpan(client.event!);
+    expectFullDisplayMeasurementOnSpan(client.event!);
+
+    expect(spanToJSON(initialDisplaySpan!).timestamp).toEqual(initialDisplayEndTimestampMs / 1_000);
+    expect(spanToJSON(fullDisplaySpan!).timestamp).toEqual(initialDisplayEndTimestampMs / 1_000);
+  });
+
   test('consequent renders do not update display end', async () => {
     const initialDisplayEndTimestampMs = secondInFutureTimestampMs();
     const fullDisplayEndTimestampMs = secondInFutureTimestampMs() + 500;