fix(tracing): Use root span ID for imperative TTFD and guard duplicate spans

- Use `getRootSpan` in `reportFullyDisplayed()` so the stored key matches the
  integration's `rootSpanId` lookup, even when called inside a nested child span.
- Add early return in `addTimeToFullDisplay` when an existing ok TTFD span is
  found, preventing duplicate `ui.load.full_display` spans.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: antonis

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

@@ -236,6 +236,11 @@ async function addTimeToFullDisplay({
 
   let ttfdSpan = event.spans?.find(span => span.op === UI_LOAD_FULL_DISPLAY);
 
+  if (ttfdSpan && (ttfdSpan.status === undefined || ttfdSpan.status === 'ok')) {
+    debug.log(`[${INTEGRATION_NAME}] Ttfd span already exists and is ok.`, ttfdSpan);
+    return ttfdSpan;
+  }
+
   let ttfdAdjustedEndTimestampSeconds = ttfdEndTimestampSeconds;
   const ttfdIsBeforeTtid = ttidSpan.timestamp && ttfdEndTimestampSeconds < ttidSpan.timestamp;
   if (ttfdIsBeforeTtid && ttidSpan.timestamp) {

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

@@ -5,6 +5,7 @@ import {
   debug,
   fill,
   getActiveSpan,
+  getRootSpan,
   getSpanDescendants,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SPAN_STATUS_ERROR,
@@ -439,9 +440,10 @@ export function reportFullyDisplayed(): void {
     debug.warn('[TimeToDisplay] No active span found to report full display.');
     return;
   }
-  const spanId = spanToJSON(activeSpan).span_id;
-  if (spanId && !_imperativeTtfdTimestamps.has(spanId)) {
-    _imperativeTtfdTimestamps.set(spanId, Date.now() / 1000);
+  const rootSpan = getRootSpan(activeSpan);
+  const rootSpanId = spanToJSON(rootSpan).span_id;
+  if (rootSpanId && !_imperativeTtfdTimestamps.has(rootSpanId)) {
+    _imperativeTtfdTimestamps.set(rootSpanId, Date.now() / 1000);
   }
 }
 

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

@@ -7,6 +7,7 @@ import {
   getIsolationScope,
   setCurrentClient,
   spanToJSON,
+  startSpan,
   startSpanManual,
 } from '@sentry/core';
 
@@ -1117,6 +1118,41 @@ describe('reportFullyDisplayed', () => {
     expect(getFullDisplaySpanJSON(client.event!.spans!)).toBeUndefined();
   });
 
+  test('works when called inside a nested child span', async () => {
+    const ttidTimestamp = nowInSeconds();
+
+    startSpanManual(
+      {
+        name: 'Root Manual Span',
+        startTime: secondAgoTimestampMs(),
+      },
+      (activeSpan: Span | undefined) => {
+        render(<TimeToInitialDisplay record={true} />);
+
+        mockRecordedTimeToDisplay({
+          ttid: {
+            [spanToJSON(activeSpan).span_id]: ttidTimestamp,
+          },
+        });
+
+        startSpan({ name: 'child-span' }, () => {
+          reportFullyDisplayed();
+        });
+
+        activeSpan?.end();
+      },
+    );
+
+    await jest.runOnlyPendingTimersAsync();
+    await client.flush();
+
+    const ttfdSpan = getFullDisplaySpanJSON(client.event!.spans!);
+    expect(ttfdSpan).toBeDefined();
+    expect(ttfdSpan!.op).toBe('ui.load.full_display');
+    expect(ttfdSpan!.status).toBe('ok');
+    expectFullDisplayMeasurementOnSpan(client.event!);
+  });
+
   test('second call is ignored', async () => {
     startSpanManual(
       {