Merge branch 'main' into antonis/fix/ttid-fallback-nsarray

Author: alwx

CHANGELOG.md

@@ -15,6 +15,7 @@
 ### Fixes
 
 - Fix iOS time-to-initial-display fallback spans reporting a spurious `deadline_exceeded` status and inflated duration ([#6438](https://github.com/getsentry/sentry-react-native/pull/6438))
+- Fix orphaned TTID/TTFD spans in the trace view ([#6437](https://github.com/getsentry/sentry-react-native/pull/6437))
 
 ## 8.18.0
 

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

@@ -40,6 +40,14 @@ export const timeToDisplayIntegration = (): Integration => {
         return event;
       }
 
+      // `trace_id` is a required field of a transaction's trace context and is
+      // always present here alongside `rootSpanId`. Read it (instead of early
+      // returning) so the TTID/TTFD spans inherit the transaction's trace and
+      // nest correctly, and so we never skip the coordinator cleanup at the end
+      // of `processEvent`. If it were ever absent, `createSpanJSON` keeps its
+      // existing behavior of generating one.
+      const traceId = event.contexts?.trace?.trace_id;
+
       const transactionStartTimestampSeconds = event.start_timestamp;
       if (!transactionStartTimestampSeconds) {
         // This should never happen
@@ -53,10 +61,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 +124,13 @@ export const timeToDisplayIntegration = (): Integration => {
 async function addTimeToInitialDisplay({
   event,
   rootSpanId,
+  traceId,
   transactionStartTimestampSeconds,
   enableTimeToInitialDisplayForPreloadedRoutes,
 }: {
   event: Event;
   rootSpanId: string;
+  traceId: string | undefined;
   transactionStartTimestampSeconds: number;
   enableTimeToInitialDisplayForPreloadedRoutes: boolean;
 }): Promise<SpanJSON | undefined> {
@@ -133,6 +150,7 @@ async function addTimeToInitialDisplay({
     return addAutomaticTimeToInitialDisplay({
       event,
       rootSpanId,
+      traceId,
       transactionStartTimestampSeconds,
       enableTimeToInitialDisplayForPreloadedRoutes,
     });
@@ -156,6 +174,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 +187,13 @@ async function addTimeToInitialDisplay({
 async function addAutomaticTimeToInitialDisplay({
   event,
   rootSpanId,
+  traceId,
   transactionStartTimestampSeconds,
   enableTimeToInitialDisplayForPreloadedRoutes,
 }: {
   event: Event;
   rootSpanId: string;
+  traceId: string | undefined;
   transactionStartTimestampSeconds: number;
   enableTimeToInitialDisplayForPreloadedRoutes: boolean;
 }): Promise<SpanJSON | undefined> {
@@ -205,6 +226,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 +239,13 @@ async function addAutomaticTimeToInitialDisplay({
 async function addTimeToFullDisplay({
   event,
   rootSpanId,
+  traceId,
   transactionStartTimestampSeconds,
   ttidSpan,
 }: {
   event: Event;
   rootSpanId: string;
+  traceId: string | undefined;
   transactionStartTimestampSeconds: number;
   ttidSpan: SpanJSON | undefined;
 }): Promise<SpanJSON | undefined> {
@@ -271,6 +295,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),