Add ResourceReceivedData trace event for Performance timeline (#54870)

Summary:
Pull Request resolved: #54870

Changelog: [General][Added] - Add ResourceReceivedData trace events for network data chunks in Performance timeline

Wire up `NetworkReporter::reportDataReceived` to emit `ResourceReceivedData` trace events for the React Native DevTools Performance panel.

This adds a new trace event type that captures when chunked response data is received during network requests. The event is emitted when React Native treats a response as incremental/chunked (when `incrementalUpdates && responseType == "text"`), matching the existing behavior of CDP's `Network.dataReceived` event.

The implementation follows the same pattern as the existing `ResourceSendRequest`, `ResourceReceiveResponse`, and `ResourceFinish` events in PerformanceTracer.

Reviewed By: huntie

Differential Revision: D89050646

fbshipit-source-id: 99bf1fc85e8f27555976d80fee29db54af9b7451

Author: emily8rown

packages/react-native/ReactCommon/jsinspector-modern/tests/NetworkReporterTest.cpp

@@ -653,6 +653,13 @@ TEST_P(
         AtJsonPtr("/params/response/encodedDataLength", 1024),
         AtJsonPtr("/params/hasExtraInfo", false))));
 
+    this->expectMessageFromPage(JsonParsed(AllOf(
+        AtJsonPtr("/method", "Network.dataReceived"),
+        AtJsonPtr("/params/requestId", "trace-events-request"),
+        AtJsonPtr("/params/timestamp", Gt(0)),
+        AtJsonPtr("/params/dataLength", 512),
+        AtJsonPtr("/params/encodedDataLength", 512))));
+
     this->expectMessageFromPage(JsonParsed(AllOf(
         AtJsonPtr("/method", "Network.loadingFinished"),
         AtJsonPtr("/params/requestId", "trace-events-request"),
@@ -682,6 +689,9 @@ TEST_P(
       },
       1024);
 
+  NetworkReporter::getInstance().reportDataReceived(
+      "trace-events-request", 512, 512);
+
   NetworkReporter::getInstance().reportResponseEnd(
       "trace-events-request", 1024);
 
@@ -731,6 +741,18 @@ TEST_P(
                   AtJsonPtr("/receiveHeadersStart", Ge(0)),
                   AtJsonPtr("/receiveHeadersEnd", Ge(0)))))));
 
+  EXPECT_THAT(
+      allTraceEvents,
+      Contains(AllOf(
+          AtJsonPtr("/name", "ResourceReceivedData"),
+          AtJsonPtr("/cat", "devtools.timeline"),
+          AtJsonPtr("/ph", "I"),
+          AtJsonPtr("/s", "t"),
+          AtJsonPtr("/tid", oscompat::getCurrentThreadId()),
+          AtJsonPtr("/pid", oscompat::getCurrentProcessId()),
+          AtJsonPtr("/args/data/requestId", "trace-events-request"),
+          AtJsonPtr("/args/data/encodedDataLength", 512))));
+
   EXPECT_THAT(
       allTraceEvents,
       Contains(AllOf(

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

@@ -312,6 +312,27 @@ void PerformanceTracer::reportResourceSendRequest(
       });
 }
 
+void PerformanceTracer::reportResourceReceivedData(
+    const std::string& devtoolsRequestId,
+    HighResTimeStamp start,
+    int encodedDataLength) {
+  if (!tracingAtomic_) {
+    return;
+  };
+
+  std::lock_guard<std::mutex> lock(mutex_);
+  if (!tracingAtomic_) {
+    return;
+  }
+
+  enqueueEvent(
+      PerformanceTracerResourceReceivedData{
+          .requestId = devtoolsRequestId,
+          .start = start,
+          .encodedDataLength = encodedDataLength,
+          .threadId = getCurrentThreadId()});
+}
+
 void PerformanceTracer::reportResourceReceiveResponse(
     const std::string& devtoolsRequestId,
     HighResTimeStamp start,
@@ -706,6 +727,23 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
                     .args = folly::dynamic::object("data", std::move(data)),
                 });
           },
+          [&](PerformanceTracerResourceReceivedData&& event) {
+            folly::dynamic data = folly::dynamic::object(
+                "encodedDataLength", event.encodedDataLength)(
+                "requestId", std::move(event.requestId));
+
+            events.emplace_back(
+                TraceEvent{
+                    .name = "ResourceReceivedData",
+                    .cat = {Category::Timeline},
+                    .ph = 'I',
+                    .ts = event.start,
+                    .pid = processId_,
+                    .s = 't',
+                    .tid = event.threadId,
+                    .args = folly::dynamic::object("data", std::move(data)),
+                });
+          },
           [&](PerformanceTracerResourceReceiveResponse&& event) {
             folly::dynamic headersEntries = folly::dynamic::array;
             for (const auto& [key, value] : event.headers) {

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

@@ -136,6 +136,12 @@ class PerformanceTracer {
       const std::string &requestMethod,
       const Headers &headers);
 
+  /**
+   * Record a "ResourceReceivedData" event.
+   * If not currently tracing, this is a no-op.
+   */
+  void reportResourceReceivedData(const std::string &devtoolsRequestId, HighResTimeStamp start, int encodedDataLength);
+
   /**
    * Record a "ResourceReceiveResponse" event. Paired with other "Resource*"
    * events, renders a network request timeline in the Performance panel Network
@@ -281,6 +287,14 @@ class PerformanceTracer {
     HighResTimeStamp createdAt = HighResTimeStamp::now();
   };
 
+  struct PerformanceTracerResourceReceivedData {
+    std::string requestId;
+    HighResTimeStamp start;
+    int encodedDataLength;
+    ThreadId threadId;
+    HighResTimeStamp createdAt = HighResTimeStamp::now();
+  };
+
   struct PerformanceTracerResourceReceiveResponse {
     std::string requestId;
     HighResTimeStamp start;
@@ -302,6 +316,7 @@ class PerformanceTracer {
       PerformanceTracerEventMeasure,
       PerformanceTracerResourceSendRequest,
       PerformanceTracerResourceReceiveResponse,
+      PerformanceTracerResourceReceivedData,
       PerformanceTracerResourceFinish>;
 
 #pragma mark - Private fields and methods

packages/react-native/ReactCommon/react/networking/NetworkReporter.cpp

@@ -168,9 +168,16 @@ void NetworkReporter::reportDataReceived(
     int dataLength,
     const std::optional<int>& encodedDataLength) {
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
+  auto now = HighResTimeStamp::now();
+
   // Debugger enabled: CDP event handling
   jsinspector_modern::NetworkHandler::getInstance().onDataReceived(
       requestId, dataLength, encodedDataLength.value_or(dataLength));
+
+  // Debugger enabled: Add trace event to Performance timeline
+  jsinspector_modern::tracing::PerformanceTracer::getInstance()
+      .reportResourceReceivedData(
+          requestId, now, encodedDataLength.value_or(dataLength));
 #endif
 }