react-native 0.85.2 → 0.85.3

package/ReactCommon/jsinspector-modern/HostTargetTracing.cpp

@@ -93,7 +93,7 @@ void HostTarget::recordFrameTimings(
   std::lock_guard lock(tracingMutex_);
 
   if (traceRecording_) {
-    traceRecording_->recordFrameTimings(frameTimingSequence);
+    traceRecording_->recordFrameTimings(std::move(frameTimingSequence));
   } else {
     assert(
         false &&

package/ReactCommon/jsinspector-modern/HostTargetTracing.h

@@ -35,10 +35,10 @@ void emitNotificationsForTracingProfile(
     std::convertible_to<std::ranges::range_value_t<ChannelsRange>, FrontendChannel>
 {
   /**
-   * Threshold for the size Trace Event chunk, that will be flushed out with
-   * Tracing.dataCollected event.
+   * Maximum serialized byte size of a Trace Event chunk before it is flushed
+   * with a Tracing.dataCollected event.
    */
-  static constexpr uint16_t TRACE_EVENT_CHUNK_SIZE = 1000;
+  static constexpr size_t TRACE_EVENT_CHUNK_MAX_BYTES = 10 * 1024 * 1024; // 10 MiB
 
   /**
    * The maximum number of ProfileChunk trace events
@@ -65,7 +65,7 @@ void emitNotificationsForTracingProfile(
               cdp::jsonNotification("Tracing.dataCollected", folly::dynamic::object("value", serializedChunk)));
         }
       },
-      TRACE_EVENT_CHUNK_SIZE,
+      TRACE_EVENT_CHUNK_MAX_BYTES,
       PROFILE_TRACE_EVENT_CHUNK_SIZE);
 
   for (auto &frontendChannel : channels) {

package/ReactCommon/jsinspector-modern/InspectorFlags.cpp

@@ -21,6 +21,14 @@ bool InspectorFlags::getAssertSingleHostState() const {
   return loadFlagsAndAssertUnchanged().assertSingleHostState;
 }
 
+bool InspectorFlags::getScreenshotCaptureEnabled() const {
+  return loadFlagsAndAssertUnchanged().screenshotCaptureEnabled;
+}
+
+bool InspectorFlags::getFrameRecordingEnabled() const {
+  return loadFlagsAndAssertUnchanged().frameRecordingEnabled;
+}
+
 bool InspectorFlags::getFuseboxEnabled() const {
   if (fuseboxDisabledForTest_) {
     return false;
@@ -54,6 +62,10 @@ const InspectorFlags::Values& InspectorFlags::loadFlagsAndAssertUnchanged()
   InspectorFlags::Values newValues = {
       .assertSingleHostState =
           ReactNativeFeatureFlags::fuseboxAssertSingleHostState(),
+      .screenshotCaptureEnabled =
+          ReactNativeFeatureFlags::fuseboxScreenshotCaptureEnabled(),
+      .frameRecordingEnabled =
+          ReactNativeFeatureFlags::fuseboxFrameRecordingEnabled(),
       .fuseboxEnabled =
 #if defined(REACT_NATIVE_DEBUGGER_ENABLED)
           true,

package/ReactCommon/jsinspector-modern/InspectorFlags.h

@@ -36,6 +36,16 @@ class InspectorFlags {
    */
   bool getIsProfilingBuild() const;
 
+  /**
+   * Flag determining if Page.captureScreenshot CDP method is enabled.
+   */
+  bool getScreenshotCaptureEnabled() const;
+
+  /**
+   * Flag determining if frame recording (timings + screenshots) is enabled.
+   */
+  bool getFrameRecordingEnabled() const;
+
   /**
    * Flag determining if network inspection is enabled.
    */
@@ -61,6 +71,8 @@ class InspectorFlags {
  private:
   struct Values {
     bool assertSingleHostState;
+    bool screenshotCaptureEnabled;
+    bool frameRecordingEnabled;
     bool fuseboxEnabled;
     bool isProfilingBuild;
     bool networkInspectionEnabled;

package/ReactCommon/jsinspector-modern/NetworkIOAgent.cpp

@@ -8,10 +8,10 @@
 #include "NetworkIOAgent.h"
 #include "InspectorFlags.h"
 
-#include "Base64.h"
 #include "Utf8.h"
 
 #include <jsinspector-modern/network/NetworkHandler.h>
+#include <react/utils/Base64.h>
 
 #include <sstream>
 #include <tuple>

package/ReactCommon/jsinspector-modern/RuntimeAgent.cpp

@@ -8,6 +8,10 @@
 #include "RuntimeAgent.h"
 #include "SessionState.h"
 
+#include <folly/dynamic.h>
+#include <jsinspector-modern/cdp/CdpJson.h>
+
+#include <chrono>
 #include <utility>
 
 namespace facebook::react::jsinspector_modern {
@@ -119,6 +123,21 @@ void RuntimeAgent::notifyBindingCalled(
               "name", bindingName)("payload", payload)));
 }
 
+void RuntimeAgent::notifyFastRefreshComplete() {
+  if (!sessionState_.isReactNativeApplicationDomainEnabled) {
+    return;
+  }
+  folly::dynamic params = folly::dynamic::object(
+      "timestamp",
+      std::chrono::duration_cast<std::chrono::milliseconds>(
+          std::chrono::system_clock::now().time_since_epoch())
+          .count());
+  frontendChannel_(
+      cdp::jsonNotification(
+          "ReactNativeApplication.unstable_fastRefreshComplete",
+          std::move(params)));
+}
+
 RuntimeAgent::ExportedState RuntimeAgent::getExportedState() {
   return {
       .delegateState = delegate_ ? delegate_->getExportedState() : nullptr,

package/ReactCommon/jsinspector-modern/RuntimeAgent.h

@@ -72,6 +72,13 @@ class RuntimeAgent final {
 
   void notifyBindingCalled(const std::string &bindingName, const std::string &payload);
 
+  /**
+   * Called by RuntimeTarget when JS calls __notifyFastRefreshComplete().
+   * Emits a ReactNativeApplication.unstable_fastRefreshComplete CDP
+   * notification if the ReactNativeApplication domain is enabled.
+   */
+  void notifyFastRefreshComplete();
+
   struct ExportedState {
     std::unique_ptr<RuntimeAgentDelegate::ExportedState> delegateState;
   };

package/ReactCommon/jsinspector-modern/RuntimeTarget.cpp

@@ -47,6 +47,8 @@ void RuntimeTarget::installGlobals() {
   // NOTE: RuntimeTarget::installNetworkReporterAPI is in
   // RuntimeTargetNetwork.cpp
   installNetworkReporterAPI();
+
+  installFastRefreshHandler();
 }
 
 std::shared_ptr<RuntimeAgent> RuntimeTarget::createAgent(
@@ -128,6 +130,37 @@ void RuntimeTarget::installBindingHandler(const std::string& bindingName) {
   });
 }
 
+void RuntimeTarget::installFastRefreshHandler() {
+  jsExecutor_([selfExecutor = executorFromThis()](jsi::Runtime& runtime) {
+    auto globalObj = runtime.global();
+    try {
+      auto name =
+          jsi::PropNameID::forUtf8(runtime, "__notifyFastRefreshComplete");
+      globalObj.setProperty(
+          runtime,
+          name,
+          jsi::Function::createFromHostFunction(
+              runtime,
+              name,
+              0,
+              [selfExecutor](
+                  jsi::Runtime& /*rt*/,
+                  const jsi::Value&,
+                  const jsi::Value*,
+                  size_t) -> jsi::Value {
+                selfExecutor([](auto& self) {
+                  self.agents_.forEach(
+                      [](auto& agent) { agent.notifyFastRefreshComplete(); });
+                });
+
+                return jsi::Value::undefined();
+              }));
+    } catch (jsi::JSError&) {
+      // Swallow JavaScript exceptions that occur while setting up the global.
+    }
+  });
+}
+
 void RuntimeTarget::emitDebuggerSessionCreated() {
   jsExecutor_([selfExecutor = executorFromThis()](jsi::Runtime& runtime) {
     try {

package/ReactCommon/jsinspector-modern/RuntimeTarget.h

@@ -295,6 +295,12 @@ class JSINSPECTOR_EXPORT RuntimeTarget : public EnableExecutorFromThis<RuntimeTa
    */
   void installGlobals();
 
+  /**
+   * Installs __notifyFastRefreshComplete on the runtime's global object.
+   * When called from JS, dispatches to all connected RuntimeAgents.
+   */
+  void installFastRefreshHandler();
+
   /**
    * Install the console API handler.
    */

package/ReactCommon/jsinspector-modern/tests/HostTargetTest.cpp

@@ -1579,4 +1579,16 @@ TEST_F(HostTargetTest, TracingDelegateIsNotifiedOnDirectTracingCall) {
   page_->stopTracing();
 }
 
+TEST_F(HostTargetProtocolTest, CaptureScreenshotNotSupportedWhenFlagDisabled) {
+  EXPECT_CALL(
+      fromPage(),
+      onMessage(JsonParsed(AllOf(
+          AtJsonPtr("/error/code", Eq(-32601)), AtJsonPtr("/id", Eq(1))))))
+      .RetiresOnSaturation();
+  toPage_->sendMessage(R"({
+                           "id": 1,
+                           "method": "Page.captureScreenshot"
+                         })");
+}
+
 } // namespace facebook::react::jsinspector_modern

package/ReactCommon/jsinspector-modern/tests/InspectorMocks.h

@@ -87,13 +87,13 @@ class MockInspectorPackagerConnectionDelegate : public InspectorPackagerConnecti
   explicit MockInspectorPackagerConnectionDelegate(folly::Executor &executor) : executor_(executor)
   {
     using namespace testing;
-    ON_CALL(*this, scheduleCallback(_, _)).WillByDefault(Invoke<>([this](auto callback, auto delay) {
+    ON_CALL(*this, scheduleCallback(_, _)).WillByDefault([this](auto callback, auto delay) {
       if (auto scheduledExecutor = dynamic_cast<folly::ScheduledExecutor *>(&executor_)) {
         scheduledExecutor->scheduleAt(callback, scheduledExecutor->now() + delay);
       } else {
         executor_.add(callback);
       }
-    }));
+    });
     EXPECT_CALL(*this, scheduleCallback(_, _)).Times(AnyNumber());
   }
 
@@ -137,6 +137,7 @@ class MockHostTargetDelegate : public HostTargetDelegate {
       loadNetworkResource,
       (const LoadNetworkResourceRequest &params, ScopedExecutor<NetworkRequestListener> executor),
       (override));
+  MOCK_METHOD(std::optional<std::string>, captureScreenshot, (const PageCaptureScreenshotRequest &request), (override));
 
   HostTargetTracingDelegate *getTracingDelegate() override
   {

package/ReactCommon/jsinspector-modern/tests/JsiIntegrationTest.cpp

@@ -358,6 +358,7 @@ TYPED_TEST(JsiIntegrationPortableTest, ReactNativeApplicationEnable) {
                                           "method": "ReactNativeApplication.metadataUpdated",
                                           "params": {
                                             "integrationName": "JsiIntegrationTest",
+                                            "unstable_frameRecordingEnabled": false,
                                             "unstable_isProfilingBuild": false,
                                             "unstable_networkInspectionEnabled": false
                                           }

package/ReactCommon/jsinspector-modern/tests/NetworkReporterTest.cpp

@@ -38,10 +38,10 @@ class NetworkReporterTestBase : public TracingTestBase<
  protected:
   NetworkReporterTestBase()
       : TracingTestBase({
-            .networkInspectionEnabled = true,
             .enableNetworkEventReporting =
                 WithParamInterface<Params>::GetParam()
                     .enableNetworkEventReporting,
+            .networkInspectionEnabled = true,
         }) {}
 
   void SetUp() override {

package/ReactCommon/jsinspector-modern/tests/TracingTest.cpp

@@ -103,7 +103,7 @@ TEST_F(TracingTest, EmitsScreenshotEventWhenScreenshotValuePassed) {
           11, // threadId
           now,
           now + HighResDuration::fromNanoseconds(50),
-          "base64EncodedScreenshotData"));
+          std::vector<uint8_t>{}));
 
   auto allTraceEvents = endTracingAndCollectEvents();
   EXPECT_THAT(allTraceEvents, Contains(AtJsonPtr("/name", "Screenshot")));

package/ReactCommon/jsinspector-modern/tests/utils/InspectorFlagOverridesGuard.cpp

@@ -26,11 +26,21 @@ class ReactNativeFeatureFlagsOverrides
       const InspectorFlagOverrides& overrides)
       : overrides_(overrides) {}
 
+  bool fuseboxScreenshotCaptureEnabled() override {
+    return overrides_.screenshotCaptureEnabled.value_or(
+        ReactNativeFeatureFlagsDefaults::fuseboxScreenshotCaptureEnabled());
+  }
+
   bool fuseboxEnabledRelease() override {
     return overrides_.fuseboxEnabledRelease.value_or(
         ReactNativeFeatureFlagsDefaults::fuseboxEnabledRelease());
   }
 
+  bool fuseboxFrameRecordingEnabled() override {
+    return overrides_.frameRecordingEnabled.value_or(
+        ReactNativeFeatureFlagsDefaults::fuseboxFrameRecordingEnabled());
+  }
+
   bool fuseboxNetworkInspectionEnabled() override {
     return overrides_.networkInspectionEnabled.value_or(
         ReactNativeFeatureFlagsDefaults::fuseboxNetworkInspectionEnabled());

package/ReactCommon/jsinspector-modern/tests/utils/InspectorFlagOverridesGuard.h

@@ -19,9 +19,11 @@ namespace facebook::react::jsinspector_modern {
 struct InspectorFlagOverrides {
   // NOTE: Keep these entries in sync with ReactNativeFeatureFlagsOverrides in
   // the implementation file.
+  std::optional<bool> screenshotCaptureEnabled;
+  std::optional<bool> enableNetworkEventReporting;
+  std::optional<bool> frameRecordingEnabled;
   std::optional<bool> fuseboxEnabledRelease;
   std::optional<bool> networkInspectionEnabled;
-  std::optional<bool> enableNetworkEventReporting;
 };
 
 /**

package/ReactCommon/jsinspector-modern/tracing/CMakeLists.txt

@@ -22,6 +22,7 @@ target_link_libraries(jsinspector_tracing
         jsinspector_network
         oscompat
         react_timing
+        react_utils
 )
 target_compile_reactnative_options(jsinspector_tracing PRIVATE)
 target_compile_options(jsinspector_tracing PRIVATE -Wpedantic)

package/ReactCommon/jsinspector-modern/tracing/FrameTimingSequence.h

@@ -11,6 +11,10 @@
 
 #include <react/timing/primitives.h>
 
+#include <cstdint>
+#include <optional>
+#include <vector>
+
 namespace facebook::react::jsinspector_modern::tracing {
 
 using FrameSequenceId = uint64_t;
@@ -26,7 +30,7 @@ struct FrameTimingSequence {
       ThreadId threadId,
       HighResTimeStamp beginTimestamp,
       HighResTimeStamp endTimestamp,
-      std::optional<std::string> screenshot = std::nullopt)
+      std::optional<std::vector<uint8_t>> screenshot = std::nullopt)
       : id(id),
         threadId(threadId),
         beginTimestamp(beginTimestamp),
@@ -49,9 +53,9 @@ struct FrameTimingSequence {
   HighResTimeStamp endTimestamp;
 
   /**
-   * Optional screenshot data (base64 encoded) captured during the frame.
+   * Optional screenshot data captured during the frame.
    */
-  std::optional<std::string> screenshot;
+  std::optional<std::vector<uint8_t>> screenshot;
 };
 
 } // namespace facebook::react::jsinspector_modern::tracing

package/ReactCommon/jsinspector-modern/tracing/HostTracingProfileSerializer.cpp

@@ -14,13 +14,6 @@ namespace facebook::react::jsinspector_modern::tracing {
 
 namespace {
 
-folly::dynamic generateNewChunk(uint16_t chunkSize) {
-  folly::dynamic chunk = folly::dynamic::array();
-  chunk.reserve(chunkSize);
-
-  return chunk;
-}
-
 /**
  * Hardcoded layer tree ID for all recorded frames.
  * https://chromedevtools.github.io/devtools-protocol/tot/LayerTree/
@@ -32,14 +25,14 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
 /* static */ void HostTracingProfileSerializer::emitAsDataCollectedChunks(
     HostTracingProfile&& hostTracingProfile,
     const std::function<void(folly::dynamic&&)>& chunkCallback,
-    uint16_t traceEventsChunkSize,
+    size_t maxChunkBytes,
     uint16_t profileTraceEventsChunkSize) {
   emitFrameTimings(
       std::move(hostTracingProfile.frameTimings),
       hostTracingProfile.processId,
       hostTracingProfile.startTime,
       chunkCallback,
-      traceEventsChunkSize);
+      maxChunkBytes);
 
   auto instancesProfiles =
       std::move(hostTracingProfile.instanceTracingProfiles);
@@ -49,7 +42,7 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
     emitPerformanceTraceEvents(
         std::move(instanceProfile.performanceTraceEvents),
         chunkCallback,
-        traceEventsChunkSize);
+        maxChunkBytes);
   }
 
   RuntimeSamplingProfileTraceEventSerializer::serializeAndDispatch(
@@ -63,16 +56,22 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
 /* static */ void HostTracingProfileSerializer::emitPerformanceTraceEvents(
     std::vector<TraceEvent>&& events,
     const std::function<void(folly::dynamic&&)>& chunkCallback,
-    uint16_t chunkSize) {
-  folly::dynamic chunk = generateNewChunk(chunkSize);
+    size_t maxChunkBytes) {
+  folly::dynamic chunk = folly::dynamic::array();
+  size_t currentChunkBytes = 0;
 
   for (auto& event : events) {
-    if (chunk.size() == chunkSize) {
+    auto serializedEvent = TraceEventSerializer::serialize(std::move(event));
+    size_t eventBytes = TraceEventSerializer::estimateJsonSize(serializedEvent);
+
+    if (currentChunkBytes + eventBytes > maxChunkBytes && !chunk.empty()) {
       chunkCallback(std::move(chunk));
-      chunk = generateNewChunk(chunkSize);
+      chunk = folly::dynamic::array();
+      currentChunkBytes = 0;
     }
 
-    chunk.push_back(TraceEventSerializer::serialize(std::move(event)));
+    chunk.push_back(std::move(serializedEvent));
+    currentChunkBytes += eventBytes;
   }
 
   if (!chunk.empty()) {
@@ -85,26 +84,30 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
     ProcessId processId,
     HighResTimeStamp recordingStartTimestamp,
     const std::function<void(folly::dynamic&& chunk)>& chunkCallback,
-    uint16_t chunkSize) {
+    size_t maxChunkBytes) {
   if (frameTimings.empty()) {
     return;
   }
 
-  folly::dynamic chunk = generateNewChunk(chunkSize);
+  folly::dynamic chunk = folly::dynamic::array();
+  size_t currentChunkBytes = 0;
+
   auto setLayerTreeIdEvent = TraceEventGenerator::createSetLayerTreeIdEvent(
       "", // Hardcoded frame name for the default (and only) layer.
       FALLBACK_LAYER_TREE_ID,
       processId,
       frameTimings.front().threadId,
       recordingStartTimestamp);
-  chunk.push_back(
-      TraceEventSerializer::serialize(std::move(setLayerTreeIdEvent)));
+  auto serializedSetLayerTreeId =
+      TraceEventSerializer::serialize(std::move(setLayerTreeIdEvent));
+  currentChunkBytes +=
+      TraceEventSerializer::estimateJsonSize(serializedSetLayerTreeId);
+  chunk.push_back(std::move(serializedSetLayerTreeId));
 
   for (auto&& frameTimingSequence : frameTimings) {
-    if (chunk.size() >= chunkSize) {
-      chunkCallback(std::move(chunk));
-      chunk = generateNewChunk(chunkSize);
-    }
+    // Serialize all events for this frame.
+    folly::dynamic frameEvents = folly::dynamic::array();
+    size_t totalFrameBytes = 0;
 
     auto [beginDrawingEvent, endDrawingEvent] =
         TraceEventGenerator::createFrameTimingsEvents(
@@ -115,10 +118,15 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
             processId,
             frameTimingSequence.threadId);
 
-    chunk.push_back(
-        TraceEventSerializer::serialize(std::move(beginDrawingEvent)));
-    chunk.push_back(
-        TraceEventSerializer::serialize(std::move(endDrawingEvent)));
+    auto serializedBegin =
+        TraceEventSerializer::serialize(std::move(beginDrawingEvent));
+    totalFrameBytes += TraceEventSerializer::estimateJsonSize(serializedBegin);
+    frameEvents.push_back(std::move(serializedBegin));
+
+    auto serializedEnd =
+        TraceEventSerializer::serialize(std::move(endDrawingEvent));
+    totalFrameBytes += TraceEventSerializer::estimateJsonSize(serializedEnd);
+    frameEvents.push_back(std::move(serializedEnd));
 
     if (frameTimingSequence.screenshot.has_value()) {
       auto screenshotEvent = TraceEventGenerator::createScreenshotEvent(
@@ -129,9 +137,24 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
           processId,
           frameTimingSequence.threadId);
 
-      chunk.push_back(
-          TraceEventSerializer::serialize(std::move(screenshotEvent)));
+      auto serializedScreenshot =
+          TraceEventSerializer::serialize(std::move(screenshotEvent));
+      totalFrameBytes +=
+          TraceEventSerializer::estimateJsonSize(serializedScreenshot);
+      frameEvents.push_back(std::move(serializedScreenshot));
+    }
+
+    // Flush current chunk if adding this frame would exceed the limit.
+    if (currentChunkBytes + totalFrameBytes > maxChunkBytes && !chunk.empty()) {
+      chunkCallback(std::move(chunk));
+      chunk = folly::dynamic::array();
+      currentChunkBytes = 0;
+    }
+
+    for (auto& frameEvent : frameEvents) {
+      chunk.push_back(std::move(frameEvent));
     }
+    currentChunkBytes += totalFrameBytes;
   }
 
   if (!chunk.empty()) {

package/ReactCommon/jsinspector-modern/tracing/HostTracingProfileSerializer.h

@@ -24,27 +24,27 @@ class HostTracingProfileSerializer {
  public:
   /**
    * Transforms the profile into a sequence of serialized Trace Events, which
-   * is split in chunks of sizes \p traceEventsChunkSize or
-   * \p profileTraceEventsChunkSize, depending on type, and sent with \p
-   * chunkCallback.
+   * is split in chunks of at most \p maxChunkBytes serialized bytes or
+   * \p profileTraceEventsChunkSize events, depending on type, and sent with
+   * \p chunkCallback.
    */
   static void emitAsDataCollectedChunks(
       HostTracingProfile &&hostTracingProfile,
       const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
-      uint16_t traceEventsChunkSize,
+      size_t maxChunkBytes,
       uint16_t profileTraceEventsChunkSize);
 
   static void emitPerformanceTraceEvents(
       std::vector<TraceEvent> &&events,
       const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
-      uint16_t chunkSize);
+      size_t maxChunkBytes);
 
   static void emitFrameTimings(
       std::vector<FrameTimingSequence> &&frameTimings,
       ProcessId processId,
       HighResTimeStamp recordingStartTimestamp,
       const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
-      uint16_t chunkSize);
+      size_t maxChunkBytes);
 };
 
 } // namespace facebook::react::jsinspector_modern::tracing

package/ReactCommon/jsinspector-modern/tracing/PerformanceTracerSection.h

@@ -0,0 +1,113 @@
+/*
+ * 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 <folly/dynamic.h>
+
+#include <jsinspector-modern/tracing/PerformanceTracer.h>
+
+#include <string_view>
+
+namespace facebook::react::jsinspector_modern::tracing {
+
+/**
+ * This is a RAII class that reports a timeStamp block to the React Native
+ * Performance Tracer.
+ *
+ * @example
+ *   {
+ *     PerformanceTracerSection s("name", "track", "track group");
+ *     // do something
+ *   }
+ */
+template <typename... Args>
+class PerformanceTracerSection {
+ public:
+  explicit PerformanceTracerSection(
+      const char *name,
+      const char *track = nullptr,
+      const char *trackGroup = nullptr,
+      const char *color = nullptr,
+      Args... args) noexcept
+      : name_(name), track_(track), trackGroup_(trackGroup), color_(color), args_(std::move(args)...)
+  {
+    static_assert(
+        sizeof...(Args) % 2 == 0,
+        "PerformanceTracerSection expects an even number of variadic args representing [name, value] pairs.");
+  }
+
+  // Non-movable
+  PerformanceTracerSection(const PerformanceTracerSection &) = delete;
+  PerformanceTracerSection(PerformanceTracerSection &&) = delete;
+
+  // Non-copyable
+  PerformanceTracerSection &operator=(const PerformanceTracerSection &) = delete;
+  PerformanceTracerSection &operator=(PerformanceTracerSection &&) = delete;
+
+  ~PerformanceTracerSection() noexcept
+  {
+    auto &tracer = PerformanceTracer::getInstance();
+    if (!tracer.isTracing()) {
+      return;
+    }
+
+    auto endTime = HighResTimeStamp::now();
+
+    // Slow path when passing properties
+    if constexpr (sizeof...(Args) > 0) {
+      auto properties = folly::dynamic::array();
+      std::apply(
+          [&](const auto &...elems) {
+            size_t idx = 0;
+            (((idx % 2 == 0) ? properties.push_back(folly::dynamic::array(elems))
+                             : properties[properties.size() - 1].push_back(elems),
+              ++idx),
+             ...);
+          },
+          args_);
+
+      folly::dynamic devtools = folly::dynamic::object();
+      devtools["properties"] = std::move(properties);
+
+      if (track_ != nullptr) {
+        devtools["track"] = track_;
+      }
+
+      if (trackGroup_ != nullptr) {
+        devtools["trackGroup"] = trackGroup_;
+      }
+
+      if (color_ != nullptr) {
+        devtools["color"] = color_;
+      }
+
+      folly::dynamic detail = folly::dynamic::object();
+      detail["devtools"] = std::move(devtools);
+
+      tracer.reportMeasure(std::string(name_), startTime_, endTime - startTime_, std::move(detail));
+    } else {
+      tracer.reportTimeStamp(
+          std::string(name_),
+          startTime_,
+          endTime,
+          track_ != nullptr ? std::optional{track_} : std::nullopt,
+          trackGroup_ != nullptr ? std::optional{trackGroup_} : std::nullopt,
+          color_ != nullptr ? getConsoleTimeStampColorFromString(color_) : std::nullopt);
+    }
+  }
+
+ private:
+  HighResTimeStamp startTime_{HighResTimeStamp::now()};
+  std::string_view name_;
+  const char *track_;
+  const char *trackGroup_;
+  const char *color_;
+  std::tuple<Args...> args_;
+};
+
+} // namespace facebook::react::jsinspector_modern::tracing

package/ReactCommon/jsinspector-modern/tracing/React-jsinspectortracing.podspec

@@ -47,6 +47,7 @@ Pod::Spec.new do |s|
   s.dependency "React-jsi"
   s.dependency "React-oscompat"
   s.dependency "React-timing"
+  add_dependency(s, "React-utils", :additional_framework_paths => ["react/utils/platform/ios"])
 
   if use_hermes()
     s.dependency "hermes-engine"