Add FrameTiming module (#54362)

Summary:
Pull Request resolved: #54362

Adds a new frame timing hook that leverages [OnFrameMetricsAvailableListener](https://developer.android.com/reference/android/view/Window.OnFrameMetricsAvailableListener). No support for idle or dropped frames yet, just basic frame timing and naively reporting a "commit" when the frame is over. Will continue iterating and mapping events between browser/native.

{F1983178153}

Changelog: [Internal]

Reviewed By: hoxyq, huntie

Differential Revision: D85999774

fbshipit-source-id: 39f659671ce227439b3ab2959e306b911a4d6df2

Author: sbuggay

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -3186,6 +3186,7 @@ public final class com/facebook/react/soloader/OpenSourceMergedSoMapping : com/f
 	public final fun libreact_devsupportjni_so ()I
 	public final fun libreact_featureflagsjni_so ()I
 	public final fun libreact_newarchdefaults_so ()I
+	public final fun libreact_performancetracerjni_so ()I
 	public final fun libreactnative_so ()I
 	public final fun libreactnativeblob_so ()I
 	public final fun libreactnativejni_common_so ()I

packages/react-native/ReactAndroid/proguard-rules.pro

@@ -73,3 +73,6 @@
 -keep public class com.facebook.imageutils.** {
    public *;
 }
+
+# devsupport - keep classes that are referenced via JNI or reflection
+-keep class com.facebook.react.devsupport.** { *; }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt

@@ -72,6 +72,7 @@ import com.facebook.react.devsupport.perfmonitor.PerfMonitorDevHelper
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorOverlayManager
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatureFlags
+import com.facebook.react.internal.tracing.PerformanceTracer
 import com.facebook.react.modules.core.RCTNativeAppEventEmitter
 import com.facebook.react.modules.debug.interfaces.DeveloperSettings
 import com.facebook.react.packagerconnection.RequestHandler
@@ -211,6 +212,8 @@ public abstract class DevSupportManagerBase(
   private var perfMonitorOverlayManager: PerfMonitorOverlayManager? = null
   private var perfMonitorInitialized = false
   private var tracingStateProvider: TracingStateProvider? = null
+  private var tracingStateSubscriptionId: Int? = null
+  private var frameTiming: FrameTiming? = null
 
   public override var keyboardShortcutsEnabled: Boolean = true
   public override var devMenuEnabled: Boolean = true
@@ -969,12 +972,37 @@ public abstract class DevSupportManagerBase(
               isPackagerConnected = true
               perfMonitorOverlayManager?.enable()
               perfMonitorOverlayManager?.startBackgroundTrace()
+
+              // Subscribe to tracing state changes
+              tracingStateSubscriptionId =
+                  PerformanceTracer.subscribeToTracingStateChanges(
+                      object : PerformanceTracer.TracingStateCallback {
+                        override fun onTracingStateChanged(isTracing: Boolean) {
+                          if (isTracing) {
+                            if (frameTiming == null) {
+                              currentActivity?.window?.let { window ->
+                                frameTiming = FrameTiming(window)
+                              }
+                            }
+                            frameTiming?.startMonitoring()
+                          } else {
+                            frameTiming?.stopMonitoring()
+                          }
+                        }
+                      }
+                  )
             }
 
             override fun onPackagerDisconnected() {
               isPackagerConnected = false
               perfMonitorOverlayManager?.disable()
               perfMonitorOverlayManager?.stopBackgroundTrace()
+
+              // Unsubscribe from tracing state changes
+              tracingStateSubscriptionId?.let { subscriptionId ->
+                PerformanceTracer.unsubscribeFromTracingStateChanges(subscriptionId)
+                tracingStateSubscriptionId = null
+              }
             }
 
             override fun onPackagerReloadCommand() {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/FrameTiming.kt

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.devsupport
+
+import android.os.Build
+import android.os.Handler
+import android.os.Looper
+import android.view.FrameMetrics
+import android.view.Window
+import com.facebook.soloader.SoLoader
+
+internal class FrameTiming(private val window: Window) {
+  init {
+    SoLoader.loadLibrary("react_devsupportjni")
+  }
+
+  private var frameCounter: Int = 0
+
+  private val frameMetricsListener =
+      Window.OnFrameMetricsAvailableListener { _, frameMetrics, dropCount ->
+        val metrics = FrameMetrics(frameMetrics)
+
+        val paintStartTime = metrics.getMetric(FrameMetrics.INTENDED_VSYNC_TIMESTAMP)
+        val totalDuration = metrics.getMetric(FrameMetrics.TOTAL_DURATION)
+
+        val currentFrame = frameCounter++
+        reportFrameTiming(
+            frame = currentFrame,
+            paintStartNanos = paintStartTime,
+            paintEndNanos = paintStartTime + totalDuration,
+        )
+      }
+
+  companion object {
+    @JvmStatic
+    private external fun reportFrameTiming(frame: Int, paintStartNanos: Long, paintEndNanos: Long)
+  }
+
+  private val handler = Handler(Looper.getMainLooper())
+
+  internal fun startMonitoring() {
+    frameCounter = 0
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.N) {
+      return
+    }
+    window.addOnFrameMetricsAvailableListener(frameMetricsListener, handler)
+  }
+
+  internal fun stopMonitoring() {
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.N) {
+      return
+    }
+    window.removeOnFrameMetricsAvailableListener(frameMetricsListener)
+  }
+}

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/soloader/OpenSourceMergedSoMapping.kt

@@ -28,6 +28,7 @@ public object OpenSourceMergedSoMapping : ExternalSoMapping {
         "react_devsupportjni",
         "react_featureflagsjni",
         "react_newarchdefaults",
+        "react_performancetracerjni",
         "reactnativeblob",
         "reactnativejni",
         "reactnativejni_common",
@@ -57,6 +58,7 @@ public object OpenSourceMergedSoMapping : ExternalSoMapping {
       "react_devsupportjni" -> libreact_devsupportjni_so()
       "react_featureflagsjni" -> libreact_featureflagsjni_so()
       "react_newarchdefaults" -> libreact_newarchdefaults_so()
+      "react_performancetracerjni" -> libreact_performancetracerjni_so()
       "reactnative" -> libreactnative_so()
       "reactnativeblob" -> libreactnativeblob_so()
       "reactnativejni" -> libreactnativejni_so()
@@ -88,6 +90,8 @@ public object OpenSourceMergedSoMapping : ExternalSoMapping {
 
   public external fun libreact_newarchdefaults_so(): Int
 
+  public external fun libreact_performancetracerjni_so(): Int
+
   public external fun libreactnative_so(): Int
 
   public external fun libreactnativeblob_so(): Int

packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt

@@ -153,6 +153,7 @@ add_react_android_subdir(src/main/jni/react/runtime/cxxreactpackage)
 add_react_android_subdir(src/main/jni/react/runtime/jni)
 add_react_android_subdir(src/main/jni/react/runtime/hermes/jni)
 add_react_android_subdir(src/main/jni/react/devsupport)
+add_react_android_subdir(src/main/jni/react/tracing)
 
 # SoMerging Utils
 include(${REACT_ANDROID_DIR}/src/main/jni/first-party/jni-lib-merge/SoMerging-utils.cmake)
@@ -197,6 +198,7 @@ add_library(reactnative
           $<TARGET_OBJECTS:react_newarchdefaults>
           $<TARGET_OBJECTS:react_performance_cdpmetrics>
           $<TARGET_OBJECTS:react_performance_timeline>
+          $<TARGET_OBJECTS:react_performancetracerjni>
           $<TARGET_OBJECTS:react_renderer_animations>
           $<TARGET_OBJECTS:react_renderer_attributedstring>
           $<TARGET_OBJECTS:react_renderer_componentregistry>
@@ -288,6 +290,7 @@ target_include_directories(reactnative
         $<TARGET_PROPERTY:react_newarchdefaults,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_performance_cdpmetrics,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_performance_timeline,INTERFACE_INCLUDE_DIRECTORIES>
+        $<TARGET_PROPERTY:react_performancetracerjni,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_renderer_animations,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_renderer_attributedstring,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_renderer_componentregistry,INTERFACE_INCLUDE_DIRECTORIES>

packages/react-native/ReactAndroid/src/main/jni/react/devsupport/CMakeLists.txt

@@ -20,6 +20,8 @@ target_include_directories(react_devsupportjni PUBLIC .)
 target_link_libraries(react_devsupportjni
         fbjni
         jsinspector
-        react_networking)
+        jsinspector_tracing
+        react_networking
+        react_timing)
 
 target_compile_reactnative_options(react_devsupportjni PRIVATE)

packages/react-native/ReactAndroid/src/main/jni/react/devsupport/JFrameTiming.cpp

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "JFrameTiming.h"
+
+#include <jsinspector-modern/tracing/PerformanceTracer.h>
+#include <react/timing/primitives.h>
+
+namespace facebook::react::jsinspector_modern {
+
+void JFrameTiming::reportFrameTiming(
+    jni::alias_ref<jclass> /*unused*/,
+    jint frameNumber,
+    jlong paintStartNanos,
+    jlong paintEndNanos) {
+  auto& performanceTracer = tracing::PerformanceTracer::getInstance();
+
+  auto startTime = HighResTimeStamp::fromDOMHighResTimeStamp(
+      static_cast<double>(paintStartNanos) / 1e6);
+  auto endTime = HighResTimeStamp::fromDOMHighResTimeStamp(
+      static_cast<double>(paintEndNanos) / 1e6);
+
+  performanceTracer.reportFrameTiming(frameNumber, startTime, endTime);
+}
+
+void JFrameTiming::registerNatives() {
+  javaClassLocal()->registerNatives({
+      makeNativeMethod("reportFrameTiming", JFrameTiming::reportFrameTiming),
+  });
+}
+
+} // namespace facebook::react::jsinspector_modern

packages/react-native/ReactAndroid/src/main/jni/react/devsupport/JFrameTiming.h

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <fbjni/fbjni.h>
+
+namespace facebook::react::jsinspector_modern {
+
+/**
+ * JNI wrapper for reporting frame timing to PerformanceTracer.
+ */
+class JFrameTiming : public jni::JavaClass<JFrameTiming> {
+ public:
+  static constexpr auto kJavaDescriptor = "Lcom/facebook/react/devsupport/FrameTiming;";
+
+  static void
+  reportFrameTiming(jni::alias_ref<jclass> /*unused*/, jint frame, jlong paintStartNanos, jlong paintEndNanos);
+
+  static void registerNatives();
+
+ private:
+  JFrameTiming() = delete;
+};
+
+} // namespace facebook::react::jsinspector_modern

packages/react-native/ReactAndroid/src/main/jni/react/devsupport/OnLoad.cpp

@@ -7,6 +7,7 @@
 
 #include "JCxxInspectorPackagerConnection.h"
 #include "JCxxInspectorPackagerConnectionWebSocketDelegate.h"
+#include "JFrameTiming.h"
 #include "JInspectorFlags.h"
 #include "JInspectorNetworkReporter.h"
 
@@ -18,6 +19,7 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void* /*unused*/) {
         registerNatives();
     facebook::react::jsinspector_modern::
         JCxxInspectorPackagerConnectionWebSocketDelegate::registerNatives();
+    facebook::react::jsinspector_modern::JFrameTiming::registerNatives();
     facebook::react::jsinspector_modern::JInspectorFlags::registerNatives();
     facebook::react::jsinspector_modern::JInspectorNetworkReporter::
         registerNatives();