Add Performance Issues to Perf Monitor (2/2) (#54266)

Summary:
Pull Request resolved: #54266

Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native.

**Design**

Performance Issues are an **experimental** user space API via the User Timings `detail` object.

```
performance.measure({
  start,
  end,
  detail: {
    devtools: {
      ...
    },
   rnPerfIssue: {
     name: 'React: Cascading Update',
     severity: 'warning', // 'info' | 'warning' | 'error',
     description:
      'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',
    learnMoreUrl:
      'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates',
    }
  }
});
```

When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding.

**This diff**

- Updates the V2 Perf Monitor UI (Android) to display Performance Issues as a count.
    - (UI parts of this diff, including `HostTarget::installPerfIssuesBinding` are reinstated from the previous INP design, removed in D82208400).

Changelog: [Internal]

Differential Revision: D85448199

Author: huntie

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

@@ -22,6 +22,7 @@ internal class PerfMonitorOverlayManager(
 
   private var view: PerfMonitorOverlayView? = null
   private var tracingState: TracingState = TracingState.ENABLEDINCDPMODE
+  private var perfIssueCount: Int = 0
 
   /** Enable the Perf Monitor overlay. */
   fun enable() {
@@ -72,8 +73,19 @@ internal class PerfMonitorOverlayManager(
 
   override fun onRecordingStateChanged(state: TracingState) {
     tracingState = state
+    if (state != TracingState.DISABLED) {
+      perfIssueCount = 0
+    }
     UiThreadUtil.runOnUiThread {
       view?.updateRecordingState(state)
+      view?.updatePerfIssueCount(perfIssueCount)
+      view?.show()
+    }
+  }
+
+  override fun onPerfIssueAdded(name: String) {
+    UiThreadUtil.runOnUiThread {
+      view?.updatePerfIssueCount(++perfIssueCount)
       view?.show()
     }
   }

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

@@ -30,9 +30,11 @@ internal class PerfMonitorOverlayView(
     private val onButtonPress: () -> Unit,
 ) {
   private val dialog: Dialog
+  private lateinit var statusIndicator: TextView
   private lateinit var statusLabel: TextView
   private lateinit var tooltipLabel: TextView
-  private lateinit var statusIndicator: TextView
+  private lateinit var issuesContainer: LinearLayout
+  private lateinit var issueCountLabel: TextView
 
   init {
     DisplayMetricsHolder.initDisplayMetricsIfNotInitialized(context)
@@ -70,6 +72,11 @@ internal class PerfMonitorOverlayView(
     dialog.show()
   }
 
+  fun updatePerfIssueCount(count: Int) {
+    issueCountLabel.text = count.toString()
+    issuesContainer.visibility = if (count == 0) LinearLayout.GONE else LinearLayout.VISIBLE
+  }
+
   private fun createToolbarDialog(): Dialog {
     statusIndicator =
         TextView(context).apply {
@@ -85,11 +92,7 @@ internal class PerfMonitorOverlayView(
     val textContainer =
         LinearLayout(context).apply {
           orientation = LinearLayout.VERTICAL
-          layoutParams =
-              LinearLayout.LayoutParams(
-                  LinearLayout.LayoutParams.WRAP_CONTENT,
-                  LinearLayout.LayoutParams.WRAP_CONTENT,
-              )
+          setPadding(dpToPx(2f).toInt(), 0, 0, 0)
         }
     statusLabel =
         TextView(context).apply {
@@ -106,10 +109,35 @@ internal class PerfMonitorOverlayView(
     textContainer.addView(statusLabel)
     textContainer.addView(tooltipLabel)
 
+    issuesContainer =
+        LinearLayout(context).apply {
+          setPadding(dpToPx(8f).toInt(), 0, 0, 0)
+          visibility = LinearLayout.GONE
+        }
+    issueCountLabel =
+        TextView(context).apply {
+          textSize = TEXT_SIZE_PRIMARY
+          setTextColor(Color.WHITE)
+          typeface = TYPEFACE_BOLD
+          val alertDrawable =
+              context.getDrawable(android.R.drawable.ic_dialog_alert)?.apply {
+                setBounds(
+                    0,
+                    1,
+                    dpToPx(TEXT_SIZE_PRIMARY).toInt(),
+                    dpToPx(TEXT_SIZE_PRIMARY).toInt() + 1,
+                )
+              }
+          setCompoundDrawables(alertDrawable, null, null, null)
+          compoundDrawablePadding = dpToPx(6f).toInt()
+        }
+    issuesContainer.addView(issueCountLabel)
+
     val containerLayout = createInnerLayout()
     containerLayout.setOnClickListener { onButtonPress() }
     containerLayout.addView(statusIndicator)
     containerLayout.addView(textContainer)
+    containerLayout.addView(issuesContainer)
 
     val dialog =
         createAnchoredDialog(dpToPx(12f), dpToPx(12f)).apply { setContentView(containerLayout) }
@@ -175,7 +203,7 @@ internal class PerfMonitorOverlayView(
       showDividers = LinearLayout.SHOW_DIVIDER_MIDDLE
       dividerDrawable =
           object : ColorDrawable(Color.TRANSPARENT) {
-            override fun getIntrinsicWidth(): Int = dpToPx(8f).toInt()
+            override fun getIntrinsicWidth(): Int = dpToPx(10f).toInt()
           }
     }
   }

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

@@ -12,4 +12,7 @@ import com.facebook.react.devsupport.interfaces.TracingState
 internal interface PerfMonitorUpdateListener {
   /** Called when the recording state of the background performance trace has changed. */
   fun onRecordingStateChanged(state: TracingState)
+
+  /** Called when a new Performance Issue is added. */
+  fun onPerfIssueAdded(name: String)
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostInspectorTarget.kt

@@ -74,6 +74,12 @@ internal class ReactHostInspectorTarget(reactHostImpl: ReactHostImpl) :
     }
   }
 
+  fun handleNativePerfIssueAdded(
+      name: String,
+  ) {
+    perfMonitorListeners.forEach { listener -> listener.onPerfIssueAdded(name) }
+  }
+
   override fun close() {
     mHybridData.resetNative()
   }

packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/JReactHostInspectorTarget.cpp

@@ -120,6 +120,13 @@ void JReactHostInspectorTarget::onSetPausedInDebuggerMessage(
   }
 }
 
+void JReactHostInspectorTarget::unstable_onPerfIssueAdded(
+    const PerfIssuePayload& issue) {
+  static auto method = javaClassStatic()->getMethod<void(local_ref<jstring>)>(
+      "handleNativePerfIssueAdded");
+  method(jobj_, make_jstring(issue.name));
+}
+
 void JReactHostInspectorTarget::loadNetworkResource(
     const jsinspector_modern::LoadNetworkResourceRequest& params,
     jsinspector_modern::ScopedExecutor<

packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/JReactHostInspectorTarget.h

@@ -103,6 +103,7 @@ class JReactHostInspectorTarget : public jni::HybridClass<JReactHostInspectorTar
   jsinspector_modern::HostTargetMetadata getMetadata() override;
   void onReload(const PageReloadRequest &request) override;
   void onSetPausedInDebuggerMessage(const OverlaySetPausedInDebuggerMessageRequest &request) override;
+  void unstable_onPerfIssueAdded(const jsinspector_modern::PerfIssuePayload &issue) override;
   void loadNetworkResource(
       const jsinspector_modern::LoadNetworkResourceRequest &params,
       jsinspector_modern::ScopedExecutor<jsinspector_modern::NetworkRequestListener> executor) override;

packages/react-native/ReactCommon/jsinspector-modern/HostTarget.cpp

@@ -206,6 +206,9 @@ std::shared_ptr<HostTarget> HostTarget::create(
     VoidExecutor executor) {
   std::shared_ptr<HostTarget> hostTarget{new HostTarget(delegate)};
   hostTarget->setExecutor(std::move(executor));
+  if (InspectorFlags::getInstance().getPerfIssuesEnabled()) {
+    hostTarget->installPerfIssuesBinding();
+  }
   return hostTarget;
 }
 
@@ -289,6 +292,17 @@ void HostTarget::sendCommand(HostCommand command) {
   });
 }
 
+void HostTarget::installPerfIssuesBinding() {
+  perfMonitorUpdateHandler_ =
+      std::make_unique<PerfMonitorUpdateHandler>(delegate_);
+  perfMetricsBinding_ = std::make_unique<HostRuntimeBinding>(
+      *this, // Used immediately
+      "__react_native_perf_issues_reporter",
+      [this](const std::string& message) {
+        perfMonitorUpdateHandler_->handlePerfIssueAdded(message);
+      });
+}
+
 HostTargetController::HostTargetController(HostTarget& target)
     : target_(target) {}
 

packages/react-native/ReactCommon/jsinspector-modern/HostTarget.h

@@ -12,6 +12,7 @@
 #include "InspectorInterfaces.h"
 #include "InstanceTarget.h"
 #include "NetworkIOAgent.h"
+#include "PerfMonitorV2.h"
 #include "ScopedExecutor.h"
 #include "WeakList.h"
 
@@ -126,6 +127,12 @@ class HostTargetDelegate : public LoadNetworkResourceDelegate {
    */
   virtual void onSetPausedInDebuggerMessage(const OverlaySetPausedInDebuggerMessageRequest &request) = 0;
 
+  /**
+   * [Experimental] Called when the runtime has new data for the V2 Perf
+   * Monitor overlay. This is called on the inspector thread.
+   */
+  virtual void unstable_onPerfIssueAdded(const PerfIssuePayload & /*issue*/) {}
+
   /**
    * Called by NetworkIOAgent on handling a `Network.loadNetworkResource` CDP
    * request. Platform implementations should override this to perform a
@@ -166,6 +173,13 @@ class HostTargetController final {
 
   bool hasInstance() const;
 
+  /**
+   * [Experimental] Install a runtime binding subscribing to new Performance
+   * Issues, which we broadcast to the V2 Perf Monitor overlay via
+   * \ref HostTargetDelegate::unstable_onPerfIssueAdded.
+   */
+  void installPerfIssuesBinding();
+
   /**
    * Increments the target's pause overlay counter. The counter represents the
    * exact number of Agents that have (concurrently) requested the pause
@@ -325,6 +339,7 @@ class JSINSPECTOR_EXPORT HostTarget : public EnableExecutorFromThis<HostTarget>
   std::shared_ptr<ExecutionContextManager> executionContextManager_;
   std::shared_ptr<InstanceTarget> currentInstance_{nullptr};
   std::unique_ptr<HostCommandSender> commandSender_;
+  std::unique_ptr<PerfMonitorUpdateHandler> perfMonitorUpdateHandler_;
   std::unique_ptr<HostRuntimeBinding> perfMetricsBinding_;
 
   /**
@@ -345,6 +360,13 @@ class JSINSPECTOR_EXPORT HostTarget : public EnableExecutorFromThis<HostTarget>
     return currentInstance_ != nullptr;
   }
 
+  /**
+   * [Experimental] Install a runtime binding subscribing to new Peformance
+   * Issues, which we broadcast to the V2 Perf Monitor overlay via
+   * \ref HostTargetDelegate::unstable_onPerfMonitorUpdate.
+   */
+  void installPerfIssuesBinding();
+
   // Necessary to allow HostAgent to access HostTarget's internals in a
   // controlled way (i.e. only HostTargetController gets friend access, while
   // HostAgent itself doesn't).

packages/react-native/ReactCommon/jsinspector-modern/InspectorFlags.cpp

@@ -33,6 +33,10 @@ bool InspectorFlags::getNetworkInspectionEnabled() const {
   return loadFlagsAndAssertUnchanged().networkInspectionEnabled;
 }
 
+bool InspectorFlags::getPerfIssuesEnabled() const {
+  return loadFlagsAndAssertUnchanged().perfIssuesEnabled;
+}
+
 void InspectorFlags::dangerouslyResetFlags() {
   *this = InspectorFlags{};
 }
@@ -59,6 +63,7 @@ const InspectorFlags::Values& InspectorFlags::loadFlagsAndAssertUnchanged()
       .networkInspectionEnabled =
           ReactNativeFeatureFlags::enableBridgelessArchitecture() &&
           ReactNativeFeatureFlags::fuseboxNetworkInspectionEnabled(),
+      .perfIssuesEnabled = ReactNativeFeatureFlags::perfIssuesEnabled(),
   };
 
   if (cachedValues_.has_value() && !inconsistentFlagsStateLogged_) {

packages/react-native/ReactCommon/jsinspector-modern/InspectorFlags.h

@@ -35,6 +35,11 @@ class InspectorFlags {
    */
   bool getNetworkInspectionEnabled() const;
 
+  /**
+   * Flag determining if the V2 in-app Performance Monitor is enabled.
+   */
+  bool getPerfIssuesEnabled() const;
+
   /**
    * Forcibly disable the main `getFuseboxEnabled()` flag. This should ONLY be
    * used by `ReactInstanceIntegrationTest`.
@@ -52,6 +57,7 @@ class InspectorFlags {
     bool fuseboxEnabled;
     bool isProfilingBuild;
     bool networkInspectionEnabled;
+    bool perfIssuesEnabled;
     bool operator==(const Values &) const = default;
   };