Add Performance Issues to Perf Monitor (1/2) (#54265)

Summary:

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**

- Adds a `perfIssuesEnabled` feature flag.
- Initial implementation of the above API.
- Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see facebook/react#34961).

This feature is gated by the `perfMonitorV2Enabled` feature flag.

Changelog: [Internal]

Differential Revision: D85448200

Author: huntie

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<3ea1ee77358d99334a7c40bed44f2d90>>
+ * @generated SignedSource<<bac9e360daa589cba476d208f75ef2ca>>
  */
 
 /**
@@ -372,6 +372,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun overrideBySynchronousMountPropsAtMountingAndroid(): Boolean = accessor.overrideBySynchronousMountPropsAtMountingAndroid()
 
+  /**
+   * Enable reporting Performance Issues (`detail.rnPerfIssue`). Displayed in the V2 Performance Monitor and the "Performance Issues" sub-panel in DevTools.
+   */
+  @JvmStatic
+  public fun perfIssuesEnabled(): Boolean = accessor.perfIssuesEnabled()
+
   /**
    * Enable the V2 in-app Performance Monitor. This flag is global and should not be changed across React Host lifetimes.
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<007a5a1235a999716b382ffd4ca23158>>
+ * @generated SignedSource<<2003ae7fc2c782b997d21938cc7b2380>>
  */
 
 /**
@@ -77,6 +77,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var fuseboxNetworkInspectionEnabledCache: Boolean? = null
   private var hideOffscreenVirtualViewsOnIOSCache: Boolean? = null
   private var overrideBySynchronousMountPropsAtMountingAndroidCache: Boolean? = null
+  private var perfIssuesEnabledCache: Boolean? = null
   private var perfMonitorV2EnabledCache: Boolean? = null
   private var preparedTextCacheSizeCache: Double? = null
   private var preventShadowTreeCommitExhaustionCache: Boolean? = null
@@ -615,6 +616,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun perfIssuesEnabled(): Boolean {
+    var cached = perfIssuesEnabledCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.perfIssuesEnabled()
+      perfIssuesEnabledCache = cached
+    }
+    return cached
+  }
+
   override fun perfMonitorV2Enabled(): Boolean {
     var cached = perfMonitorV2EnabledCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<8a775646d455cdb6d017fd08aee3e807>>
+ * @generated SignedSource<<986b35ba4f323ab1a65dd70a559889e9>>
  */
 
 /**
@@ -142,6 +142,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun overrideBySynchronousMountPropsAtMountingAndroid(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun perfIssuesEnabled(): Boolean
+
   @DoNotStrip @JvmStatic public external fun perfMonitorV2Enabled(): Boolean
 
   @DoNotStrip @JvmStatic public external fun preparedTextCacheSize(): Double

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<afccaed3066598724041c48bfb524234>>
+ * @generated SignedSource<<43f629e3be734826b241d7e596daf6f4>>
  */
 
 /**
@@ -137,6 +137,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun overrideBySynchronousMountPropsAtMountingAndroid(): Boolean = false
 
+  override fun perfIssuesEnabled(): Boolean = false
+
   override fun perfMonitorV2Enabled(): Boolean = false
 
   override fun preparedTextCacheSize(): Double = 200.0

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<ebeb9b37b8d3d0e31f4d4966cbf42b3f>>
+ * @generated SignedSource<<806741418f4ff7e3b6dcac3d78fa27dd>>
  */
 
 /**
@@ -81,6 +81,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var fuseboxNetworkInspectionEnabledCache: Boolean? = null
   private var hideOffscreenVirtualViewsOnIOSCache: Boolean? = null
   private var overrideBySynchronousMountPropsAtMountingAndroidCache: Boolean? = null
+  private var perfIssuesEnabledCache: Boolean? = null
   private var perfMonitorV2EnabledCache: Boolean? = null
   private var preparedTextCacheSizeCache: Double? = null
   private var preventShadowTreeCommitExhaustionCache: Boolean? = null
@@ -676,6 +677,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun perfIssuesEnabled(): Boolean {
+    var cached = perfIssuesEnabledCache
+    if (cached == null) {
+      cached = currentProvider.perfIssuesEnabled()
+      accessedFeatureFlags.add("perfIssuesEnabled")
+      perfIssuesEnabledCache = cached
+    }
+    return cached
+  }
+
   override fun perfMonitorV2Enabled(): Boolean {
     var cached = perfMonitorV2EnabledCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<1c4ea60d119996f37742542976fedcc8>>
+ * @generated SignedSource<<1a08578b36cb91a183a435b881ca272f>>
  */
 
 /**
@@ -137,6 +137,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun overrideBySynchronousMountPropsAtMountingAndroid(): Boolean
 
+  @DoNotStrip public fun perfIssuesEnabled(): Boolean
+
   @DoNotStrip public fun perfMonitorV2Enabled(): Boolean
 
   @DoNotStrip public fun preparedTextCacheSize(): Double

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<d04720bbbd42eaf338be612a0f3e36a6>>
+ * @generated SignedSource<<4c22217e5a773fd97f4041ef6e052ebc>>
  */
 
 /**
@@ -381,6 +381,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool perfIssuesEnabled() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("perfIssuesEnabled");
+    return method(javaProvider_);
+  }
+
   bool perfMonitorV2Enabled() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("perfMonitorV2Enabled");
@@ -814,6 +820,11 @@ bool JReactNativeFeatureFlagsCxxInterop::overrideBySynchronousMountPropsAtMounti
   return ReactNativeFeatureFlags::overrideBySynchronousMountPropsAtMountingAndroid();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::perfIssuesEnabled(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::perfIssuesEnabled();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::perfMonitorV2Enabled(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::perfMonitorV2Enabled();
@@ -1136,6 +1147,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "overrideBySynchronousMountPropsAtMountingAndroid",
         JReactNativeFeatureFlagsCxxInterop::overrideBySynchronousMountPropsAtMountingAndroid),
+      makeNativeMethod(
+        "perfIssuesEnabled",
+        JReactNativeFeatureFlagsCxxInterop::perfIssuesEnabled),
       makeNativeMethod(
         "perfMonitorV2Enabled",
         JReactNativeFeatureFlagsCxxInterop::perfMonitorV2Enabled),

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<7679a91daba1f8941b78a4be4baea6ef>>
+ * @generated SignedSource<<91f5bbbab5f34321687c6f6d31ca49d8>>
  */
 
 /**
@@ -201,6 +201,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool overrideBySynchronousMountPropsAtMountingAndroid(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool perfIssuesEnabled(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool perfMonitorV2Enabled(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<303e8208cbdf0b9b9041942822c5597d>>
+ * @generated SignedSource<<91ecd61e5e2ed1a15248db4e40993018>>
  */
 
 /**
@@ -254,6 +254,10 @@ bool ReactNativeFeatureFlags::overrideBySynchronousMountPropsAtMountingAndroid()
   return getAccessor().overrideBySynchronousMountPropsAtMountingAndroid();
 }
 
+bool ReactNativeFeatureFlags::perfIssuesEnabled() {
+  return getAccessor().perfIssuesEnabled();
+}
+
 bool ReactNativeFeatureFlags::perfMonitorV2Enabled() {
   return getAccessor().perfMonitorV2Enabled();
 }

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<07b665ad842faafaf7520051f636d805>>
+ * @generated SignedSource<<e996f8acef4c9feeda40ea920a2e5353>>
  */
 
 /**
@@ -324,6 +324,11 @@ class ReactNativeFeatureFlags {
    */
   RN_EXPORT static bool overrideBySynchronousMountPropsAtMountingAndroid();
 
+  /**
+   * Enable reporting Performance Issues (`detail.rnPerfIssue`). Displayed in the V2 Performance Monitor and the "Performance Issues" sub-panel in DevTools.
+   */
+  RN_EXPORT static bool perfIssuesEnabled();
+
   /**
    * Enable the V2 in-app Performance Monitor. This flag is global and should not be changed across React Host lifetimes.
    */