Merge d0c0cf7 into 0abe24e

Author: lucas-zimerman

src/js/tracing/reactnavigation.ts

@@ -5,6 +5,7 @@ import { logger, timestampInSeconds } from '@sentry/utils';
 
 import type { NewFrameEvent } from '../utils/sentryeventemitter';
 import { type SentryEventEmitter, createSentryEventEmitter, NewFrameEventName } from '../utils/sentryeventemitter';
+import { type SentryEventEmitterFallback, createSentryFallbackEventEmitter } from '../utils/sentryeventemitterfallback';
 import { RN_GLOBAL_OBJ } from '../utils/worldwide';
 import { NATIVE } from '../wrapper';
 import type { OnConfirmRoute, TransactionCreator } from './routingInstrumentation';
@@ -69,7 +70,7 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
 
   private _navigationContainer: NavigationContainer | null = null;
   private _newScreenFrameEventEmitter: SentryEventEmitter | null = null;
-
+  private _newFallbackEventEmitter: SentryEventEmitterFallback | null = null;
   private readonly _maxRecentRouteLen: number = 200;
 
   private _latestRoute?: NavigationRoute;
@@ -92,7 +93,9 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
 
     if (this._options.enableTimeToInitialDisplay) {
       this._newScreenFrameEventEmitter = createSentryEventEmitter();
+      this._newFallbackEventEmitter = createSentryFallbackEventEmitter();
       this._newScreenFrameEventEmitter.initAsync(NewFrameEventName);
+      this._newFallbackEventEmitter.initAsync();
       NATIVE.initNativeReactNavigationNewFrameTracking().catch((reason: unknown) => {
         logger.error(`[ReactNavigationInstrumentation] Failed to initialize native new frame tracking: ${reason}`);
       });
@@ -238,8 +241,8 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
               isAutoInstrumented: true,
             });
 
-          !routeHasBeenSeen &&
-            latestTtidSpan &&
+          if (!routeHasBeenSeen && latestTtidSpan) {
+            this._newFallbackEventEmitter?.startListenerAsync();
             this._newScreenFrameEventEmitter?.once(
               NewFrameEventName,
               ({ newFrameTimestampInSeconds }: NewFrameEvent) => {
@@ -256,6 +259,7 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
                 setSpanDurationAsMeasurementOnTransaction(latestTransaction, 'time_to_initial_display', latestTtidSpan);
               },
             );
+          }
 
           this._navigationProcessingSpan?.updateName(`Processing navigation to ${route.name}`);
           this._navigationProcessingSpan?.setStatus('ok');

src/js/utils/sentryeventemitterfallback.ts

@@ -0,0 +1,82 @@
+import { logger } from '@sentry/utils';
+import type { EmitterSubscription } from 'react-native';
+import { DeviceEventEmitter } from 'react-native';
+
+import  { NewFrameEventName } from './sentryeventemitter';
+
+export type FallBackNewFrameEvent = { newFrameTimestampInSeconds: number, isFallback?: boolean };
+export interface SentryEventEmitterFallback {
+  /**
+   * Initializes the fallback event emitter
+   * This method is synchronous in JS but the event emitter starts asynchronously
+   * https://github.com/facebook/react-native/blob/d09c02f9e2d468e4d0bde51890e312ae7003a3e6/packages/react-native/React/Modules/RCTEventEmitter.m#L95
+   */
+  initAsync: () => void;
+  closeAllAsync: () => void;
+  startListenerAsync: () => void;
+}
+
+function timeNowNanosecond(): number {
+  return Date.now() / 1000; // Convert to nanoseconds
+}
+
+/**
+ * Creates emitter that allows to listen to UI Frame events when ready.
+ */
+export function createSentryFallbackEventEmitter(): SentryEventEmitterFallback {
+  let  NativeEmitterCalled: boolean = false;
+  let subscription: EmitterSubscription | undefined = undefined;
+  let isListening = false;
+  return {
+    initAsync() {
+
+      subscription = DeviceEventEmitter.addListener(NewFrameEventName, () => {
+        // Avoid noise from pages that we do not want to track.
+        if (isListening) {
+          NativeEmitterCalled = true;
+        }
+      });
+    },
+
+    startListenerAsync() {
+      isListening = true;
+
+      // Schedule the callback to be executed when all UI Frames have flushed.
+      requestAnimationFrame(() => {
+        if (NativeEmitterCalled) {
+          NativeEmitterCalled = false;
+          isListening = false;
+          return;
+        }
+        const timestampInSeconds = timeNowNanosecond();
+        const maxRetries = 3;
+        let retries = 0;
+
+        const retryCheck = (): void => {
+          if (NativeEmitterCalled) {
+            NativeEmitterCalled = false;
+            isListening = false;
+            return; // Native Repplied the bridge with a given timestamp.
+          }
+
+          retries++;
+          if (retries < maxRetries) {
+            setTimeout(retryCheck, 1_000);
+          } else {
+            logger.log('Native timestamp did not reply in time, using fallback.');
+            isListening = false;
+            DeviceEventEmitter.emit(NewFrameEventName, { newFrameTimestampInSeconds: timestampInSeconds, isFallback: true });
+          }
+        };
+
+        // Start the retry process
+        retryCheck();
+
+      });
+    },
+
+    closeAllAsync() {
+      subscription?.remove();
+    }
+  }
+}