react-native 0.83.4 → 0.83.6

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

@@ -0,0 +1,165 @@
+/*
+ * 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.
+ */
+
+#include "HostTracingProfileSerializer.h"
+#include "RuntimeSamplingProfileTraceEventSerializer.h"
+#include "TraceEventGenerator.h"
+#include "TraceEventSerializer.h"
+
+namespace facebook::react::jsinspector_modern::tracing {
+
+namespace {
+
+/**
+ * Hardcoded layer tree ID for all recorded frames.
+ * https://chromedevtools.github.io/devtools-protocol/tot/LayerTree/
+ */
+constexpr int FALLBACK_LAYER_TREE_ID = 1;
+
+} // namespace
+
+/* static */ void HostTracingProfileSerializer::emitAsDataCollectedChunks(
+    HostTracingProfile&& hostTracingProfile,
+    const std::function<void(folly::dynamic&&)>& chunkCallback,
+    size_t maxChunkBytes,
+    uint16_t profileTraceEventsChunkSize) {
+  emitFrameTimings(
+      std::move(hostTracingProfile.frameTimings),
+      hostTracingProfile.processId,
+      hostTracingProfile.startTime,
+      chunkCallback,
+      maxChunkBytes);
+
+  auto instancesProfiles =
+      std::move(hostTracingProfile.instanceTracingProfiles);
+  IdGenerator profileIdGenerator;
+
+  for (auto& instanceProfile : instancesProfiles) {
+    emitPerformanceTraceEvents(
+        std::move(instanceProfile.performanceTraceEvents),
+        chunkCallback,
+        maxChunkBytes);
+  }
+
+  RuntimeSamplingProfileTraceEventSerializer::serializeAndDispatch(
+      std::move(hostTracingProfile.runtimeSamplingProfiles),
+      profileIdGenerator,
+      hostTracingProfile.startTime,
+      chunkCallback,
+      profileTraceEventsChunkSize);
+}
+
+/* static */ void HostTracingProfileSerializer::emitPerformanceTraceEvents(
+    std::vector<TraceEvent>&& events,
+    const std::function<void(folly::dynamic&&)>& chunkCallback,
+    size_t maxChunkBytes) {
+  folly::dynamic chunk = folly::dynamic::array();
+  size_t currentChunkBytes = 0;
+
+  for (auto& event : events) {
+    auto serializedEvent = TraceEventSerializer::serialize(std::move(event));
+    size_t eventBytes = TraceEventSerializer::estimateJsonSize(serializedEvent);
+
+    if (currentChunkBytes + eventBytes > maxChunkBytes && !chunk.empty()) {
+      chunkCallback(std::move(chunk));
+      chunk = folly::dynamic::array();
+      currentChunkBytes = 0;
+    }
+
+    chunk.push_back(std::move(serializedEvent));
+    currentChunkBytes += eventBytes;
+  }
+
+  if (!chunk.empty()) {
+    chunkCallback(std::move(chunk));
+  }
+}
+
+/* static */ void HostTracingProfileSerializer::emitFrameTimings(
+    std::vector<FrameTimingSequence>&& frameTimings,
+    ProcessId processId,
+    HighResTimeStamp recordingStartTimestamp,
+    const std::function<void(folly::dynamic&& chunk)>& chunkCallback,
+    size_t maxChunkBytes) {
+  if (frameTimings.empty()) {
+    return;
+  }
+
+  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);
+  auto serializedSetLayerTreeId =
+      TraceEventSerializer::serialize(std::move(setLayerTreeIdEvent));
+  currentChunkBytes +=
+      TraceEventSerializer::estimateJsonSize(serializedSetLayerTreeId);
+  chunk.push_back(std::move(serializedSetLayerTreeId));
+
+  for (auto&& frameTimingSequence : frameTimings) {
+    // Serialize all events for this frame.
+    folly::dynamic frameEvents = folly::dynamic::array();
+    size_t totalFrameBytes = 0;
+
+    auto [beginDrawingEvent, endDrawingEvent] =
+        TraceEventGenerator::createFrameTimingsEvents(
+            frameTimingSequence.id,
+            FALLBACK_LAYER_TREE_ID,
+            frameTimingSequence.beginTimestamp,
+            frameTimingSequence.endTimestamp,
+            processId,
+            frameTimingSequence.threadId);
+
+    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(
+          frameTimingSequence.id,
+          FALLBACK_LAYER_TREE_ID,
+          std::move(frameTimingSequence.screenshot.value()),
+          frameTimingSequence.endTimestamp,
+          processId,
+          frameTimingSequence.threadId);
+
+      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()) {
+    chunkCallback(std::move(chunk));
+  }
+}
+
+} // namespace facebook::react::jsinspector_modern::tracing

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

