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

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Fixes
 
+- Enhanced accuracy of time-to-display spans. ([#4042](https://github.com/getsentry/sentry-react-native/pull/4042))
 - TimetoTisplay correctly warns about not supporting the new React Native architecture ([#4160](https://github.com/getsentry/sentry-react-native/pull/4160))
 - Handles error with string cause ([#4163](https://github.com/getsentry/sentry-react-native/pull/4163))
 - Use `appLaunchedInForeground` to determine invalid app start data on Android ([#4146](https://github.com/getsentry/sentry-react-native/pull/4146))

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

@@ -41,15 +41,11 @@
 import java.io.InputStream;
 import java.nio.charset.Charset;
 import java.util.HashMap;
-import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
 import java.util.Properties;
-import java.util.Set;
 import java.util.concurrent.CountDownLatch;
 
-import io.sentry.Breadcrumb;
-import io.sentry.DateUtils;
 import io.sentry.HubAdapter;
 import io.sentry.ILogger;
 import io.sentry.ISentryExecutorService;
@@ -135,10 +131,13 @@ public class RNSentryModuleImpl {
     /** Max trace file size in bytes. */
     private long maxTraceFileSize = 5 * 1024 * 1024;
 
+    private final @NotNull SentryDateProvider dateProvider;
+
     public RNSentryModuleImpl(ReactApplicationContext reactApplicationContext) {
       packageInfo = getPackageInfo(reactApplicationContext);
       this.reactApplicationContext = reactApplicationContext;
       this.emitNewFrameEvent = createEmitNewFrameEvent();
+      this.dateProvider = new SentryAndroidDateProvider();
     }
 
     private ReactApplicationContext getReactApplicationContext() {
@@ -150,8 +149,6 @@ private ReactApplicationContext getReactApplicationContext() {
     }
 
     private @NotNull Runnable createEmitNewFrameEvent() {
-        final @NotNull SentryDateProvider dateProvider = new SentryAndroidDateProvider();
-
         return () -> {
           final SentryDate endDate = dateProvider.now();
           WritableMap event = Arguments.createMap();
@@ -701,6 +698,10 @@ public void disableNativeFramesTracking() {
         }
     }
 
+    public void getNewScreenTimeToDisplay(Promise promise) {
+        RNSentryTimeToDisplay.GetTimeToDisplay(promise, dateProvider);
+    }
+
     private String getProfilingTracesDirPath() {
         if (cacheDirPath == null) {
             cacheDirPath = new File(getReactApplicationContext().getCacheDir(), "sentry/react").getAbsolutePath();

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

@@ -55,5 +55,4 @@ public List<ViewManager> createViewManagers(
           new RNSentryOnDrawReporterManager(reactContext)
     );
   }
-
 }

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

@@ -0,0 +1,28 @@
+package io.sentry.react;
+
+import com.facebook.react.bridge.Promise;
+
+import android.view.Choreographer;
+
+import org.jetbrains.annotations.NotNull;
+import io.sentry.SentryDate;
+import io.sentry.SentryDateProvider;
+import io.sentry.android.core.SentryAndroidDateProvider;
+
+public class RNSentryTimeToDisplay {
+    public static void GetTimeToDisplay(Promise promise, SentryDateProvider dateProvider) {
+        try {
+            Choreographer choreographer = Choreographer.getInstance();
+
+            // Invoke the callback after the frame is rendered
+            choreographer.postFrameCallback(frameTimeNanos -> {
+                final SentryDate endDate = dateProvider.now();
+
+                promise.resolve(endDate.nanoTimestamp() / 1e9);
+            });
+        }
+        catch (Exception exception) {
+            promise.reject("Failed to receive the instance of Choreographer" ,exception);
+        }
+    }
+}

android/src/newarch/java/io/sentry/react/RNSentryModule.java

@@ -173,4 +173,9 @@ public String getCurrentReplayId() {
     public void crashedLastRun(Promise promise) {
         this.impl.crashedLastRun(promise);
     }
+
+    @Override
+    public void getNewScreenTimeToDisplay(Promise promise) {
+        this.impl.getNewScreenTimeToDisplay(promise);
+    }
 }

android/src/oldarch/java/io/sentry/react/RNSentryModule.java

@@ -173,4 +173,9 @@ public String getCurrentReplayId() {
     public void crashedLastRun(Promise promise) {
         this.impl.crashedLastRun(promise);
     }
+
+    @ReactMethod()
+    public void getNewScreenTimeToDisplay(Promise promise) {
+        this.impl.getNewScreenTimeToDisplay(promise);
+    }
 }

ios/RNSentry.mm

@@ -1,5 +1,6 @@
 #import <dlfcn.h>
 #import "RNSentry.h"
+#import "RNSentryTimeToDisplay.h"
 
 #if __has_include(<React/RCTConvert.h>)
 #import <React/RCTConvert.h>
@@ -62,6 +63,7 @@ + (void)storeEnvelope:(SentryEnvelope *)envelope;
 @implementation RNSentry {
     bool sentHybridSdkDidBecomeActive;
     bool hasListeners;
+    RNSentryTimeToDisplay *_timeToDisplay;
 }
 
 - (dispatch_queue_t)methodQueue
@@ -106,6 +108,8 @@ + (BOOL)requiresMainQueueSetup {
         sentHybridSdkDidBecomeActive = true;
     }
 
+    _timeToDisplay = [[RNSentryTimeToDisplay alloc] init];
+
 #if SENTRY_TARGET_REPLAY_SUPPORTED
     [RNSentryReplay postInit];
 #endif
@@ -778,4 +782,9 @@ - (NSDictionary*) fetchNativeStackFramesBy: (NSArray<NSNumber*>*)instructionsAdd
 }
 #endif
 
+RCT_EXPORT_METHOD(getNewScreenTimeToDisplay:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject) {
+    [_timeToDisplay getTimeToDisplay:resolve];
+}
+
 @end

ios/RNSentryTimeToDisplay.h

@@ -0,0 +1,7 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RNSentryTimeToDisplay : NSObject
+
+- (void)getTimeToDisplay:(RCTResponseSenderBlock)callback;
+
+@end

ios/RNSentryTimeToDisplay.m

@@ -0,0 +1,43 @@
+#import "RNSentryTimeToDisplay.h"
+#import <QuartzCore/QuartzCore.h>
+#import <React/RCTLog.h>
+
+@implementation RNSentryTimeToDisplay
+{
+  CADisplayLink *displayLink;
+  RCTResponseSenderBlock resolveBlock;
+}
+
+// Rename requestAnimationFrame to getTimeToDisplay
+- (void)getTimeToDisplay:(RCTResponseSenderBlock)callback
+{
+  // Store the resolve block to use in the callback.
+  resolveBlock = callback;
+
+#if TARGET_OS_IOS
+  // 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];
+#else
+  resolveBlock(@[]); // Return nothing if not iOS.
+#endif
+}
+
+#if TARGET_OS_IOS
+- (void)handleDisplayLink:(CADisplayLink *)link {
+  // Get the current time
+  NSTimeInterval currentTime = [[NSDate date] timeIntervalSince1970] * 1000.0; // Convert to milliseconds
+
+  // Ensure the callback is valid and pass the current time back
+  if (resolveBlock) {
+    resolveBlock(@[@(currentTime)]); // Call the callback with the current time
+    resolveBlock = nil; // Clear the block after it's called
+  }
+
+  // Invalidate the display link to stop future callbacks
+  [displayLink invalidate];
+  displayLink = nil;
+}
+#endif
+
+@end

src/js/NativeRNSentry.ts

@@ -9,13 +9,15 @@ import type { UnsafeObject } from './utils/rnlibrariesinterface';
 export interface Spec extends TurboModule {
   addListener: (eventType: string) => void;
   removeListeners: (id: number) => void;
+  getNewScreenTimeToDisplay(): Promise<number | undefined | null>;
   addBreadcrumb(breadcrumb: UnsafeObject): void;
   captureEnvelope(
     bytes: string,
     options: {
       hardCrashed: boolean;
     },
   ): Promise<boolean>;
+
   captureScreenshot(): Promise<NativeScreenshot[] | undefined | null>;
   clearBreadcrumbs(): void;
   crash(): void;

src/js/tracing/reactnavigation.ts

@@ -4,7 +4,8 @@ import type { Span, Transaction as TransactionType, TransactionContext } from '@
 import { logger, timestampInSeconds } from '@sentry/utils';
 
 import type { NewFrameEvent } from '../utils/sentryeventemitter';
-import { type SentryEventEmitter, createSentryEventEmitter, NewFrameEventName } from '../utils/sentryeventemitter';
+import type { SentryEventEmitterFallback } from '../utils/sentryeventemitterfallback';
+import { createSentryFallbackEventEmitter } from '../utils/sentryeventemitterfallback';
 import { RN_GLOBAL_OBJ } from '../utils/worldwide';
 import { NATIVE } from '../wrapper';
 import type { OnConfirmRoute, TransactionCreator } from './routingInstrumentation';
@@ -77,16 +78,15 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
   public readonly name: string = ReactNavigationInstrumentation.instrumentationName;
 
   private _navigationContainer: NavigationContainer | null = null;
-  private _newScreenFrameEventEmitter: SentryEventEmitter | null = null;
-
+  private _newScreenFrameEventEmitter: SentryEventEmitterFallback | null = null;
   private readonly _maxRecentRouteLen: number = 200;
 
   private _latestRoute?: NavigationRoute;
   private _latestTransaction?: TransactionType;
   private _navigationProcessingSpan?: Span;
 
   private _initialStateHandled: boolean = false;
-  private _stateChangeTimeout?: number | undefined;
+  private _stateChangeTimeout?: ReturnType<typeof setTimeout> | undefined;
   private _recentRouteKeys: string[] = [];
 
   private _options: ReactNavigationOptions;
@@ -100,8 +100,8 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
     };
 
     if (this._options.enableTimeToInitialDisplay) {
-      this._newScreenFrameEventEmitter = createSentryEventEmitter();
-      this._newScreenFrameEventEmitter.initAsync(NewFrameEventName);
+      this._newScreenFrameEventEmitter = createSentryFallbackEventEmitter();
+      this._newScreenFrameEventEmitter.initAsync();
       NATIVE.initNativeReactNavigationNewFrameTracking().catch((reason: unknown) => {
         logger.error(`[ReactNavigationInstrumentation] Failed to initialize native new frame tracking: ${reason}`);
       });
@@ -247,24 +247,21 @@ export class ReactNavigationInstrumentation extends InternalRoutingInstrumentati
               isAutoInstrumented: true,
             });
 
-          !routeHasBeenSeen &&
-            latestTtidSpan &&
-            this._newScreenFrameEventEmitter?.once(
-              NewFrameEventName,
-              ({ newFrameTimestampInSeconds }: NewFrameEvent) => {
-                const activeSpan = getActiveSpan();
-                if (activeSpan && manualInitialDisplaySpans.has(activeSpan)) {
-                  logger.warn(
-                    '[ReactNavigationInstrumentation] Detected manual instrumentation for the current active span.',
-                  );
-                  return;
-                }
-
-                latestTtidSpan.setStatus('ok');
-                latestTtidSpan.end(newFrameTimestampInSeconds);
-                setSpanDurationAsMeasurementOnTransaction(latestTransaction, 'time_to_initial_display', latestTtidSpan);
-              },
-            );
+          if (!routeHasBeenSeen && latestTtidSpan) {
+            this._newScreenFrameEventEmitter?.onceNewFrame(({ newFrameTimestampInSeconds }: NewFrameEvent) => {
+              const activeSpan = getActiveSpan();
+              if (activeSpan && manualInitialDisplaySpans.has(activeSpan)) {
+                logger.warn(
+                  '[ReactNavigationInstrumentation] Detected manual instrumentation for the current active span.',
+                );
+                return;
+              }
+
+              latestTtidSpan.setStatus('ok');
+              latestTtidSpan.end(newFrameTimestampInSeconds);
+              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,98 @@
+import { logger, timestampInSeconds } from '@sentry/utils';
+
+import { NATIVE } from '../wrapper';
+import type { NewFrameEvent, SentryEventEmitter } from './sentryeventemitter';
+import { createSentryEventEmitter, NewFrameEventName } from './sentryeventemitter';
+
+export const FALLBACK_TIMEOUT_MS = 10_000;
+
+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;
+  onceNewFrame: (listener: (event: FallBackNewFrameEvent) => void) => void;
+}
+
+/**
+ * Creates emitter that allows to listen to UI Frame events when ready.
+ */
+export function createSentryFallbackEventEmitter(
+  emitter: SentryEventEmitter = createSentryEventEmitter(),
+  fallbackTimeoutMs = FALLBACK_TIMEOUT_MS,
+): SentryEventEmitterFallback {
+  let fallbackTimeout: ReturnType<typeof setTimeout> | undefined;
+  let animationFrameTimestampSeconds: number | undefined;
+  let nativeNewFrameTimestampSeconds: number | undefined;
+
+  function getAnimationFrameTimestampSeconds(): void {
+    // https://reactnative.dev/docs/timers#timers
+    // NOTE: The current implementation of requestAnimationFrame is the same
+    // as setTimeout(0). This isn't exactly how requestAnimationFrame
+    // is supposed to work on web, so it doesn't get called when UI Frames are rendered.: https://github.com/facebook/react-native/blob/5106933c750fee2ce49fe1945c3e3763eebc92bc/packages/react-native/ReactCommon/react/runtime/TimerManager.cpp#L442-L443
+    requestAnimationFrame(() => {
+      if (fallbackTimeout === undefined) {
+        return;
+      }
+      animationFrameTimestampSeconds = timestampInSeconds();
+    });
+  }
+
+  function getNativeNewFrameTimestampSeconds(): void {
+    NATIVE.getNewScreenTimeToDisplay()
+      .then(resolve => {
+        if (fallbackTimeout === undefined) {
+          return;
+        }
+        nativeNewFrameTimestampSeconds = resolve ?? undefined;
+      })
+      .catch(reason => {
+        logger.error('Failed to receive Native fallback timestamp.', reason);
+      });
+  }
+
+  return {
+    initAsync() {
+      emitter.initAsync(NewFrameEventName);
+    },
+
+    onceNewFrame(listener: (event: FallBackNewFrameEvent) => void) {
+      animationFrameTimestampSeconds = undefined;
+      nativeNewFrameTimestampSeconds = undefined;
+
+      const internalListener = (event: NewFrameEvent): void => {
+        if (fallbackTimeout !== undefined) {
+          clearTimeout(fallbackTimeout);
+          fallbackTimeout = undefined;
+        }
+        animationFrameTimestampSeconds = undefined;
+        nativeNewFrameTimestampSeconds = undefined;
+        listener(event);
+      };
+      fallbackTimeout = setTimeout(() => {
+        if (nativeNewFrameTimestampSeconds) {
+          logger.log('Native event emitter did not reply in time');
+          return listener({
+            newFrameTimestampInSeconds: nativeNewFrameTimestampSeconds,
+            isFallback: true,
+          });
+        } else if (animationFrameTimestampSeconds) {
+          logger.log('[Sentry] Native event emitter did not reply in time. Using JavaScript fallback emitter.');
+          return listener({
+            newFrameTimestampInSeconds: animationFrameTimestampSeconds,
+            isFallback: true,
+          });
+        } else {
+          emitter.removeListener(NewFrameEventName, internalListener);
+          logger.error('Failed to receive any fallback timestamp.');
+        }
+      }, fallbackTimeoutMs);
+
+      getNativeNewFrameTimestampSeconds();
+      getAnimationFrameTimestampSeconds();
+      emitter.once(NewFrameEventName, internalListener);
+    },
+  };
+}