Add Analyze Performance option to DevMenu (facebook#53334)

sbuggay · facebook-github-bot · commit 6a0b9d135da7 · 2025-08-29T03:14:56.000-07:00
Summary: Pull Request resolved: facebook#53334 Adds background performance tracing options to the DevMenu based on the current background tracing state. Analyzing a trace will automatically open dev tools, navigate to the performance tab, and show the last 20 seconds of recorded performance data. Changelog: [Internal] Reviewed By: javache Differential Revision: D79714164 fbshipit-source-id: 72ad4be4604c5f4e304b49877b2699be36562655
diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api
@@ -2223,6 +2223,15 @@ public abstract interface class com/facebook/react/devsupport/interfaces/StackFr
 	public abstract fun toJSON ()Lorg/json/JSONObject;
 }
 
+public final class com/facebook/react/devsupport/interfaces/TracingState : java/lang/Enum {
+	public static final field DISABLED Lcom/facebook/react/devsupport/interfaces/TracingState;
+	public static final field ENABLEDINBACKGROUNDMODE Lcom/facebook/react/devsupport/interfaces/TracingState;
+	public static final field ENABLEDINCDPMODE Lcom/facebook/react/devsupport/interfaces/TracingState;
+	public static fun getEntries ()Lkotlin/enums/EnumEntries;
+	public static fun valueOf (Ljava/lang/String;)Lcom/facebook/react/devsupport/interfaces/TracingState;
+	public static fun values ()[Lcom/facebook/react/devsupport/interfaces/TracingState;
+}
+
 public final class com/facebook/react/fabric/ComponentFactory {
 	public fun <init> ()V
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgelessDevSupportManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgelessDevSupportManager.kt
@@ -15,6 +15,7 @@ import com.facebook.react.devsupport.interfaces.DevLoadingViewManager
 import com.facebook.react.devsupport.interfaces.DevSupportManager
 import com.facebook.react.devsupport.interfaces.PausedInDebuggerOverlayManager
 import com.facebook.react.devsupport.interfaces.RedBoxHandler
+import com.facebook.react.devsupport.interfaces.TracingState
 import com.facebook.react.packagerconnection.RequestHandler
 
 /**
@@ -80,4 +81,8 @@ internal class BridgelessDevSupportManager(
     hideRedboxDialog()
     reactInstanceDevHelper.reload("BridgelessDevSupportManager.handleReloadJS()")
   }
+
+  fun tracingState(): TracingState {
+    return TracingState.DISABLED
+  }
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt
@@ -52,6 +52,7 @@ import com.facebook.react.devsupport.InspectorFlags.getFuseboxEnabled
 import com.facebook.react.devsupport.StackTraceHelper.convertJavaStackTrace
 import com.facebook.react.devsupport.StackTraceHelper.convertJsStackTrace
 import com.facebook.react.devsupport.interfaces.BundleLoadCallback
+import com.facebook.react.devsupport.interfaces.DebuggerFrontendPanelName
 import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener
 import com.facebook.react.devsupport.interfaces.DevLoadingViewManager
 import com.facebook.react.devsupport.interfaces.DevOptionHandler
@@ -64,6 +65,8 @@ import com.facebook.react.devsupport.interfaces.PackagerStatusCallback
 import com.facebook.react.devsupport.interfaces.PausedInDebuggerOverlayManager
 import com.facebook.react.devsupport.interfaces.RedBoxHandler
 import com.facebook.react.devsupport.interfaces.StackFrame
+import com.facebook.react.devsupport.interfaces.TracingState
+import com.facebook.react.devsupport.interfaces.TracingStateProvider
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorDevHelper
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatureFlags
@@ -180,6 +183,7 @@ public abstract class DevSupportManagerBase(
         }
 
   private var perfMonitorOverlayManager: PerfMonitorOverlayViewManager? = null
+  private var tracingStateProvider: TracingStateProvider? = null
 
   init {
     // We store JS bundle loaded from dev server in a single destination in app's data dir.
@@ -358,6 +362,43 @@ public abstract class DevSupportManagerBase(
       options[debuggerItemString] = DevOptionHandler { this.openDebugger() }
     }
 
+    if (ReactNativeFeatureFlags.perfMonitorV2Enabled()) {
+      val isConnected = isPackagerConnected
+      val tracingState = tracingStateProvider?.getTracingState() ?: TracingState.DISABLED
+
+      val analyzePerformanceItemString =
+          when (tracingState) {
+            TracingState.ENABLEDINBACKGROUNDMODE ->
+                applicationContext.getString(R.string.catalyst_performance_background)
+            TracingState.ENABLEDINCDPMODE ->
+                applicationContext.getString(R.string.catalyst_performance_cdp)
+            TracingState.DISABLED ->
+                applicationContext.getString(R.string.catalyst_performance_disabled)
+          }
+
+      if (!isConnected || tracingState == TracingState.ENABLEDINCDPMODE) {
+        disabledItemKeys.add(analyzePerformanceItemString)
+      }
+
+      options[analyzePerformanceItemString] =
+          when (tracingState) {
+            TracingState.ENABLEDINBACKGROUNDMODE ->
+                DevOptionHandler {
+                  UiThreadUtil.runOnUiThread {
+                    if (reactInstanceDevHelper is PerfMonitorDevHelper)
+                        reactInstanceDevHelper.inspectorTarget?.pauseAndAnalyzeBackgroundTrace()
+                  }
+                  openDebugger(DebuggerFrontendPanelName.PERFORMANCE.toString())
+                }
+            TracingState.DISABLED ->
+                DevOptionHandler {
+                  if (reactInstanceDevHelper is PerfMonitorDevHelper)
+                      reactInstanceDevHelper.inspectorTarget?.resumeBackgroundTrace()
+                }
+            TracingState.ENABLEDINCDPMODE -> DevOptionHandler {}
+          }
+    }
+
     options[applicationContext.getString(R.string.catalyst_change_bundle_location)] =
         DevOptionHandler {
           val context = reactInstanceDevHelper.currentActivity
@@ -942,6 +983,14 @@ public abstract class DevSupportManagerBase(
     devSettings.packagerConnectionSettings.setAdditionalOptionForPackager(name, value)
   }
 
+  /**
+   * Sets the background tracing state provider for bridgeless architecture. This is called
+   * internally by the ReactHost implementation.
+   */
+  internal fun setTracingStateProvider(provider: TracingStateProvider?) {
+    tracingStateProvider = provider
+  }
+
   public companion object {
     private const val JAVA_ERROR_COOKIE = -1
     private const val JSEXCEPTION_ERROR_COOKIE = -1
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/PerfMonitorOverlayViewManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/PerfMonitorOverlayViewManager.kt
@@ -26,6 +26,7 @@ import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.R
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.devsupport.interfaces.PerfMonitorOverlayManager
+import com.facebook.react.devsupport.interfaces.TracingState
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorInspectorTargetBinding
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorUpdateListener
 import com.facebook.react.uimanager.DisplayMetricsHolder
@@ -68,6 +69,11 @@ internal class PerfMonitorOverlayViewManager(
     }
   }
 
+  override fun onRecordingStateChanged(state: TracingState) {
+    // recordingState = state
+    // view?.updateRecordingState(state)
+  }
+
   override fun onNewFocusedEvent(data: PerfMonitorUpdateListener.LongTaskEventData) {
     UiThreadUtil.runOnUiThread {
       ensureInitialized()
@@ -148,6 +154,8 @@ internal class PerfMonitorOverlayViewManager(
     this.interactionDialog = dialog
   }
 
+  fun updateRecordingState(state: TracingState) {}
+
   private fun createButton(context: Context) {
     val buttonInner = createInnerLayout(context)
     buttonInner.addView(
@@ -177,7 +185,7 @@ internal class PerfMonitorOverlayViewManager(
               dpToPx(8f).toInt(),
           )
           addView(buttonInner)
-          setOnClickListener { inspectorTarget?.pauseAndAnalyzeTrace() }
+          setOnClickListener { inspectorTarget?.pauseAndAnalyzeBackgroundTrace() }
         }
     val dialog =
         createAnchoredDialog(context, dpToPx(0f), dpToPx(0f)).apply { setContentView(buttonView) }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/interfaces/TracingState.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/interfaces/TracingState.kt
@@ -0,0 +1,19 @@
+/*
+ * 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.interfaces
+
+import com.facebook.proguard.annotations.DoNotStripAny
+
+// Keep in sync with `TracingState.h`
+// JNI wrapper for `jsinspector_modern::Tracing::TracingState`.
+@DoNotStripAny
+public enum class TracingState {
+  DISABLED, // There is no active trace
+  ENABLEDINBACKGROUNDMODE, // Trace is currently running in background mode
+  ENABLEDINCDPMODE, // Trace is currently running in CDP mode
+}
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/interfaces/TracingStateProvider.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/interfaces/TracingStateProvider.kt
@@ -0,0 +1,12 @@
+/*
+ * 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.interfaces
+
+internal interface TracingStateProvider {
+  fun getTracingState(): TracingState
+}
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/perfmonitor/PerfMonitorInspectorTargetBinding.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/perfmonitor/PerfMonitorInspectorTargetBinding.kt
@@ -12,5 +12,9 @@ package com.facebook.react.devsupport.perfmonitor
  * exposing actions for the V2 Perf Monitor.
  */
 internal interface PerfMonitorInspectorTargetBinding {
-  public fun pauseAndAnalyzeTrace()
+  /** Attempt to pause the current background performance trace, and open in DevTools. */
+  public fun pauseAndAnalyzeBackgroundTrace()
+
+  /** Attempt to start a new background performance trace. */
+  public fun resumeBackgroundTrace()
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/perfmonitor/PerfMonitorUpdateListener.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/perfmonitor/PerfMonitorUpdateListener.kt
@@ -4,9 +4,10 @@
  * 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.perfmonitor
 
+import com.facebook.react.devsupport.interfaces.TracingState
+
 /** [Experimental] An interface for subscribing to updates for the V2 Perf Monitor. */
 internal interface PerfMonitorUpdateListener {
   data class LongTaskEventData(
@@ -17,4 +18,7 @@ internal interface PerfMonitorUpdateListener {
 
   /** Called when a new active performance event should be displayed. */
   fun onNewFocusedEvent(data: LongTaskEventData)
+
+  /** Called when the recording state of the background performance trace has changed. */
+  fun onRecordingStateChanged(state: TracingState)
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.kt
@@ -95,21 +95,30 @@ public class ReactHostImpl(
     private val useDevSupport: Boolean,
     devSupportManagerFactory: DevSupportManagerFactory? = null,
 ) : ReactHost {
+  private val reactHostImplDevHelper = ReactHostImplDevHelper(this)
+
   public override val devSupportManager: DevSupportManager =
-      (devSupportManagerFactory ?: DefaultDevSupportManagerFactory()).create(
-          applicationContext = context.applicationContext,
-          reactInstanceManagerHelper = ReactHostImplDevHelper(this),
-          packagerPathForJSBundleName = reactHostDelegate.jsMainModulePath,
-          enableOnCreate = true,
-          redBoxHandler = null,
-          devBundleDownloadListener = null,
-          minNumShakes = 2,
-          customPackagerCommandHandlers = null,
-          surfaceDelegateFactory = null,
-          devLoadingViewManager = null,
-          pausedInDebuggerOverlayManager = null,
-          useDevSupport = useDevSupport,
-      )
+      (devSupportManagerFactory ?: DefaultDevSupportManagerFactory())
+          .create(
+              applicationContext = context.applicationContext,
+              reactInstanceManagerHelper = reactHostImplDevHelper,
+              packagerPathForJSBundleName = reactHostDelegate.jsMainModulePath,
+              enableOnCreate = true,
+              redBoxHandler = null,
+              devBundleDownloadListener = null,
+              minNumShakes = 2,
+              customPackagerCommandHandlers = null,
+              surfaceDelegateFactory = null,
+              devLoadingViewManager = null,
+              pausedInDebuggerOverlayManager = null,
+              useDevSupport = useDevSupport,
+          )
+          .also { devSupportManager ->
+            // Wire up the tracing state provider
+            if (devSupportManager is DevSupportManagerBase) {
+              devSupportManager.setTracingStateProvider(reactHostImplDevHelper)
+            }
+          }
   public override val memoryPressureRouter: MemoryPressureRouter = MemoryPressureRouter(context)
 
   private val attachedSurfaces: MutableSet<ReactSurfaceImpl> = HashSet()
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImplDevHelper.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImplDevHelper.kt
@@ -16,6 +16,8 @@ import com.facebook.react.bridge.ReactContext
 import com.facebook.react.common.annotations.FrameworkAPI
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.devsupport.ReactInstanceDevHelper
+import com.facebook.react.devsupport.interfaces.TracingState
+import com.facebook.react.devsupport.interfaces.TracingStateProvider
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorDevHelper
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorInspectorTarget
 import com.facebook.react.interfaces.TaskInterface
@@ -30,7 +32,7 @@ import com.facebook.react.modules.core.DeviceEventManagerModule
 @UnstableReactNativeAPI
 @OptIn(FrameworkAPI::class)
 internal class ReactHostImplDevHelper(private val delegate: ReactHostImpl) :
-    ReactInstanceDevHelper, PerfMonitorDevHelper {
+    ReactInstanceDevHelper, PerfMonitorDevHelper, TracingStateProvider {
 
   override val currentActivity: Activity?
     get() = delegate.lastUsedActivity
@@ -77,4 +79,8 @@ internal class ReactHostImplDevHelper(private val delegate: ReactHostImpl) :
 
   override fun loadBundle(bundleLoader: JSBundleLoader): TaskInterface<Boolean> =
       delegate.loadBundle(bundleLoader)
+
+  override fun getTracingState(): TracingState {
+    return delegate.reactHostInspectorTarget?.tracingState() ?: TracingState.DISABLED
+  }
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostInspectorTarget.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostInspectorTarget.kt
@@ -12,6 +12,7 @@ import com.facebook.proguard.annotations.DoNotStripAny
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.common.annotations.FrameworkAPI
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.devsupport.interfaces.TracingState
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorInspectorTarget
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorUpdateListener
 import com.facebook.soloader.SoLoader
@@ -40,12 +41,28 @@ internal class ReactHostInspectorTarget(reactHostImpl: ReactHostImpl) :
 
   external fun stopAndDiscardBackgroundTrace()
 
+  external fun tracingStateAsInt(): Int
+
+  fun tracingState(): TracingState {
+    return TracingState.entries[tracingStateAsInt()]
+  }
+
   override fun addPerfMonitorListener(listener: PerfMonitorUpdateListener) {
     perfMonitorListeners.add(listener)
   }
 
-  override fun pauseAndAnalyzeTrace() {
-    // TODO(T233874551)
+  override fun pauseAndAnalyzeBackgroundTrace() {
+    stopAndStashBackgroundTrace()
+    perfMonitorListeners.forEach { listener ->
+      listener.onRecordingStateChanged(TracingState.DISABLED)
+    }
+  }
+
+  override fun resumeBackgroundTrace() {
+    startBackgroundTrace()
+    perfMonitorListeners.forEach { listener ->
+      listener.onRecordingStateChanged(TracingState.ENABLEDINBACKGROUNDMODE)
+    }
   }
 
   fun handleNativePerfMonitorMetricUpdate(
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/JReactHostInspectorTarget.cpp b/packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/JReactHostInspectorTarget.cpp
@@ -204,7 +204,14 @@ void JReactHostInspectorTarget::registerNatives() {
       makeNativeMethod(
           "stopAndDiscardBackgroundTrace",
           JReactHostInspectorTarget::stopAndDiscardBackgroundTrace),
+      makeNativeMethod(
+          "tracingStateAsInt", JReactHostInspectorTarget::tracingState),
   });
 }
 
+jint JReactHostInspectorTarget::tracingState() {
+  auto state = inspectorTarget_->tracingState();
+  return static_cast<jint>(state);
+}
+
 } // namespace facebook::react
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/JReactHostInspectorTarget.h b/packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/JReactHostInspectorTarget.h
@@ -20,6 +20,11 @@ struct JTaskInterface : public jni::JavaClass<JTaskInterface> {
       "Lcom/facebook/react/interfaces/TaskInterface;";
 };
 
+struct JTracingState : public jni::JavaClass<JTracingState> {
+  static constexpr auto kJavaDescriptor =
+      "Lcom/facebook/react/devsupport/TracingState;";
+};
+
 struct JReactHostImpl : public jni::JavaClass<JReactHostImpl> {
   static constexpr auto kJavaDescriptor =
       "Lcom/facebook/react/runtime/ReactHostImpl;";
@@ -88,6 +93,14 @@ class JReactHostInspectorTarget
    * which will be emitted the next time CDP session is created.
    */
   void stopAndStashBackgroundTrace();
+  /**
+   * Get the state of the background trace: running, stopped, or disabled
+   * Background tracing will be disabled if there is no metro connection or if
+   * there is a CDP initiate trace in progress.
+   *
+   * \return the background trace state
+   */
+  jint tracingState();
   /**
    * Stops previously started trace recording and discards the captured trace.
    */
diff --git a/packages/react-native/ReactAndroid/src/main/res/devsupport/values/strings.xml b/packages/react-native/ReactAndroid/src/main/res/devsupport/values/strings.xml
@@ -10,6 +10,9 @@
   <string name="catalyst_change_bundle_location_cancel" project="catalyst" translatable="false">Cancel</string>
   <string name="catalyst_open_debugger_error" project="catalyst" translatable="false">Failed to open DevTools. Please check that the dev server is running and reload the app.</string>
   <string name="catalyst_debug_open" project="catalyst" translatable="false">Open DevTools</string>
+  <string name="catalyst_performance_background" project="catalyst" translatable="false">Finish performance trace</string>
+  <string name="catalyst_performance_disabled" project="catalyst" translatable="false">Start performance trace</string>
+  <string name="catalyst_performance_cdp" project="catalyst" translatable="false">Performance tracing disabled</string>
   <string name="catalyst_debug_open_disabled" project="catalyst" translatable="false">Connect to the bundler to debug JavaScript</string>
   <string name="catalyst_debug_connecting" project="catalyst" translatable="false">Connecting to debugger...</string>
   <string name="catalyst_debug_error" project="catalyst" translatable="false">Failed to connect to debugger!</string>
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/HostTarget.h b/packages/react-native/ReactCommon/jsinspector-modern/HostTarget.h
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/HostTargetTracing.cpp b/packages/react-native/ReactCommon/jsinspector-modern/HostTargetTracing.cpp
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/tracing/TracingState.h b/packages/react-native/ReactCommon/jsinspector-modern/tracing/TracingState.h
