Add performance track for React Native renderer (#55936)

Summary:
Pull Request resolved: #55936

Changelog: [General][Added] Add new custom track for React Native Renderer operations in React Native DevTools performance traces

This diff adds performance tracking instrumentation to the React Native renderer to provide visibility into rendering operations in React Native Developer Tools traces.

On Android (Kotlin), the `MountItemDispatcher` is updated to wrap key mounting operations (view commands, premount, and mount) with `PerformanceTracer.trace` calls. These traces appear on the "Renderer" track within the "⚛ Native" track group.

On C++ (shared renderer), the `ShadowTree::tryCommit` method is instrumented with `PerformanceTracerSection` to track commit and layout operations. The commit trace includes metadata about the source of the commit (e.g., React).

Reviewed By: sammy-SC

Differential Revision: D88863291

fbshipit-source-id: 6401d7e45b4649c848825c47f6a214e7c387d34e

Author: rubennorte

packages/react-native/Package.swift

@@ -456,7 +456,7 @@ let reactFabric = RNTarget(
     "components/virtualview",
     "components/root/tests",
   ],
-  dependencies: [.reactNativeDependencies, .reactJsiExecutor, .rctTypesafety, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .reactRendererDebug, .reactGraphics, .yoga],
+  dependencies: [.reactNativeDependencies, .reactJsiExecutor, .rctTypesafety, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .reactRendererDebug, .reactGraphics, .yoga, .reactJsInspectorTracing],
   sources: ["animated", "animationbackend", "animations", "attributedstring", "core", "componentregistry", "componentregistry/native", "components/root", "components/view", "components/view/platform/cxx", "components/scrollview", "components/scrollview/platform/cxx", "components/scrollview/platform/ios", "components/legacyviewmanagerinterop", "components/legacyviewmanagerinterop/platform/ios", "dom", "scheduler", "mounting", "observers/events", "observers/intersection", "telemetry", "consistency", "leakchecker", "uimanager", "uimanager/consistency", "viewtransition"]
 )
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/MountItemDispatcher.kt

@@ -21,6 +21,7 @@ import com.facebook.react.fabric.FabricUIManager
 import com.facebook.react.fabric.mounting.mountitems.DispatchCommandMountItem
 import com.facebook.react.fabric.mounting.mountitems.MountItem
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
+import com.facebook.react.internal.tracing.PerformanceTracer
 import com.facebook.systrace.Systrace
 import java.util.Queue
 import java.util.concurrent.ConcurrentLinkedQueue
@@ -201,9 +202,16 @@ internal class MountItemDispatcher(
           "MountItemDispatcher::mountViews viewCommandMountItems",
       )
 
-      for (command in commands) {
-        dispatchViewCommand(command)
-      }
+      PerformanceTracer.trace(
+          "view commands",
+          "Renderer",
+          "⚛ Native",
+          { ->
+            for (command in commands) {
+              dispatchViewCommand(command)
+            }
+          },
+      )
 
       Systrace.endSection(Systrace.TRACE_TAG_REACT)
     }
@@ -215,12 +223,21 @@ internal class MountItemDispatcher(
           Systrace.TRACE_TAG_REACT,
           "MountItemDispatcher::mountViews preMountItems",
       )
-      for (preMountItem in preMountItems) {
-        if (ReactNativeFeatureFlags.enableFabricLogs()) {
-          printMountItem(preMountItem, "dispatchMountItems: Executing preMountItem")
-        }
-        executeOrEnqueue(preMountItem)
-      }
+
+      PerformanceTracer.trace(
+          "premount",
+          "Renderer",
+          "⚛ Native",
+          { ->
+            for (preMountItem in preMountItems) {
+              if (ReactNativeFeatureFlags.enableFabricLogs()) {
+                printMountItem(preMountItem, "dispatchMountItems: Executing preMountItem")
+              }
+              executeOrEnqueue(preMountItem)
+            }
+          },
+      )
+
       Systrace.endSection(Systrace.TRACE_TAG_REACT)
     }
 
@@ -229,44 +246,56 @@ internal class MountItemDispatcher(
           Systrace.TRACE_TAG_REACT,
           "MountItemDispatcher::mountViews mountItems to execute",
       )
