Fix: Implement fallback system to screens that aren't reporting on the native layer the time to display.

android/src/main/java/io/sentry/react/RNSentryModuleImpl.java

@@ -1,5 +1,5 @@
 package io.sentry.react;
-
+import android.view.Choreographer;
 import static java.util.concurrent.TimeUnit.SECONDS;
 import static io.sentry.android.core.internal.util.ScreenshotUtils.takeScreenshot;
 import static io.sentry.vendor.Base64.NO_PADDING;

android/src/main/java/io/sentry/react/RNSentryPackage.java

@@ -20,9 +20,9 @@ public class RNSentryPackage extends TurboReactPackage {
   @Nullable
   @Override
   public NativeModule getModule(String name, ReactApplicationContext reactContext) {
-    if (name.equals(RNSentryModuleImpl.NAME)) {
-      return new RNSentryModule(reactContext);
-    } else {
+      if (name.equals(RNSentryModuleImpl.NAME)) {
+        return new RNSentryModule(reactContext);
+      } else {
       return null;
     }
   }
@@ -55,5 +55,4 @@ public List<ViewManager> createViewManagers(
           new RNSentryOnDrawReporterManager(reactContext)
     );
   }
-
 }

android/src/main/java/io/sentry/react/RNSentryTimeToDisplayModule.java

@@ -0,0 +1,42 @@
+package io.sentry.react;
+
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.turbomodule.core.interfaces.TurboModule;
+
+import android.view.Choreographer;
+
+import androidx.annotation.NonNull;
+
+import org.jetbrains.annotations.NotNull;
+import io.sentry.SentryDate;
+import io.sentry.SentryDateProvider;
+import io.sentry.android.core.SentryAndroidDateProvider;
+
+
+public class RNSentryTimeToDisplayModule extends NativeRNSentryTimeToDisplaySpec {
+
+
+    public RNSentryTimeToDisplayModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    @ReactMethod
+    public void requestAnimationFrame(Promise promise) {
+        Choreographer choreographer = Choreographer.getInstance();
+
+        // Invoke the callback after the frame is rendered
+        choreographer.postFrameCallback(new Choreographer.FrameCallback() {
+            @Override
+            public void doFrame(long frameTimeNanos) {
+                final @NotNull SentryDateProvider dateProvider = new SentryAndroidDateProvider();
+
+                final SentryDate endDate = dateProvider.now();
+
+                promise.resolve(endDate.nanoTimestamp() / 1e9);
+            }
+        });
+    }
+}

android/src/main/java/io/sentry/react/RNSentryTimeToDisplayPackage.java

@@ -0,0 +1,45 @@
+package io.sentry.react;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.TurboReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class RNSentryTimeToDisplayPackage extends TurboReactPackage {
+
+    @Nullable
+    @Override
+    public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+        if (name.equals(RNSentryTimeToDisplayModule.NAME)) {
+            return new RNSentryTimeToDisplayModule(reactContext);
+        } else {
+            return null;
+        }
+    }
+
+    @Override
+    public ReactModuleInfoProvider getReactModuleInfoProvider() {
+        return () -> {
+            final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
+            boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+            moduleInfos.put(
+                    RNSentryTimeToDisplayModule.NAME,
+                    new ReactModuleInfo(
+                            RNSentryTimeToDisplayModule.NAME,
+                            RNSentryTimeToDisplayModule.NAME,
+                            false, // canOverrideExistingModule
+                            false, // needsEagerInit
+                            true, // hasConstants
+                            false, // isCxxModule
+                            isTurboModule // isTurboModule
+                    ));
+            return moduleInfos;
+        };
+    }
+}

ios/RNSentryTimeToDisplay.h

@@ -0,0 +1,7 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RNSentryTimeToDisplay : NSObject <RCTBridgeModule>
+
+- (void)requestAnimationFrame:(RCTPromiseResolveBlock)resolve
+                    rejecter:(RCTPromiseRejectBlock)reject;
+@end

ios/RNSentryTimeToDisplay.m

@@ -0,0 +1,38 @@
+#import "RNSentryTimeToDisplay.h"
+#import <QuartzCore/QuartzCore.h>
+#import <React/RCTLog.h>
+
+@implementation RNSentryTimeToDisplay
+{
+  CADisplayLink *displayLink;
+  RCTPromiseResolveBlock resolveBlock;
+}
+
+RCT_EXPORT_MODULE();
+
+RCT_EXPORT_METHOD(requestAnimationFrame:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+  // Store the resolve block to use in the callback
+  resolveBlock = resolve;
+
+  // Create and add a display link to get the callback after the screen is rendered
+  displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplayLink:)];
+  [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
+}
+
+- (void)handleDisplayLink:(CADisplayLink *)link
+{
+  NSTimeInterval currentTime = [[NSDate date] timeIntervalSince1970];
+
+  if (resolveBlock) {
+    resolveBlock(@(currentTime));
+    resolveBlock = nil;
+  }
+
+  // Invalidate the display link
+  [displayLink invalidate];
+  displayLink = nil;
+}
+
+@end

react-native.config.js

@@ -3,8 +3,8 @@ module.exports = {
     platforms: {
       ios: {},
       android: {
-        packageInstance: 'new RNSentryPackage()',
-        packageImportPath: 'import io.sentry.react.RNSentryPackage;'
+        packageInstance: 'new RNSentryPackage(),\n      new RNSentryTimeToDisplayPackage()',
+        packageImportPath: 'import io.sentry.react.RNSentryPackage;\nimport io.sentry.react.RNSentryTimeToDisplayPackage;'
       }
     }
   }

