Report PerformanceResourceTiming events (#51025)

Summary:
Pull Request resolved: #51025

(Sparsely) wires up reporting of Network events to the Web Performance subsystem.

Our plan is to report to the Web Performance APIs (lightweight timing metadata, here) for all build flavours, and report to CDP (more costly full metadata/previews) in dev/profiling builds.

**Notes**

- Introduces `PerformanceEntryReporter::unstable_reportResourceTiming` — this will become "stable" when further network events/fields are fully hydrated on Android and iOS.

Changelog: [Internal]

Reviewed By: rubennorte

Differential Revision: D73922341

fbshipit-source-id: bcfc03c3d8a9a286ae72ba00a3313602fb2adea8

Author: huntie

packages/react-native/ReactCommon/jsinspector-modern/network/CMakeLists.txt

@@ -24,4 +24,5 @@ target_include_directories(jsinspector_network PUBLIC ${REACT_COMMON_DIR})
 target_link_libraries(jsinspector_network
         folly_runtime
         jsinspector_cdp
-)
+        react_performance_timeline
+        react_timing)

packages/react-native/ReactCommon/jsinspector-modern/network/NetworkReporter.cpp

@@ -15,6 +15,8 @@
 #include <folly/dynamic.h>
 #include <jsinspector-modern/cdp/CdpJson.h>
 #endif
+#include <react/featureflags/ReactNativeFeatureFlags.h>
+#include <react/performance/timeline/PerformanceEntryReporter.h>
 
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
 #include <chrono>