-      val batchedExecutionStartTime = SystemClock.uptimeMillis()
-
-      for (mountItem in items) {
-        if (ReactNativeFeatureFlags.enableFabricLogs()) {
-          printMountItem(mountItem, "dispatchMountItems: Executing mountItem")
-        }
-
-        val command = mountItem as? DispatchCommandMountItem
-        if (command != null) {
-          dispatchViewCommand(command)
-          continue
-        }
 
-        try {
-          executeOrEnqueue(mountItem)
-        } catch (e: Throwable) {
-          // If there's an exception, we want to log diagnostics in prod and rethrow.
-          FLog.e(TAG, "dispatchMountItems: caught exception, displaying mount state", e)
-          for (m in items) {
-            if (m === mountItem) {
-              // We want to mark the mount item that caused exception
-              FLog.e(TAG, "dispatchMountItems: mountItem: next mountItem triggered exception!")
+      PerformanceTracer.trace(
+          "mount",
+          "Renderer",
+          "⚛ Native",
+          { ->
+            val batchedExecutionStartTime = SystemClock.uptimeMillis()
+
+            for (mountItem in items) {
+              if (ReactNativeFeatureFlags.enableFabricLogs()) {
+                printMountItem(mountItem, "dispatchMountItems: Executing mountItem")
+              }
+
+              val command = mountItem as? DispatchCommandMountItem
+              if (command != null) {
+                dispatchViewCommand(command)
+                continue
+              }
+
+              try {
+                executeOrEnqueue(mountItem)
+              } catch (e: Throwable) {
+                // If there's an exception, we want to log diagnostics in prod and rethrow.
+                FLog.e(TAG, "dispatchMountItems: caught exception, displaying mount state", e)
+                for (m in items) {
+                  if (m === mountItem) {
+                    // We want to mark the mount item that caused exception
+                    FLog.e(
+                        TAG,
+                        "dispatchMountItems: mountItem: next mountItem triggered exception!",
+                    )
+                  }
+                  printMountItem(m, "dispatchMountItems: mountItem")
+                }
+
+                if (mountItem.getSurfaceId() != View.NO_ID) {
+                  mountingManager.getSurfaceManager(mountItem.getSurfaceId())?.printSurfaceState()
+                }
+
+                if (ReactIgnorableMountingException.isIgnorable(e)) {
+                  ReactSoftExceptionLogger.logSoftException(TAG, e)
+                } else {
+                  throw e
+                }
+              }
             }
-            printMountItem(m, "dispatchMountItems: mountItem")
-          }
-
-          if (mountItem.getSurfaceId() != View.NO_ID) {
-            mountingManager.getSurfaceManager(mountItem.getSurfaceId())?.printSurfaceState()
-          }
+            batchedExecutionTime += SystemClock.uptimeMillis() - batchedExecutionStartTime
+          },
+      )
 
-          if (ReactIgnorableMountingException.isIgnorable(e)) {
-            ReactSoftExceptionLogger.logSoftException(TAG, e)
-          } else {
-            throw e
-          }
-        }
-      }
-      batchedExecutionTime += SystemClock.uptimeMillis() - batchedExecutionStartTime
       Systrace.endSection(Systrace.TRACE_TAG_REACT)
     }
 