@@ -0,0 +1,50 @@
+/*
+ * 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 "FrameTimingSequence.h"
+#include "HostTracingProfile.h"
+#include "TraceEvent.h"
+
+#include <folly/dynamic.h>
+#include <vector>
+
+namespace facebook::react::jsinspector_modern::tracing {
+
+/**
+ * A serializer for HostTracingProfile that can be used for transforming the
+ * profile into sequence of serialized Trace Events.
+ */
+class HostTracingProfileSerializer {
+ public:
+  /**
+   * Transforms the profile into a sequence of serialized Trace Events, which
+   * 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,
+      size_t maxChunkBytes,
+      uint16_t profileTraceEventsChunkSize);
+
+  static void emitPerformanceTraceEvents(
+      std::vector<TraceEvent> &&events,
+      const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
+      size_t maxChunkBytes);
+
+  static void emitFrameTimings(
+      std::vector<FrameTimingSequence> &&frameTimings,
+      ProcessId processId,
+      HighResTimeStamp recordingStartTimestamp,
+      const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
+      size_t maxChunkBytes);
+};
+
+} // namespace facebook::react::jsinspector_modern::tracing

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

@@ -7,7 +7,9 @@
 
 #include "PerformanceTracer.h"
 #include "Timing.h"
+#include "TraceEventGenerator.h"
 #include "TraceEventSerializer.h"
+#include "TracingCategory.h"
 
 #include <jsinspector-modern/network/CdpNetwork.h>
 #include <jsinspector-modern/network/HttpUtils.h>
@@ -138,7 +140,7 @@ std::optional<std::vector<TraceEvent>> PerformanceTracer::stopTracing() {
   events.emplace_back(
       TraceEvent{
           .name = "TracingStartedInPage",
-          .cat = "disabled-by-default-devtools.timeline",
+          .cat = {Category::HiddenTimeline},
           .ph = 'I',
           .ts = currentTraceStartTime,
           .pid = processId_,
@@ -149,7 +151,7 @@ std::optional<std::vector<TraceEvent>> PerformanceTracer::stopTracing() {
   events.emplace_back(
       TraceEvent{
           .name = "ReactNative-TracingStopped",
-          .cat = "disabled-by-default-devtools.timeline",
+          .cat = {Category::HiddenTimeline},
           .ph = 'I',
           .ts = currentTraceEndTime,
           .pid = processId_,
@@ -370,7 +372,7 @@ void PerformanceTracer::reportResourceFinish(
   return TraceEvent{
       .id = profileId,
       .name = "Profile",
-      .cat = "disabled-by-default-v8.cpu_profiler",
+      .cat = {Category::JavaScriptSampling},
       .ph = 'P',
       .ts = profileTimestamp,
       .pid = processId,
@@ -393,7 +395,7 @@ PerformanceTracer::constructRuntimeProfileChunkTraceEvent(
   return TraceEvent{
       .id = profileId,
       .name = "ProfileChunk",
-      .cat = "disabled-by-default-v8.cpu_profiler",
+      .cat = {Category::JavaScriptSampling},
       .ph = 'P',
       .ts = chunkTimestamp,
       .pid = processId,
@@ -525,7 +527,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             events.emplace_back(
                 TraceEvent{
                     .name = "RunTask",
-                    .cat = "disabled-by-default-devtools.timeline",
+                    .cat = {Category::HiddenTimeline},
                     .ph = 'X',
                     .ts = event.start,
                     .pid = processId_,
@@ -537,7 +539,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             events.emplace_back(
                 TraceEvent{
                     .name = "RunMicrotasks",
-                    .cat = "v8.execute",
+                    .cat = {Category::RuntimeExecution},
                     .ph = 'X',
                     .ts = event.start,
                     .pid = processId_,
@@ -557,7 +559,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             events.emplace_back(
                 TraceEvent{
                     .name = std::move(event.name),
-                    .cat = "blink.user_timing",
+                    .cat = {Category::UserTiming},
                     .ph = 'I',
                     .ts = event.start,
                     .pid = processId_,
@@ -578,7 +580,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
                 TraceEvent{
                     .id = eventId,
                     .name = event.name,
-                    .cat = "blink.user_timing",
+                    .cat = {Category::UserTiming},
                     .ph = 'b',
                     .ts = event.start,
                     .pid = processId_,
@@ -589,7 +591,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
                 TraceEvent{
                     .id = eventId,
                     .name = std::move(event.name),
-                    .cat = "blink.user_timing",
+                    .cat = {Category::UserTiming},
                     .ph = 'e',
                     .ts = event.start + event.duration,
                     .pid = processId_,
@@ -629,7 +631,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
                 events.emplace_back(
                     TraceEvent{
                         .name = "TimeStamp",
-                        .cat = "devtools.timeline",
+                        .cat = {Category::Timeline},
                         .ph = 'I',
                         .ts = event.createdAt,
                         .pid = processId_,
@@ -664,7 +666,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             events.emplace_back(
                 TraceEvent{
                     .name = "TimeStamp",
-                    .cat = "devtools.timeline",
+                    .cat = {Category::Timeline},
                     .ph = 'I',
                     .ts = event.createdAt,
                     .pid = processId_,
@@ -684,7 +686,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             events.emplace_back(
                 TraceEvent{
                     .name = "ResourceSendRequest",
-                    .cat = "devtools.timeline",
+                    .cat = {Category::Timeline},
                     .ph = 'I',
                     .ts = event.start,
                     .pid = processId_,
@@ -710,7 +712,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             events.emplace_back(
                 TraceEvent{
                     .name = "ResourceReceiveResponse",
-                    .cat = "devtools.timeline",
+                    .cat = {Category::Timeline},
                     .ph = 'I',
                     .ts = event.start,
                     .pid = processId_,
@@ -728,7 +730,7 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             events.emplace_back(
                 TraceEvent{
                     .name = "ResourceFinish",
-                    .cat = "devtools.timeline",
+                    .cat = {Category::Timeline},
                     .ph = 'I',
                     .ts = event.start,
                     .pid = processId_,

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"

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

@@ -0,0 +1,158 @@
+/*
+ * 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 <algorithm>
+#include <functional>
+#include <optional>
+#include <vector>
+
+#include <react/timing/primitives.h>
+
+namespace facebook::react::jsinspector_modern::tracing {
+
+/**
+ * The currentBufferStartTime_ is initialized once first element is pushed.
+ */
+constexpr HighResTimeStamp kCurrentBufferStartTimeUninitialized = HighResTimeStamp::min();
+
+template <typename T>
+class TimeWindowedBuffer {
+ public:
+  using TimestampAccessor = std::function<HighResTimeStamp(const T &)>;
+
+  TimeWindowedBuffer() : timestampAccessor_(std::nullopt), windowSize_(std::nullopt) {}
+
+  TimeWindowedBuffer(TimestampAccessor timestampAccessor, HighResDuration windowSize)
+      : timestampAccessor_(std::move(timestampAccessor)), windowSize_(windowSize)
+  {
+  }
+
+  void push(const T &element)
+  {
+    if (timestampAccessor_) {
+      auto timestamp = (*timestampAccessor_)(element);
+      enqueueElement(element, timestamp);
+    } else {
+      enqueueElement(element, HighResTimeStamp::now());
+    }
+  }
+
+  void push(T &&element)
+  {
+    if (timestampAccessor_) {
+      auto timestamp = (*timestampAccessor_)(element);
+      enqueueElement(std::move(element), timestamp);
+    } else {
+      enqueueElement(std::move(element), HighResTimeStamp::now());
+    }
+  }
+
+  void clear()
+  {
+    primaryBuffer_.clear();
+    alternativeBuffer_.clear();
+    currentBufferIndex_ = BufferIndex::Primary;
+    currentBufferStartTime_ = kCurrentBufferStartTimeUninitialized;
+  }
+
+  /**
+   * Forces immediate removal of elements that are outside the time window.
+   * The right boundary of the window is the reference timestamp passed as an argument.
+   */
+  std::vector<T> pruneExpiredAndExtract(HighResTimeStamp windowRightBoundary = HighResTimeStamp::now())
+  {
+    std::vector<T> result;
+
+    for (auto &wrappedElement : getPreviousBuffer()) {
+      if (isInsideTimeWindow(wrappedElement, windowRightBoundary)) {
+        result.push_back(std::move(wrappedElement.element));
+      }
+    }
+
+    for (auto &wrappedElement : getCurrentBuffer()) {
+      if (isInsideTimeWindow(wrappedElement, windowRightBoundary)) {
+        result.push_back(std::move(wrappedElement.element));
+      }
+    }
+
+    clear();
+    return result;
+  }
+
+ private:
+  enum class BufferIndex { Primary, Alternative };
+
+  struct TimestampedElement {
+    T element;
+    HighResTimeStamp timestamp;
+  };
+
+  std::vector<TimestampedElement> &getCurrentBuffer()
+  {
+    return currentBufferIndex_ == BufferIndex::Primary ? primaryBuffer_ : alternativeBuffer_;
+  }
+
+  std::vector<TimestampedElement> &getPreviousBuffer()
+  {
+    return currentBufferIndex_ == BufferIndex::Primary ? alternativeBuffer_ : primaryBuffer_;
+  }
+
+  void enqueueElement(const T &element, HighResTimeStamp timestamp)
+  {
+    if (windowSize_) {
+      if (currentBufferStartTime_ == kCurrentBufferStartTimeUninitialized) {
+        currentBufferStartTime_ = timestamp;
+      } else if (timestamp > currentBufferStartTime_ + *windowSize_) {
+        // We moved past the current buffer. We need to switch the other buffer as current.
+        currentBufferIndex_ =
+            currentBufferIndex_ == BufferIndex::Primary ? BufferIndex::Alternative : BufferIndex::Primary;
+        getCurrentBuffer().clear();
+        currentBufferStartTime_ = timestamp;
+      }
+    }
+
+    getCurrentBuffer().push_back({element, timestamp});
+  }
+
+  void enqueueElement(T &&element, HighResTimeStamp timestamp)
+  {
+    if (windowSize_) {
+      if (currentBufferStartTime_ == kCurrentBufferStartTimeUninitialized) {
+        currentBufferStartTime_ = timestamp;
+      } else if (timestamp > currentBufferStartTime_ + *windowSize_) {
+        // We moved past the current buffer. We need to switch the other buffer as current.
+        currentBufferIndex_ =
+            currentBufferIndex_ == BufferIndex::Primary ? BufferIndex::Alternative : BufferIndex::Primary;
+        getCurrentBuffer().clear();
+        currentBufferStartTime_ = timestamp;
+      }
+    }
+
+    getCurrentBuffer().push_back({std::move(element), timestamp});
+  }
+
+  bool isInsideTimeWindow(const TimestampedElement &element, HighResTimeStamp windowRightBoundary) const
+  {
+    if (!windowSize_) {
+      return true;
+    }
+
+    return element.timestamp >= windowRightBoundary - *windowSize_ && element.timestamp <= windowRightBoundary;
+  }
+
+  std::optional<TimestampAccessor> timestampAccessor_;
+  std::optional<HighResDuration> windowSize_;
+
+  std::vector<TimestampedElement> primaryBuffer_;
+  std::vector<TimestampedElement> alternativeBuffer_;
+  BufferIndex currentBufferIndex_ = BufferIndex::Primary;
+  HighResTimeStamp currentBufferStartTime_{kCurrentBufferStartTimeUninitialized};
+};
+
+} // namespace facebook::react::jsinspector_modern::tracing

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

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <jsinspector-modern/tracing/TracingCategory.h>
 #include <react/timing/primitives.h>
 
 #include <folly/dynamic.h>
@@ -40,7 +41,7 @@ struct TraceEvent {
    * A comma separated list of categories for the event, configuring how
    * events are shown in the Trace Viewer UI.
    */
-  std::string cat;
+  Categories cat;
 
   /**
    * The event type. This is a single character which changes depending on the