@@ -27,7 +29,7 @@ namespace facebook::react::jsinspector_modern {
 namespace {
 
 /**
- * Get the current Unix timestamp in seconds (µs precision).
+ * Get the current Unix timestamp in seconds (µs precision, CDP format).
  */
 double getCurrentUnixTimestampSeconds() {
   auto now = std::chrono::system_clock::now().time_since_epoch();
@@ -74,7 +76,23 @@ void NetworkReporter::reportRequestStart(
     const std::string& requestId,
     const RequestInfo& requestInfo,
     int encodedDataLength,
-    const std::optional<ResponseInfo>& redirectResponse) const {
+    const std::optional<ResponseInfo>& redirectResponse) {
+  if (ReactNativeFeatureFlags::enableResourceTimingAPI()) {
+    double now = PerformanceEntryReporter::getInstance()->getCurrentTimeStamp();
+
+    // All builds: Annotate PerformanceResourceTiming metadata
+    {
+      std::lock_guard<std::mutex> lock(perfTimingsMutex_);
+      perfTimingsBuffer_.emplace(
+          requestId,
+          ResourceTimingData{
+              .url = requestInfo.url,
+              .fetchStart = now,
+              .requestStart = now,
+          });
+    }
+  }
+
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: CDP event handling
   if (!isDebuggingEnabledNoSync()) {
@@ -107,8 +125,20 @@ void NetworkReporter::reportRequestStart(
 #endif
 }
 
-void NetworkReporter::reportConnectionTiming(
-    const std::string& /*requestId*/) const {
+void NetworkReporter::reportConnectionTiming(const std::string& requestId) {
+  if (ReactNativeFeatureFlags::enableResourceTimingAPI()) {
+    double now = PerformanceEntryReporter::getInstance()->getCurrentTimeStamp();
+
+    // All builds: Annotate PerformanceResourceTiming metadata
+    {
+      std::lock_guard<std::mutex> lock(perfTimingsMutex_);
+      auto it = perfTimingsBuffer_.find(requestId);
+      if (it != perfTimingsBuffer_.end()) {
+        it->second.connectStart = now;
+      }
+    }
+  }
+
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: CDP event handling
   if (!isDebuggingEnabledNoSync()) {
@@ -136,7 +166,21 @@ void NetworkReporter::reportRequestFailed(
 void NetworkReporter::reportResponseStart(
     const std::string& requestId,
     const ResponseInfo& responseInfo,
-    int encodedDataLength) const {
+    int encodedDataLength) {
+  if (ReactNativeFeatureFlags::enableResourceTimingAPI()) {
+    double now = PerformanceEntryReporter::getInstance()->getCurrentTimeStamp();
+
+    // All builds: Annotate PerformanceResourceTiming metadata
+    {
+      std::lock_guard<std::mutex> lock(perfTimingsMutex_);
+      auto it = perfTimingsBuffer_.find(requestId);
+      if (it != perfTimingsBuffer_.end()) {
+        it->second.responseStart = now;
+        it->second.responseStatus = responseInfo.statusCode;
+      }
+    }
+  }
+
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: CDP event handling
   if (!isDebuggingEnabledNoSync()) {
@@ -159,8 +203,21 @@ void NetworkReporter::reportResponseStart(
 #endif
 }
 
-void NetworkReporter::reportDataReceived(
-    const std::string& /*requestId*/) const {
+void NetworkReporter::reportDataReceived(const std::string& requestId) {
+  if (ReactNativeFeatureFlags::enableResourceTimingAPI()) {
+    double now = PerformanceEntryReporter::getInstance()->getCurrentTimeStamp();
+
+    // All builds: Annotate PerformanceResourceTiming metadata
+    {
+      std::lock_guard<std::mutex> lock(perfTimingsMutex_);
+      auto it = perfTimingsBuffer_.find(requestId);
+      if (it != perfTimingsBuffer_.end()) {
+        it->second.connectEnd = now;
+        it->second.responseStart = now;
+      }
+    }
+  }
+
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: CDP event handling
   if (!isDebuggingEnabledNoSync()) {
@@ -174,7 +231,30 @@ void NetworkReporter::reportDataReceived(
 
 void NetworkReporter::reportResponseEnd(
     const std::string& requestId,
-    int encodedDataLength) const {
+    int encodedDataLength) {
+  if (ReactNativeFeatureFlags::enableResourceTimingAPI()) {
+    double now = PerformanceEntryReporter::getInstance()->getCurrentTimeStamp();
+
+    // All builds: Report PerformanceResourceTiming event
+    {
+      std::lock_guard<std::mutex> lock(perfTimingsMutex_);
+      auto it = perfTimingsBuffer_.find(requestId);
+      if (it != perfTimingsBuffer_.end()) {
+        auto& eventData = it->second;
+        PerformanceEntryReporter::getInstance()->reportResourceTiming(
+            eventData.url,
+            eventData.fetchStart,
+            eventData.requestStart,
+            eventData.connectStart.value_or(now),
+            eventData.connectEnd.value_or(now),
+            eventData.responseStart.value_or(now),
+            now,
+            eventData.responseStatus);
+        perfTimingsBuffer_.erase(requestId);
+      }
+    }
+  }
+
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: CDP event handling
   if (!isDebuggingEnabledNoSync()) {

packages/react-native/ReactCommon/jsinspector-modern/network/NetworkReporter.h

@@ -9,8 +9,11 @@
 
 #include "NetworkTypes.h"
 
+#include <react/timing/primitives.h>
+
 #include <atomic>
 #include <functional>
+#include <mutex>
 #include <string>
 
 namespace facebook::react::jsinspector_modern {
@@ -22,6 +25,24 @@ namespace facebook::react::jsinspector_modern {
  */
 using FrontendChannel = std::function<void(std::string_view messageJson)>;
 
+/**
+ * Container for static network event metadata aligning with the
+ * `PerformanceResourceTiming` interface.
+ *
+ * This is a lightweight type stored in `perfTimingsBuffer_` and used for
+ * reporting complete events to the Web Performance subsystem. Not used for CDP
+ * reporting.
+ */
+struct ResourceTimingData {
+  std::string url;
+  DOMHighResTimeStamp fetchStart;
+  DOMHighResTimeStamp requestStart;
+  std::optional<DOMHighResTimeStamp> connectStart;
+  std::optional<DOMHighResTimeStamp> connectEnd;
+  std::optional<DOMHighResTimeStamp> responseStart;
+  std::optional<int> responseStatus;
+};
+
 /**
  * [Experimental] An interface for reporting network events to the modern
  * debugger server and Web Performance APIs.
@@ -67,7 +88,7 @@ class NetworkReporter {
       const std::string& requestId,
       const RequestInfo& requestInfo,
       int encodedDataLength,
-      const std::optional<ResponseInfo>& redirectResponse) const;
+      const std::optional<ResponseInfo>& redirectResponse);
 
   /**
    * Report detailed timing info, such as DNS lookup, when a request has
@@ -79,7 +100,7 @@ class NetworkReporter {
    *
    * https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-connectstart
    */
-  void reportConnectionTiming(const std::string& requestId) const;
+  void reportConnectionTiming(const std::string& requestId);
 
   /**
    * Report when a network request has failed.
@@ -100,14 +121,14 @@ class NetworkReporter {
   void reportResponseStart(
       const std::string& requestId,
       const ResponseInfo& responseInfo,
-      int encodedDataLength) const;
+      int encodedDataLength);
 
   /**
    * Report when additional chunks of the response body have been received.
    *
    * Corresponds to `Network.dataReceived` in CDP.
    */
-  void reportDataReceived(const std::string& requestId) const;
+  void reportDataReceived(const std::string& requestId);
 
   /**
    * Report when a network request is complete and we are no longer receiving
@@ -118,8 +139,7 @@ class NetworkReporter {
    *
    * https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-responseend
    */
-  void reportResponseEnd(const std::string& requestId, int encodedDataLength)
-      const;
+  void reportResponseEnd(const std::string& requestId, int encodedDataLength);
 
  private:
   FrontendChannel frontendChannel_;
@@ -134,6 +154,9 @@ class NetworkReporter {
   inline bool isDebuggingEnabledNoSync() const {
     return debuggingEnabled_.load(std::memory_order_relaxed);
   }
+
+  std::unordered_map<std::string, ResourceTimingData> perfTimingsBuffer_{};
+  std::mutex perfTimingsMutex_;
 };
 
 } // namespace facebook::react::jsinspector_modern

packages/react-native/ReactCommon/jsinspector-modern/network/React-jsinspectornetwork.podspec

@@ -47,6 +47,9 @@ Pod::Spec.new do |s|
   end
 
   add_dependency(s, "React-jsinspectorcdp", :framework_name => 'jsinspector_moderncdp')
+  add_dependency(s, "React-featureflags")
+  s.dependency "React-performancetimeline"
+  s.dependency "React-timing"
 
   add_rn_third_party_dependencies(s)
 end

packages/react-native/ReactCommon/react/performance/timeline/CMakeLists.txt

@@ -18,4 +18,5 @@ target_include_directories(react_performance_timeline PUBLIC ${REACT_COMMON_DIR}
 target_link_libraries(react_performance_timeline
         jsinspector_tracing
         reactperflogger
+        react_featureflags
         react_timing)

packages/react-native/ReactCommon/react/performance/timeline/PerformanceEntry.h

@@ -57,8 +57,8 @@ struct PerformanceResourceTiming : AbstractPerformanceEntry {
   static constexpr PerformanceEntryType entryType =
       PerformanceEntryType::RESOURCE;
   /** Aligns with `startTime`. */
-  std::optional<DOMHighResTimeStamp> fetchStart;
-  std::optional<DOMHighResTimeStamp> requestStart;
+  DOMHighResTimeStamp fetchStart;
+  DOMHighResTimeStamp requestStart;
   std::optional<DOMHighResTimeStamp> connectStart;
   std::optional<DOMHighResTimeStamp> connectEnd;
   std::optional<DOMHighResTimeStamp> responseStart;

packages/react-native/ReactCommon/react/performance/timeline/PerformanceEntryReporter.cpp

@@ -30,6 +30,10 @@ std::vector<PerformanceEntryType> getSupportedEntryTypesInternal() {
       PerformanceEntryType::LONGTASK,
   };
 
+  if (ReactNativeFeatureFlags::enableResourceTimingAPI()) {
+    supportedEntryTypes.emplace_back(PerformanceEntryType::RESOURCE);
+  }
+
   return supportedEntryTypes;
 }
 
@@ -289,6 +293,37 @@ void PerformanceEntryReporter::reportLongTask(
   observerRegistry_->queuePerformanceEntry(entry);
 }
 
+PerformanceResourceTiming PerformanceEntryReporter::reportResourceTiming(
+    const std::string& url,
+    DOMHighResTimeStamp fetchStart,
+    DOMHighResTimeStamp requestStart,
+    std::optional<DOMHighResTimeStamp> connectStart,
+    std::optional<DOMHighResTimeStamp> connectEnd,
+    DOMHighResTimeStamp responseStart,
+    DOMHighResTimeStamp responseEnd,
+    const std::optional<int>& responseStatus) {
+  const auto entry = PerformanceResourceTiming{
+      {.name = url, .startTime = fetchStart},
+      fetchStart,
+      requestStart,
+      connectStart,
+      connectEnd,
+      responseStart,
+      responseEnd,
+      responseStatus,
+  };
+
+  // Add to buffers & notify observers
+  {
+    std::unique_lock lock(buffersMutex_);
+    resourceTimingBuffer_.add(entry);
+  }
+
+  observerRegistry_->queuePerformanceEntry(entry);
+
+  return entry;
+}
+
 void PerformanceEntryReporter::traceMark(const PerformanceMark& entry) const {
   auto& performanceTracer =
       jsinspector_modern::PerformanceTracer::getInstance();

packages/react-native/ReactCommon/react/performance/timeline/PerformanceEntryReporter.h

@@ -21,8 +21,11 @@
 
 namespace facebook::react {
 
+// Aligned with maxBufferSize implemented by browsers
+// https://w3c.github.io/timing-entrytypes-registry/#registry
 constexpr size_t EVENT_BUFFER_SIZE = 150;
 constexpr size_t LONG_TASK_BUFFER_SIZE = 200;
+constexpr size_t RESOURCE_TIMING_BUFFER_SIZE = 250;
 
 constexpr DOMHighResTimeStamp LONG_TASK_DURATION_THRESHOLD_MS = 50.0;
 
@@ -101,15 +104,26 @@ class PerformanceEntryReporter {
 
   void reportLongTask(double startTime, double duration);
 
+  PerformanceResourceTiming reportResourceTiming(
+      const std::string& url,
+      DOMHighResTimeStamp fetchStart,
+      DOMHighResTimeStamp requestStart,
+      std::optional<DOMHighResTimeStamp> connectStart,
+      std::optional<DOMHighResTimeStamp> connectEnd,
+      DOMHighResTimeStamp responseStart,
+      DOMHighResTimeStamp responseEnd,
+      const std::optional<int>& responseStatus);
+
  private:
   std::unique_ptr<PerformanceObserverRegistry> observerRegistry_;
 
   mutable std::shared_mutex buffersMutex_;
   PerformanceEntryCircularBuffer eventBuffer_{EVENT_BUFFER_SIZE};
   PerformanceEntryCircularBuffer longTaskBuffer_{LONG_TASK_BUFFER_SIZE};
+  PerformanceEntryCircularBuffer resourceTimingBuffer_{
+      RESOURCE_TIMING_BUFFER_SIZE};
   PerformanceEntryKeyedBuffer markBuffer_;
   PerformanceEntryKeyedBuffer measureBuffer_;
-  PerformanceEntryKeyedBuffer resourceBuffer_;
 
   std::unordered_map<std::string, uint32_t> eventCounts_;
 
@@ -129,7 +143,7 @@ class PerformanceEntryReporter {
       case PerformanceEntryType::LONGTASK:
         return longTaskBuffer_;
       case PerformanceEntryType::RESOURCE:
-        return resourceBuffer_;
+        return resourceTimingBuffer_;
       case PerformanceEntryType::_NEXT:
         throw std::logic_error("Cannot get buffer for _NEXT entry type");
     }
@@ -147,7 +161,7 @@ class PerformanceEntryReporter {
       case PerformanceEntryType::LONGTASK:
         return longTaskBuffer_;
       case PerformanceEntryType::RESOURCE:
-        return resourceBuffer_;
+        return resourceTimingBuffer_;
       case PerformanceEntryType::_NEXT:
         throw std::logic_error("Cannot get buffer for _NEXT entry type");
     }

packages/react-native/src/private/webapis/performance/internals/RawPerformanceEntry.js

@@ -77,6 +77,8 @@ export function rawToPerformanceEntryType(
       return 'event';
     case RawPerformanceEntryTypeValues.LONGTASK:
       return 'longtask';
+    case RawPerformanceEntryTypeValues.RESOURCE:
+      return 'resource';
     default:
       throw new TypeError(
         `rawToPerformanceEntryType: unexpected performance entry type received: ${type}`,