Switch trace event chunks from event count to size based (#56080)

Summary:
Pull Request resolved: #56080

Trace event chunks were previously split by a fixed event count (1000). This caused issues with Frame Timing events containing screenshot data, where a single chunk could produce CDP messages of tens or hundreds of MBs — exceeding the OkHttp WebSocket limit (app crash).

Address this problem by replacing count-based chunking with size-based chunking (max 10 MiB per chunk) for `emitFrameTimings()` and `emitPerformanceTraceEvents()`. A new `TraceEventSerializer::estimateJsonSize()` utility recursively estimates the serialized byte size of a `folly::dynamic` value to avoid double-serialization overhead.

**Notes**

  - RuntimeSamplingProfile chunks (separate code path) remain count-based (inherently small, no screenshot data).

Changelog: [Internal]

Reviewed By: rubennorte

Differential Revision: D96206962

fbshipit-source-id: 6b6e4db76441f174c46bf34905292585d0e30899

Author: huntie

packages/react-native/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) {

packages/react-native/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()) {

packages/react-native/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

packages/react-native/ReactCommon/jsinspector-modern/tracing/TraceEventSerializer.cpp

@@ -112,4 +112,46 @@ TraceEventSerializer::serializeProfileChunkCPUProfileNodeCallFrame(
   return dynamicCallFrame;
 }
 
+/* static */ size_t TraceEventSerializer::estimateJsonSize(
+    const folly::dynamic& value) {
+  switch (value.type()) {
+    case folly::dynamic::Type::NULLT:
+      return 4; // null
+    case folly::dynamic::Type::BOOL:
+      return 5; // false
+    case folly::dynamic::Type::INT64:
+    case folly::dynamic::Type::DOUBLE:
+      return 20; // conservative max for numeric values
+    case folly::dynamic::Type::STRING:
+      return value.stringPiece().size() + 2; // quotes
+    case folly::dynamic::Type::ARRAY: {
+      size_t size = 2; // []
+      bool first = true;
+      for (const auto& element : value) {
+        if (!first) {
+          size += 1; // comma
+        }
+        first = false;
+        size += estimateJsonSize(element);
+      }
+      return size;
+    }
+    case folly::dynamic::Type::OBJECT: {
+      size_t size = 2; // {}
+      bool first = true;
+      for (const auto& [key, val] : value.items()) {
+        if (!first) {
+          size += 1; // comma
+        }
+        first = false;
+        // key size + quotes + colon
+        size += key.stringPiece().size() + 3;
+        size += estimateJsonSize(val);
+      }
+      return size;
+    }
+  }
+  return 0;
+}
+
 } // namespace facebook::react::jsinspector_modern::tracing

packages/react-native/ReactCommon/jsinspector-modern/tracing/TraceEventSerializer.h

@@ -84,6 +84,13 @@ class TraceEventSerializer {
    */
   static folly::dynamic serializeProfileChunkCPUProfileNodeCallFrame(
       TraceEventProfileChunk::CPUProfile::Node::CallFrame &&callFrame);
+
+  /**
+   * Estimates the JSON-serialized byte size of a folly::dynamic value.
+   * This is a rough but conservative estimate to avoid the cost of
+   * double-serialization (once to measure, once to emit).
+   */
+  static size_t estimateJsonSize(const folly::dynamic &value);
 };
 
 } // namespace facebook::react::jsinspector_modern::tracing