feat(ttd): TimeToInitialDisplay and TimeToFullDisplay start the time to display spans on mount (#4020)

Author: krystofwoldrich

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Features
+
+- `TimeToInitialDisplay` and `TimeToFullDisplay` start the time to display spans on mount ([#4020](https://github.com/getsentry/sentry-react-native/pull/4020))
+
 ### Fixed
 
 - fix(ttid): End and measure TTID regardless current active span ([#4019](https://github.com/getsentry/sentry-react-native/pull/4019))

src/js/tracing/timetodisplay.tsx

@@ -36,6 +36,7 @@ export function TimeToInitialDisplay(props: TimeToDisplayProps): React.ReactElem
   const activeSpan = getActiveSpan();
   if (activeSpan) {
     manualInitialDisplaySpans.set(activeSpan, true);
+    startTimeToInitialDisplaySpan();
   }
 
   return <TimeToDisplay initialDisplay={props.record}>{props.children}</TimeToDisplay>;
@@ -49,6 +50,7 @@ export function TimeToInitialDisplay(props: TimeToDisplayProps): React.ReactElem
  * <TimeToInitialDisplay record />
  */
 export function TimeToFullDisplay(props: TimeToDisplayProps): React.ReactElement {
+  startTimeToFullDisplaySpan();
   return <TimeToDisplay fullDisplay={props.record}>{props.children}</TimeToDisplay>;
 }
 

test/tracing/timetodisplay.test.tsx

@@ -2,7 +2,7 @@ import * as mockedtimetodisplaynative from './mockedtimetodisplaynative';
 jest.mock('../../src/js/tracing/timetodisplaynative', () => mockedtimetodisplaynative);
 
 import type { Span as SpanClass} from '@sentry/core';
-import { getCurrentScope, getGlobalScope, getIsolationScope, setCurrentClient, spanToJSON, startSpanManual} from '@sentry/core';
+import { getActiveSpan, getCurrentScope, getGlobalScope, getIsolationScope, setCurrentClient, spanToJSON, startSpanManual} from '@sentry/core';
 import type { Event, Measurements, Span, SpanJSON} from '@sentry/types';
 import React from "react";
 import TestRenderer from 'react-test-renderer';
@@ -92,6 +92,61 @@ describe('TimeToDisplay', () => {
     expect(spanToJSON(testSpan!).start_timestamp).toEqual(spanToJSON(activeSpan!).start_timestamp);
   });
 
+  test('creates initial display span on first component render', async () => {
+    const [testSpan, activeSpan] = startSpanManual(
+      {
+        name: 'Root Manual Span',
+        startTime: secondAgoTimestampMs(),
+      },
+       (activeSpan: Span | undefined) => {
+        const renderer = TestRenderer.create(<TimeToInitialDisplay record={false} />);
+        const testSpan = (getActiveSpan() as SpanClass).spanRecorder?.spans.find((span) => spanToJSON(span).op === 'ui.load.initial_display');
+
+        renderer.update(<TimeToInitialDisplay record={true} />);
+        emitNativeInitialDisplayEvent();
+
+        activeSpan?.end();
+        return [testSpan, activeSpan];
+      },
+    );
+
+    await jest.runOnlyPendingTimersAsync();
+    await client.flush();
+
+    expectInitialDisplayMeasurementOnSpan(client.event!);
+    expectFinishedInitialDisplaySpan(testSpan, activeSpan);
+    expect(spanToJSON(testSpan!).start_timestamp).toEqual(spanToJSON(activeSpan!).start_timestamp);
+  });
+
+  test('creates full display span on first component render', async () => {
+    const [testSpan, activeSpan] = startSpanManual(
+      {
+        name: 'Root Manual Span',
+        startTime: secondAgoTimestampMs(),
+      },
+      (activeSpan: Span | undefined) => {
+        TestRenderer.create(<TimeToInitialDisplay record={true} />);
+        emitNativeInitialDisplayEvent();
+
+        const renderer = TestRenderer.create(<TimeToFullDisplay record={false} />);
+        const testSpan = (getActiveSpan() as SpanClass).spanRecorder?.spans.find((span) => spanToJSON(span).op === 'ui.load.full_display');
+
+        renderer.update(<TimeToFullDisplay record={true} />);
+        emitNativeFullDisplayEvent();
+
+        activeSpan?.end();
+        return [testSpan, activeSpan];
+      },
+    );
+
+    await jest.runOnlyPendingTimersAsync();
+    await client.flush();
+
+    expectFullDisplayMeasurementOnSpan(client.event!);
+    expectFinishedFullDisplaySpan(testSpan, activeSpan);
+    expect(spanToJSON(testSpan!).start_timestamp).toEqual(spanToJSON(activeSpan!).start_timestamp);
+  });
+
   test('does not create full display when initial display is missing', async () => {
     const [activeSpan] = startSpanManual(
       {