Report PerformanceResourceTiming events (facebook#51025)

Summary:
Pull Request resolved: facebook#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

@@ -0,0 +1,28 @@
+# 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.
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+include(${REACT_ANDROID_DIR}/src/main/jni/first-party/jni-lib-merge/SoMerging-utils.cmake)
+
+add_compile_options(
+        -fexceptions
+        -std=c++20
+        -Wall
+        -Wpedantic)
+
+file(GLOB jsinspector_network_SRC CONFIGURE_DEPENDS *.cpp)
+
+add_library(jsinspector_network OBJECT ${jsinspector_network_SRC})
+target_merge_so(jsinspector_network)
+
+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

@@ -0,0 +1,275 @@
+/*
+ * 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 "NetworkReporter.h"
+
+#ifdef REACT_NATIVE_DEBUGGER_ENABLED
+#include "CdpNetwork.h"
+#endif
+
+#ifdef REACT_NATIVE_DEBUGGER_ENABLED
+#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>
+#endif
+#include <stdexcept>
+
+namespace facebook::react::jsinspector_modern {
+
+#ifdef REACT_NATIVE_DEBUGGER_ENABLED
+namespace {
+
+/**
+ * Get the current Unix timestamp in seconds (µs precision, CDP format).
+ */
+double getCurrentUnixTimestampSeconds() {
+  auto now = std::chrono::system_clock::now().time_since_epoch();
+  auto seconds = std::chrono::duration_cast<std::chrono::seconds>(now).count();
+  auto micros =
+      std::chrono::duration_cast<std::chrono::microseconds>(now).count() %
+      1000000;
+
+  return static_cast<double>(seconds) +
+      (static_cast<double>(micros) / 1000000.0);
+}
+
+} // namespace
+#endif
+
+NetworkReporter& NetworkReporter::getInstance() {
+  static NetworkReporter instance;
+  return instance;
+}
+
+void NetworkReporter::setFrontendChannel(FrontendChannel frontendChannel) {
+  frontendChannel_ = std::move(frontendChannel);
+}
+
+bool NetworkReporter::enableDebugging() {
+  if (debuggingEnabled_.load(std::memory_order_acquire)) {
+    return false;
+  }
+
+  debuggingEnabled_.store(true, std::memory_order_release);
+  return true;
+}
+
+bool NetworkReporter::disableDebugging() {
+  if (!debuggingEnabled_.load(std::memory_order_acquire)) {
+    return false;
+  }
+
+  debuggingEnabled_.store(false, std::memory_order_release);
+  return true;
+}
+
+void NetworkReporter::reportRequestStart(
+    const std::string& requestId,
+    const RequestInfo& requestInfo,
+    int encodedDataLength,
+    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()) {
+    return;
+  }
+
+  double timestamp = getCurrentUnixTimestampSeconds();
+  auto request = cdp::network::Request::fromInputParams(requestInfo);
+  auto params = cdp::network::RequestWillBeSentParams{
+      .requestId = requestId,
+      .loaderId = "",
+      .documentURL = "mobile",
+      .request = std::move(request),
+      // NOTE: Both timestamp and wallTime use the same unit, however wallTime
+      // is relative to an "arbitrary epoch". In our implementation, use the
+      // Unix epoch for both.
+      .timestamp = timestamp,
+      .wallTime = timestamp,
+      .initiator = folly::dynamic::object("type", "script"),
+      .redirectHasExtraInfo = redirectResponse.has_value(),
+  };
+
+  if (redirectResponse.has_value()) {
+    params.redirectResponse = cdp::network::Response::fromInputParams(
+        redirectResponse.value(), encodedDataLength);
+  }
+
+  frontendChannel_(
+      cdp::jsonNotification("Network.requestWillBeSent", params.toDynamic()));
+#endif
+}
+
+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()) {
+    return;
+  }
+
+  // TODO(T218236597)
+  throw std::runtime_error("Not implemented");
+#endif
+}
+
+void NetworkReporter::reportRequestFailed(
+    const std::string& /*requestId*/) const {
+#ifdef REACT_NATIVE_DEBUGGER_ENABLED
+  // Debug build: CDP event handling
+  if (!isDebuggingEnabledNoSync()) {
+    return;
+  }
+
+  // TODO(T218236855)
+  throw std::runtime_error("Not implemented");
+#endif
+}
+
+void NetworkReporter::reportResponseStart(
+    const std::string& requestId,
+    const ResponseInfo& responseInfo,
+    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()) {
+    return;
+  }
+
+  auto response =
+      cdp::network::Response::fromInputParams(responseInfo, encodedDataLength);
+  auto params = cdp::network::ResponseReceivedParams{
+      .requestId = requestId,
+      .loaderId = "",
+      .timestamp = getCurrentUnixTimestampSeconds(),
+      .type = cdp::network::resourceTypeFromMimeType(response.mimeType),
+      .response = response,
+      .hasExtraInfo = false,
+  };
+
+  frontendChannel_(
+      cdp::jsonNotification("Network.responseReceived", params.toDynamic()));
+#endif
+}
+
+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()) {
+    return;
+  }
+
+  // TODO(T218236266)
+  throw std::runtime_error("Not implemented");
+#endif
+}
+
+void NetworkReporter::reportResponseEnd(
+    const std::string& requestId,
+    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()) {
+    return;
+  }
+
+  auto params = cdp::network::LoadingFinishedParams{
+      .requestId = requestId,
+      .timestamp = getCurrentUnixTimestampSeconds(),
+      .encodedDataLength = encodedDataLength,
+  };
+
+  frontendChannel_(
+      cdp::jsonNotification("Network.loadingFinished", params.toDynamic()));
+#endif
+}
+
+} // namespace facebook::react::jsinspector_modern