wip!: Add TimeToDisplay integration to force fetch the data

Author: krystofwoldrich

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

@@ -717,6 +717,14 @@ public void clearBreadcrumbs() {
         });
   }
 
+  public void popTimeToDisplayFor(String screenId, Promise promise) {
+    if (screenId != null) {
+      promise.resolve(RNSentryTimeToDisplay.popTimeToDisplayFor(screenId));
+    } else {
+      promise.resolve(RNSentryTimeToDisplay.popAnonymousTimeToDisplay());
+    }
+  }
+
   public void setExtra(String key, String extra) {
     if (key == null || extra == null) {
       logger.log(

packages/core/android/src/main/java/io/sentry/react/RNSentryOnDrawReporterManager.java

@@ -57,12 +57,9 @@ public void setFullDisplay(RNSentryOnDrawReporterView view, boolean fullDisplay)
     view.setFullDisplay(fullDisplay);
   }
 
-  public Map getExportedCustomBubblingEventTypeConstants() {
-    return MapBuilder.builder()
-        .put(
-            "onDrawNextFrameView",
-            MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", "onDrawNextFrame")))
-        .build();
+  @ReactProp(name = "parentSpanId")
+  public void setParentSpanId(RNSentryOnDrawReporterView view, String parentSpanId) {
+    view.setParentSpanId(parentSpanId);
   }
 
   public static class RNSentryOnDrawReporterView extends View {
@@ -71,52 +68,54 @@ public static class RNSentryOnDrawReporterView extends View {
 
     private final @Nullable ReactApplicationContext reactContext;
     private final @NotNull SentryDateProvider dateProvider = new SentryAndroidDateProvider();
-    private final @Nullable Runnable emitInitialDisplayEvent;
-    private final @Nullable Runnable emitFullDisplayEvent;
     private final @Nullable BuildInfoProvider buildInfo;
 
+    private boolean isInitialDisplay = false;
+    private boolean isFullDisplay = false;
+    private @Nullable String parentSpanId = null;
+
     public RNSentryOnDrawReporterView(@NotNull Context context) {
       super(context);
       reactContext = null;
       buildInfo = null;
-      emitInitialDisplayEvent = null;
-      emitFullDisplayEvent = null;
     }
 
     public RNSentryOnDrawReporterView(
         @NotNull ReactApplicationContext context, @NotNull BuildInfoProvider buildInfoProvider) {
       super(context);
       reactContext = context;
       buildInfo = buildInfoProvider;
-      emitInitialDisplayEvent = () -> emitDisplayEvent("initialDisplay");
-      emitFullDisplayEvent = () -> emitDisplayEvent("fullDisplay");
     }
 
     public void setFullDisplay(boolean fullDisplay) {
-      if (!fullDisplay) {
-        return;
-      }
-
-      logger.log(SentryLevel.DEBUG, "[TimeToDisplay] Register full display event emitter.");
-      registerForNextDraw(emitFullDisplayEvent);
+      isFullDisplay = fullDisplay;
+      registerForNextDraw();
     }
 
     public void setInitialDisplay(boolean initialDisplay) {
-      if (!initialDisplay) {
-        return;
-      }
+      isInitialDisplay = initialDisplay;
+      registerForNextDraw();
+    }
 
-      logger.log(SentryLevel.DEBUG, "[TimeToDisplay] Register initial display event emitter.");
-      registerForNextDraw(emitInitialDisplayEvent);
+    public void setParentSpanId(@Nullable String parentSpanId) {
+      this.parentSpanId = parentSpanId;
+      registerForNextDraw();
     }
 
-    private void registerForNextDraw(@Nullable Runnable emitter) {
-      if (emitter == null) {
-        logger.log(
-            SentryLevel.ERROR,
-            "[TimeToDisplay] Won't emit next frame drawn event, emitter is null.");
+    private void registerForNextDraw() {
+      if (parentSpanId == null) {
+        return;
+      }
+
+      if (isInitialDisplay) {
+        logger.log(SentryLevel.DEBUG, "[TimeToDisplay] Register initial display event emitter.");
+      } else if (isFullDisplay) {
+        logger.log(SentryLevel.DEBUG, "[TimeToDisplay] Register full display event emitter.");
+      } else {
+        logger.log(SentryLevel.DEBUG, "[TimeToDisplay] Not ready, missing displayType prop.");
         return;
       }
+
       if (buildInfo == null) {
         logger.log(
             SentryLevel.ERROR,
@@ -138,26 +137,23 @@ private void registerForNextDraw(@Nullable Runnable emitter) {
         return;
       }
 
-      FirstDrawDoneListener.registerForNextDraw(activity, emitter, buildInfo);
-    }
-
-    private void emitDisplayEvent(String type) {
-      final SentryDate endDate = dateProvider.now();
-
-      WritableMap event = Arguments.createMap();
-      event.putString("type", type);
-      event.putDouble("newFrameTimestampInSeconds", endDate.nanoTimestamp() / 1e9);
-
-      if (reactContext == null) {
-        logger.log(
-            SentryLevel.ERROR,
-            "[TimeToDisplay] Recorded next frame draw but can't emit the event, reactContext is"
-                + " null.");
-        return;
-      }
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "onDrawNextFrameView", event);
+      FirstDrawDoneListener.registerForNextDraw(activity, () -> {
+        final Double now = dateProvider.now().nanoTimestamp() / 1e9;
+        if (parentSpanId == null) {
+          logger.log(
+                  SentryLevel.ERROR,
+                  "[TimeToDisplay] parentSpanId removed before frame was rendered.");
+          return;
+        }
+
+        if (isInitialDisplay) {
+          RNSentryTimeToDisplay.putTimeToDisplayFor("ttid-" + parentSpanId, now);
+        } else if (isFullDisplay) {
+          RNSentryTimeToDisplay.putTimeToDisplayFor("ttfd-" + parentSpanId, now);
+        } else {
+          logger.log(SentryLevel.DEBUG, "[TimeToDisplay] display type removed before frame was rendered.");
+        }
+      }, buildInfo);
     }
   }
 }

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

@@ -6,11 +6,30 @@
 import com.facebook.react.bridge.Promise;
 import io.sentry.SentryDate;
 import io.sentry.SentryDateProvider;
+import java.util.LinkedHashMap;
+import java.util.Map;
 
 public final class RNSentryTimeToDisplay {
 
   private RNSentryTimeToDisplay() {}
 
+  private static final int ENTRIES_MAX_SIZE = 50;
+  private static final Map<String, Double> screenIdToRenderDuration =
+      new LinkedHashMap<>(ENTRIES_MAX_SIZE + 1, 0.75f, true) {
+        @Override
+        protected boolean removeEldestEntry(Map.Entry<String, Double> eldest) {
+          return size() > ENTRIES_MAX_SIZE;
+        }
+      };
+
+  public static Double popTimeToDisplayFor(String screenId) {
+    return screenIdToRenderDuration.remove(screenId);
+  }
+
+  public static void putTimeToDisplayFor(String screenId, Double value) {
+    screenIdToRenderDuration.put(screenId, value);
+  }
+
   public static void getTimeToDisplay(Promise promise, SentryDateProvider dateProvider) {
     Looper mainLooper = Looper.getMainLooper();
 

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

@@ -182,4 +182,9 @@ public void getNewScreenTimeToDisplay(Promise promise) {
   public void getDataFromUri(String uri, Promise promise) {
     this.impl.getDataFromUri(uri, promise);
   }
+
+  @Override
+  public void popTimeToDisplayFor(String key, Promise promise) {
+    this.impl.popTimeToDisplayFor(key, promise);
+  }
 }

packages/core/ios/RNSentryOnDrawReporter.h

@@ -13,9 +13,9 @@
 @interface RNSentryOnDrawReporterView : UIView
 
 @property (nonatomic, strong) RNSentryFramesTrackerListener *framesListener;
-@property (nonatomic, copy) RCTBubblingEventBlock onDrawNextFrame;
 @property (nonatomic) bool fullDisplay;
 @property (nonatomic) bool initialDisplay;
+@property (nonatomic, copy) NSString *parentSpanId;
 @property (nonatomic, weak) RNSentryOnDrawReporter *delegate;
 
 @end

packages/core/ios/RNSentryOnDrawReporter.m

@@ -7,9 +7,9 @@
 @implementation RNSentryOnDrawReporter
 
 RCT_EXPORT_MODULE(RNSentryOnDrawReporter)
-RCT_EXPORT_VIEW_PROPERTY(onDrawNextFrame, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(initialDisplay, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(fullDisplay, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(parentSpanId, BOOL)
 
 - (UIView *)view
 {
@@ -27,18 +27,12 @@ - (instancetype)init
     if (self) {
         RNSentryEmitNewFrameEvent emitNewFrameEvent = ^(NSNumber *newFrameTimestampInSeconds) {
             if (self->_fullDisplay) {
-                self.onDrawNextFrame(@{
-                    @"newFrameTimestampInSeconds" : newFrameTimestampInSeconds,
-                    @"type" : @"fullDisplay"
-                });
+                RNSentryTimeToDisplay.putTimeToDisplayFor([@"ttfd-" stringByAppendingString:self->_parentSpanId], newFrameTimestampInSeconds);
                 return;
             }
 
             if (self->_initialDisplay) {
-                self.onDrawNextFrame(@{
-                    @"newFrameTimestampInSeconds" : newFrameTimestampInSeconds,
-                    @"type" : @"initialDisplay"
-                });
+                RNSentryTimeToDisplay.putTimeToDisplayFor([@"ttid-" stringByAppendingString:self->_parentSpanId], newFrameTimestampInSeconds);
                 return;
             }
         };
@@ -51,7 +45,7 @@ - (instancetype)init
 
 - (void)didSetProps:(NSArray<NSString *> *)changedProps
 {
-    if (_fullDisplay || _initialDisplay) {
+    if ((_fullDisplay || _initialDisplay) && [_parentSpanId isKindOfClass:[NSString class]]) {
         [_framesListener startListening];
     }
 }

packages/core/ios/RNSentryTimeToDisplay.h

@@ -2,6 +2,9 @@
 
 @interface RNSentryTimeToDisplay : NSObject
 
++ (NSNumber *)popTimeToDisplayFor:(NSString *)screenId;
++ (void)putTimeToDisplayFor:(NSString *)screenId value:(NSNumber *)value;
+
 - (void)getTimeToDisplay:(RCTResponseSenderBlock)callback;
 
 @end

packages/core/ios/RNSentryTimeToDisplay.m

@@ -7,6 +7,30 @@ @implementation RNSentryTimeToDisplay {
     RCTResponseSenderBlock resolveBlock;
 }
 
+static const int ENTRIES_MAX_SIZE = 50;
+static NSMutableDictionary<NSString *, NSNumber *> *screenIdToRenderDuration;
+
++ (void)initialize {
+    if (self == [RNSentryTimeToDisplay class]) {
+        screenIdToRenderDuration = [[NSMutableDictionary alloc] init];
+    }
+}
+
++ (NSNumber *)popTimeToDisplayFor:(NSString *)screenId {
+    NSNumber *value = screenIdToRenderDuration[screenId];
+    [screenIdToRenderDuration removeObjectForKey:screenId];
+    return value;
+}
+
++ (void)putTimeToDisplayFor:(NSString *)screenId value:(NSNumber *)value {
+    // Remove oldest entry if at max size
+    if (screenIdToRenderDuration.count >= ENTRIES_MAX_SIZE) {
+        NSString *firstKey = screenIdToRenderDuration.allKeys.firstObject;
+        [screenIdToRenderDuration removeObjectForKey:firstKey];
+    }
+    screenIdToRenderDuration[screenId] = value;
+}
+
 // Rename requestAnimationFrame to getTimeToDisplay
 - (void)getTimeToDisplay:(RCTResponseSenderBlock)callback
 {

packages/core/src/js/NativeRNSentry.ts

@@ -49,6 +49,7 @@ export interface Spec extends TurboModule {
   getCurrentReplayId(): string | undefined | null;
   crashedLastRun(): Promise<boolean | undefined | null>;
   getDataFromUri(uri: string): Promise<number[]>;
+  popTimeToDisplayFor(key: string): Promise<number | undefined | null>;
 }
 
 export type NativeStackFrame = {

packages/core/src/js/integrations/default.ts

@@ -33,6 +33,7 @@ import {
   sdkInfoIntegration,
   spotlightIntegration,
   stallTrackingIntegration,
+  timeToDisplayIntegration,
   userInteractionIntegration,
   viewHierarchyIntegration,
 } from './exports';
@@ -115,6 +116,7 @@ export function getDefaultIntegrations(options: ReactNativeClientOptions): Integ
     integrations.push(appRegistryIntegration());
     integrations.push(reactNativeTracingIntegration());
   }
+  integrations.push(timeToDisplayIntegration());
   if (options.enableCaptureFailedRequests) {
     integrations.push(httpClientIntegration());
   }