@@ -297,26 +326,34 @@ internal class MountItemDispatcher(
   private fun dispatchPreMountItemsImpl(deadline: Long) {
     Systrace.beginSection(Systrace.TRACE_TAG_REACT, "MountItemDispatcher::premountViews")
 
-    // dispatchPreMountItems cannot be reentrant, but we want to prevent dispatchMountItems from
-    // reentering during dispatchPreMountItems
-    inDispatch = true
-
-    try {
-      while (true) {
-        if (System.nanoTime() > deadline) {
-          break
-        }
-
-        // If list is empty, `poll` will return null, or var will never be set
-        val preMountItemToDispatch = preMountItems.poll() ?: break
-        if (ReactNativeFeatureFlags.enableFabricLogs()) {
-          printMountItem(preMountItemToDispatch, "dispatchPreMountItems")
-        }
-        executeOrEnqueue(preMountItemToDispatch)
-      }
-    } finally {
-      inDispatch = false
-    }
+    PerformanceTracer.trace(
+        "premount",
+        "Renderer",
+        "⚛ Native",
+        { ->
+          // dispatchPreMountItems cannot be reentrant, but we want to prevent dispatchMountItems
+          // from
+          // reentering during dispatchPreMountItems
+          inDispatch = true
+
+          try {
+            while (true) {
+              if (System.nanoTime() > deadline) {
+                break
+              }
+
+              // If list is empty, `poll` will return null, or var will never be set
+              val preMountItemToDispatch = preMountItems.poll() ?: break
+              if (ReactNativeFeatureFlags.enableFabricLogs()) {
+                printMountItem(preMountItemToDispatch, "dispatchPreMountItems")
+              }
+              executeOrEnqueue(preMountItemToDispatch)
+            }
+          } finally {
+            inDispatch = false
+          }
+        },
+    )
 
     Systrace.endSection(Systrace.TRACE_TAG_REACT)
   }

packages/react-native/ReactCommon/React-Fabric.podspec

@@ -173,6 +173,7 @@ Pod::Spec.new do |s|
   end
 
   s.subspec "mounting" do |ss|
+    ss.dependency             "React-jsinspectortracing"
     ss.source_files         = podspec_sources("react/renderer/mounting/**/*.{m,mm,cpp,h}", "react/renderer/mounting/**/*.h")
     ss.exclude_files        = "react/renderer/mounting/tests"
     ss.header_dir           = "react/renderer/mounting"

packages/react-native/ReactCommon/react/renderer/mounting/CMakeLists.txt

@@ -22,6 +22,7 @@ target_link_libraries(react_renderer_mounting
         glog
         glog_init
         jsi
+        jsinspector_tracing
         react_debug
         react_renderer_core
         react_renderer_debug

packages/react-native/ReactCommon/react/renderer/mounting/ShadowTree.cpp

@@ -8,6 +8,7 @@
 #include "ShadowTree.h"
 
 #include <cxxreact/TraceSection.h>
+#include <jsinspector-modern/tracing/PerformanceTracerSection.h>
 #include <react/debug/react_native_assert.h>
 #include <react/renderer/components/root/RootComponentDescriptor.h>
 #include <react/renderer/components/view/ViewShadowNode.h>
@@ -24,6 +25,19 @@ namespace facebook::react {
 
 namespace {
 const int MAX_COMMIT_ATTEMPTS_BEFORE_LOCKING = 3;
+
+std::string getShadowTreeCommitSourceName(ShadowTreeCommitSource source) {
+  switch (source) {
+    case ShadowTreeCommitSource::Unknown:
+      return "Unknown";
+    case ShadowTreeCommitSource::React:
+      return "React";
+    case ShadowTreeCommitSource::AnimationEndSync:
+      return "AnimationEndSync";
+    case ShadowTreeCommitSource::ReactRevisionMerge:
+      return "ReactRevisionMerge";
+  }
+}
 } // namespace
 
 using CommitStatus = ShadowTree::CommitStatus;
@@ -316,6 +330,13 @@ CommitStatus ShadowTree::tryCommit(
     const ShadowTreeCommitTransaction& transaction,
     const CommitOptions& commitOptions) const {
   TraceSection s("ShadowTree::commit");
+  jsinspector_modern::tracing::PerformanceTracerSection s1(
+      "commit",
+      "Renderer",
+      "⚛ Native",
+      nullptr,
+      "source",
+      getShadowTreeCommitSourceName(commitOptions.source));
 
   auto isReactBranch = ReactNativeFeatureFlags::enableFabricCommitBranching() &&
       commitOptions.source == CommitSource::React;
@@ -382,7 +403,11 @@ CommitStatus ShadowTree::tryCommit(
 
   telemetry.willLayout();
   telemetry.setAsThreadLocal();
-  newRootShadowNode->layoutIfNeeded(&affectedLayoutableNodes);
+  {
+    jsinspector_modern::tracing::PerformanceTracerSection s2(
+        "layout", "Renderer", "⚛ Native");
+    newRootShadowNode->layoutIfNeeded(&affectedLayoutableNodes);
+  }
   telemetry.unsetAsThreadLocal();
   telemetry.didLayout(static_cast<int>(affectedLayoutableNodes.size()));