fix(tracing): Fix orphaned TTID/TTFD spans in the trace view (#6432)

TTID/TTFD spans created in the TimeToDisplay integration passed
`parent_span_id` but no `trace_id`, so `createSpanJSON` minted a random
`uuid4()` trace_id. Sentry groups spans by `trace_id` first, so the spans
rendered as orphaned top-level traces despite a correct `parent_span_id`.

Thread the transaction's `trace_id` (from `event.contexts.trace.trace_id`)
into all three `createSpanJSON` call sites, matching the pattern already
used by the app start integration and `createChildSpanJSON`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: antonis

CHANGELOG.md

@@ -12,6 +12,10 @@
 
 - Add `Sentry.reportFullyDisplayed()` imperative API for signaling Time to Full Display ([#6419](https://github.com/getsentry/sentry-react-native/pull/6419))
 
+### Fixes
+
+- Fix orphaned TTID/TTFD spans in the trace view ([#6437](https://github.com/getsentry/sentry-react-native/pull/6437))
+
 ## 8.18.0
 
 ### Features

packages/core/src/js/tracing/integrations/timeToDisplayIntegration.ts

@@ -40,6 +40,12 @@ export const timeToDisplayIntegration = (): Integration => {
         return event;
       }
 
+      const traceId = event.contexts?.trace?.trace_id;
+      if (!traceId) {
+        debug.warn(`[${INTEGRATION_NAME}] No trace id found in transaction.`);
+        return event;
+      }
+
       const transactionStartTimestampSeconds = event.start_timestamp;
       if (!transactionStartTimestampSeconds) {
         // This should never happen
@@ -53,10 +59,17 @@ export const timeToDisplayIntegration = (): Integration => {
       const ttidSpan = await addTimeToInitialDisplay({
         event,
         rootSpanId,
+        traceId,
         transactionStartTimestampSeconds,
         enableTimeToInitialDisplayForPreloadedRoutes,
       });
-      const ttfdSpan = await addTimeToFullDisplay({ event, rootSpanId, transactionStartTimestampSeconds, ttidSpan });
+      const ttfdSpan = await addTimeToFullDisplay({
+        event,
+        rootSpanId,
+        traceId,
+        transactionStartTimestampSeconds,
+        ttidSpan,
+      });
 
       const ttidDurationMs =
         ttidSpan?.start_timestamp && ttidSpan?.timestamp
@@ -109,11 +122,13 @@ export const timeToDisplayIntegration = (): Integration => {
 async function addTimeToInitialDisplay({
   event,
   rootSpanId,
+  traceId,
   transactionStartTimestampSeconds,
   enableTimeToInitialDisplayForPreloadedRoutes,
 }: {
   event: Event;
   rootSpanId: string;
+  traceId: string;
   transactionStartTimestampSeconds: number;
   enableTimeToInitialDisplayForPreloadedRoutes: boolean;
 }): Promise<SpanJSON | undefined> {
@@ -133,6 +148,7 @@ async function addTimeToInitialDisplay({
     return addAutomaticTimeToInitialDisplay({
       event,
       rootSpanId,
+      traceId,
       transactionStartTimestampSeconds,
       enableTimeToInitialDisplayForPreloadedRoutes,
     });
@@ -156,6 +172,7 @@ async function addTimeToInitialDisplay({
     timestamp: ttidEndTimestampSeconds,
     origin: SPAN_ORIGIN_MANUAL_UI_TIME_TO_DISPLAY,
     parent_span_id: rootSpanId,
+    trace_id: traceId,
     data: {
       [SPAN_THREAD_NAME]: SPAN_THREAD_NAME_JAVASCRIPT,
     },
@@ -168,11 +185,13 @@ async function addTimeToInitialDisplay({
 async function addAutomaticTimeToInitialDisplay({
   event,
   rootSpanId,
+  traceId,
   transactionStartTimestampSeconds,
   enableTimeToInitialDisplayForPreloadedRoutes,
 }: {
   event: Event;
   rootSpanId: string;
+  traceId: string;
   transactionStartTimestampSeconds: number;
   enableTimeToInitialDisplayForPreloadedRoutes: boolean;
 }): Promise<SpanJSON | undefined> {
@@ -205,6 +224,7 @@ async function addAutomaticTimeToInitialDisplay({
     timestamp: ttidTimestampSeconds,
     origin: SPAN_ORIGIN_AUTO_UI_TIME_TO_DISPLAY,
     parent_span_id: rootSpanId,
+    trace_id: traceId,
     data: {
       [SPAN_THREAD_NAME]: SPAN_THREAD_NAME_JAVASCRIPT,
     },
@@ -217,11 +237,13 @@ async function addAutomaticTimeToInitialDisplay({
 async function addTimeToFullDisplay({
   event,
   rootSpanId,
+  traceId,
   transactionStartTimestampSeconds,
   ttidSpan,
 }: {
   event: Event;
   rootSpanId: string;
+  traceId: string;
   transactionStartTimestampSeconds: number;
   ttidSpan: SpanJSON | undefined;
 }): Promise<SpanJSON | undefined> {
@@ -271,6 +293,7 @@ async function addTimeToFullDisplay({
     timestamp: ttfdAdjustedEndTimestampSeconds,
     origin: SPAN_ORIGIN_MANUAL_UI_TIME_TO_DISPLAY,
     parent_span_id: rootSpanId,
+    trace_id: traceId,
     data: {
       [SPAN_THREAD_NAME]: SPAN_THREAD_NAME_JAVASCRIPT,
     },

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

@@ -98,6 +98,20 @@ describe('React Navigation - TTID', () => {
       );
     });
 
+    test('automatic ttid span inherits trace_id and parent_span_id from the transaction', () => {
+      jest.runOnlyPendingTimers(); // Flush app start transaction
+
+      mockedNavigation.navigateToNewScreen();
+      mockAutomaticTimeToDisplay();
+      jest.runOnlyPendingTimers(); // Flush ttid transaction
+
+      const transaction = getLastTransaction(transportSendMock);
+      const ttidSpan = transaction.spans?.find(s => s.op === 'ui.load.initial_display');
+      expect(ttidSpan).toBeDefined();
+      expect(ttidSpan?.trace_id).toBe(transaction.contexts?.trace?.trace_id);
+      expect(ttidSpan?.parent_span_id).toBe(transaction.contexts?.trace?.span_id);
+    });
+
     test('should end ttid with measurements even when active span was removed from the scope', () => {
       jest.runOnlyPendingTimers(); // Flush app start transaction
 

packages/core/test/tracing/timetodisplay.test.tsx

@@ -438,6 +438,7 @@ function expectFinishedInitialDisplaySpan(event: Event) {
       description: 'Time To Initial Display',
       op: 'ui.load.initial_display',
       parent_span_id: event.contexts.trace.span_id,
+      trace_id: event.contexts.trace.trace_id,
       start_timestamp: event.start_timestamp,
       status: 'ok',
       timestamp: expect.any(Number),
@@ -456,6 +457,7 @@ function expectFinishedFullDisplaySpan(event: Event) {
       description: 'Time To Full Display',
       op: 'ui.load.full_display',
       parent_span_id: event.contexts.trace.span_id,
+      trace_id: event.contexts.trace.trace_id,
       start_timestamp: event.start_timestamp,
       status: 'ok',
       timestamp: expect.any(Number),
@@ -474,6 +476,7 @@ function expectDeadlineExceededFullDisplaySpan(event: Event) {
       description: 'Time To Full Display',
       op: 'ui.load.full_display',
       parent_span_id: event.contexts.trace.span_id,
+      trace_id: event.contexts.trace.trace_id,
       start_timestamp: event.start_timestamp,
       status: 'deadline_exceeded',
       timestamp: expect.any(Number),