samples/react-native/src/Screens/PerformanceScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   StatusBar,
   ScrollView,
@@ -32,6 +32,16 @@ const PerformanceScreen = (props: Props) => {
       }),
     );
   };
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    // Simulate heavy computation for 5 seconds
+    const start = Date.now();
+    while (Date.now() - start < 5000) {
+      // Perform some meaningless computation to occupy the CPU
+      Math.sqrt(Math.random() * Math.random());
+    }
+    setIsLoading(false);
+  }, []);
 
   return (
     <>

src/js/NativeRNSentry.ts

@@ -16,6 +16,7 @@ export interface Spec extends TurboModule {
       hardCrashed: boolean;
     },
   ): Promise<boolean>;
+
   captureScreenshot(): Promise<NativeScreenshot[] | undefined | null>;
   clearBreadcrumbs(): void;
   crash(): void;
@@ -153,5 +154,9 @@ export type NativeScreenshot = {
   filename: string;
 };
 
+export interface RNSentryTimeToDisplayModuleSpec {
+  requestAnimationFrame(): Promise<number>;
+}
+
 // The export must be here to pass codegen even if not used
 export default TurboModuleRegistry.getEnforcing<Spec>('RNSentry');

src/js/NativeRNSentryTimeToDisplay.ts

@@ -0,0 +1,11 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+// There has to be only one interface and it has to be named `Spec`
+// Only extra allowed definitions are types (probably codegen bug)
+export interface Spec extends TurboModule {
+  requestAnimationFrame(): Promise<number>;
+}
+
+// The export must be here to pass codegen even if not used
+export default TurboModuleRegistry.getEnforcing<Spec>('RNSentryTimeToDisplay');

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';
@@ -78,7 +79,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;
@@ -101,7 +102,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}`);
       });
@@ -247,8 +250,8 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
               isAutoInstrumented: true,
             });
 
-          !routeHasBeenSeen &&
-            latestTtidSpan &&
+          if (!routeHasBeenSeen && latestTtidSpan) {
+            this._newFallbackEventEmitter?.startListenerAsync();
             this._newScreenFrameEventEmitter?.once(
               NewFrameEventName,
               ({ newFrameTimestampInSeconds }: NewFrameEvent) => {
@@ -265,6 +268,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,114 @@
+import { logger } from '@sentry/utils';
+import type { EmitterSubscription } from 'react-native';
+import { DeviceEventEmitter, NativeModules } from 'react-native';
+
+import type { Spec } from '../NativeRNSentryTimeToDisplay';
+import { NATIVE } from '../wrapper';
+import { isTurboModuleEnabled } from './environment';
+import { ReactNativeLibraries } from './rnlibraries';
+import { NewFrameEventName } from './sentryeventemitter';
+
+function getTimeToDisplayModule(): Spec | undefined {
+  return isTurboModuleEnabled()
+    ? ReactNativeLibraries.TurboModuleRegistry &&
+        ReactNativeLibraries.TurboModuleRegistry.get<Spec>('RNSentryTimeToDisplay')
+    : NativeModules.RNSentryTimeToDisplay;
+}
+
+const RNSentryTimeToDisplay: Spec | undefined = getTimeToDisplayModule();
+
+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.
+   */
+  initAsync: () => void;
+  closeAll: () => 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;
+
+  function defaultFallbackEventEmitter(): void {
+    // Schedule the callback to be executed when all UI Frames have flushed.
+    requestAnimationFrame(() => {
+      if (NativeEmitterCalled) {
+        NativeEmitterCalled = false;
+        isListening = false;
+        return;
+      }
+      const timestampInSeconds = timeNowNanosecond();
+      waitForNativeResponseOrFallback(timestampInSeconds, 'JavaScript');
+    });
+  }
+
+  function waitForNativeResponseOrFallback(fallbackSeconds: number, origin: string): void {
+    const maxRetries = 3;
+    let retries = 0;
+
+    const retryCheck = (): void => {
+      if (NativeEmitterCalled) {
+        NativeEmitterCalled = false;
+        isListening = false;
+        return; // Native Replied the bridge with a timestamp.
+      }
+
+      retries++;
+      if (retries < maxRetries) {
+        setTimeout(retryCheck, 1_000);
+      } else {
+        logger.log(`[Sentry] Native event emitter did not reply in time. Using ${origin} fallback emitter.`);
+        isListening = false;
+        DeviceEventEmitter.emit(NewFrameEventName, {
+          newFrameTimestampInSeconds: fallbackSeconds,
+          isFallback: true,
+        });
+      }
+    };
+
+    // Start the retry process
+    retryCheck();
+  }
+
+  return {
+    initAsync() {
+      subscription = DeviceEventEmitter.addListener(NewFrameEventName, () => {
+        // Avoid noise from pages that we do not want to track.
+        if (isListening) {
+          NativeEmitterCalled = true;
+        }
+      });
+    },
+
+    startListenerAsync() {
+      isListening = true;
+      if (NATIVE.isNativeAvailable() && RNSentryTimeToDisplay !== undefined) {
+        RNSentryTimeToDisplay.requestAnimationFrame()
+          .then((time: number) => {
+            waitForNativeResponseOrFallback(time, 'Native');
+          })
+          .catch((reason: Error) => {
+            logger.error('Failed to recceive Native fallback timestamp.', reason);
+            defaultFallbackEventEmitter();
+          });
+      } else {
+        defaultFallbackEventEmitter();
+      }
+    },
+
+    closeAll() {
+      subscription?.remove();
+    },
+  };
+}