Implement core Network CDP events on iOS (facebook#50142)

huntie · facebook-github-bot · commit 793094fc0f1b · 2025-03-26T12:25:00.000-07:00
Summary: Pull Request resolved: facebook#50142 This is a first pass at integrating `NetworkReporter` in our networking stack on iOS (`RCTNetworking.mm`). **Implemented events** Wires up minimal events sufficient to populate the Chrome DevTools Network panel: - `Network.requestWillBeSent` - `Network.responseReceived` - `Network.loadingFinished` **Other notes** `RCTNetworking` is used (tentatively) as the integration point since it: - Is the default implementation for the network stack on iOS. - Should allow us to pair with originating JS call site down the line. - Intercepts Blob requests (at least `RCTImageLoader`). - Sits outside the user-configurable `RCTNetworkingResponseHandler` and `RCTNetworkingRequestHandler` concepts. - Is where network events are currently sent to JavaScript (`sendEventWithName`). NOTE: Reminder: `NetworkReporter` is currently a no-op without the `fuseboxNetworkInspectionEnabled` experiment set. Changelog: [Internal] Reviewed By: javache Differential Revision: D71470038 fbshipit-source-id: 069d77473c333a98f796b3dffa670a39b3016b2b
diff --git a/packages/react-native/Libraries/Network/RCTInspectorNetworkReporter.h b/packages/react-native/Libraries/Network/RCTInspectorNetworkReporter.h
@@ -0,0 +1,30 @@
+/*
+ * 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
+
+#import <Foundation/Foundation.h>
+
+/**
+ * [Experimental] An interface for reporting network events to the modern
+ * debugger server and Web Performance APIs.
+ *
+ * This is a helper class wrapping
+ * `facebook::react::jsinspector_modern::NetworkReporter`.
+ */
+@interface RCTInspectorNetworkReporter : NSObject
+
++ (void)reportRequestStart:(NSNumber *)requestId
+                   request:(NSURLRequest *)request
+         encodedDataLength:(int)encodedDataLength;
++ (void)reportResponseStart:(NSNumber *)requestId
+                   response:(NSURLResponse *)response
+                 statusCode:(int)statusCode
+                    headers:(NSDictionary<NSString *, NSString *> *)headers;
++ (void)reportResponseEnd:(NSNumber *)requestId encodedDataLength:(int)encodedDataLength;
+
+@end
diff --git a/packages/react-native/Libraries/Network/RCTInspectorNetworkReporter.mm b/packages/react-native/Libraries/Network/RCTInspectorNetworkReporter.mm
@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+#import "RCTInspectorNetworkReporter.h"
+
+#import <jsinspector-modern/network/NetworkReporter.h>
+
+namespace {
+
+using namespace facebook::react::jsinspector_modern;
+
+Headers convertNSDictionaryToHeaders(const NSDictionary<NSString *, NSString *> *headers)
+{
+  Headers responseHeaders;
+  for (NSString *key in headers) {
+    responseHeaders[[key UTF8String]] = [headers[key] UTF8String];
+  }
+  return responseHeaders;
+}
+
+} // namespace
+
+@implementation RCTInspectorNetworkReporter {
+}
+
++ (void)reportRequestStart:(NSNumber *)requestId
+                   request:(NSURLRequest *)request
+         encodedDataLength:(int)encodedDataLength
+{
+  RequestInfo requestInfo;
+  requestInfo.url = [request.URL absoluteString].UTF8String;
+  requestInfo.httpMethod = [request.HTTPMethod UTF8String];
+  requestInfo.headers = convertNSDictionaryToHeaders(request.allHTTPHeaderFields);
+  requestInfo.httpBody = std::string((const char *)request.HTTPBody.bytes, request.HTTPBody.length);
+
+  NetworkReporter::getInstance().reportRequestStart(
+      requestId.stringValue.UTF8String, requestInfo, encodedDataLength, std::nullopt);
+}
+
++ (void)reportResponseStart:(NSNumber *)requestId
+                   response:(NSURLResponse *)response
+                 statusCode:(int)statusCode
+                    headers:(NSDictionary<NSString *, NSString *> *)headers
+{
+  ResponseInfo responseInfo;
+  responseInfo.url = response.URL.absoluteString.UTF8String;
+  responseInfo.statusCode = statusCode;
+  responseInfo.headers = convertNSDictionaryToHeaders(headers);
+
+  NetworkReporter::getInstance().reportResponseStart(
+      requestId.stringValue.UTF8String, responseInfo, response.expectedContentLength);
+}
+
++ (void)reportResponseEnd:(NSNumber *)requestId encodedDataLength:(int)encodedDataLength
+{
+  NetworkReporter::getInstance().reportResponseEnd(requestId.stringValue.UTF8String, encodedDataLength);
+}
+
+@end
diff --git a/packages/react-native/Libraries/Network/RCTNetworking.mm b/packages/react-native/Libraries/Network/RCTNetworking.mm
@@ -17,6 +17,7 @@
 
 #import <React/RCTHTTPRequestHandler.h>
 
+#import "RCTInspectorNetworkReporter.h"
 #import "RCTNetworkPlugins.h"
 
 static BOOL gEnableNetworkingRequestQueue = NO;
@@ -587,16 +588,22 @@ - (void)sendRequest:(NSURLRequest *)request
   RCTURLRequestResponseBlock responseBlock = ^(NSURLResponse *response) {
     NSDictionary<NSString *, NSString *> *headers;
     NSInteger status;
-    if ([response isKindOfClass:[NSHTTPURLResponse class]]) { // Might be a local file request
+    if ([response isKindOfClass:[NSHTTPURLResponse class]]) {
       NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *)response;
       headers = httpResponse.allHeaderFields ?: @{};
       status = httpResponse.statusCode;
     } else {
+      // Other HTTP-like request
       headers = response.MIMEType ? @{@"Content-Type" : response.MIMEType} : @{};
       status = 200;
     }
     id responseURL = response.URL ? response.URL.absoluteString : [NSNull null];
     NSArray<id> *responseJSON = @[ task.requestID, @(status), headers, responseURL ];
+
+    [RCTInspectorNetworkReporter reportResponseStart:task.requestID
+                                            response:response
+                                          statusCode:status
+                                             headers:headers];
     [weakSelf sendEventWithName:@"didReceiveNetworkResponse" body:responseJSON];
   };
 
@@ -655,6 +662,7 @@ - (void)sendRequest:(NSURLRequest *)request
     NSArray *responseJSON =
         @[ task.requestID, RCTNullIfNil(error.localizedDescription), error.code == kCFURLErrorTimedOut ? @YES : @NO ];
 
+    [RCTInspectorNetworkReporter reportResponseEnd:task.requestID encodedDataLength:data.length];
     [strongSelf sendEventWithName:@"didCompleteNetworkResponse" body:responseJSON];
     [strongSelf->_tasksByRequestID removeObjectForKey:task.requestID];
   };
@@ -673,6 +681,9 @@ - (void)sendRequest:(NSURLRequest *)request
     responseSender(@[ task.requestID ]);
   }
 
+  [RCTInspectorNetworkReporter reportRequestStart:task.requestID
+                                          request:request
+                                encodedDataLength:task.response.expectedContentLength];
   [task start];
 }
 
diff --git a/packages/react-native/Libraries/Network/React-RCTNetwork.podspec b/packages/react-native/Libraries/Network/React-RCTNetwork.podspec
@@ -46,6 +46,8 @@ Pod::Spec.new do |s|
 
   add_dependency(s, "React-RCTFBReactNativeSpec")
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])
+  add_dependency(s, "React-jsinspectorcdp", :framework_name => 'jsinspector_moderncdp')
+  add_dependency(s, "React-jsinspectornetwork", :framework_name => 'jsinspector_modernnetwork')
   add_dependency(s, "React-NativeModulesApple", :additional_framework_paths => ["build/generated/ios"])
 
   add_rn_third_party_dependencies(s)
diff --git a/packages/react-native/React/React-RCTFabric.podspec b/packages/react-native/React/React-RCTFabric.podspec
@@ -86,6 +86,7 @@ Pod::Spec.new do |s|
   add_dependency(s, "React-RCTAnimation", :framework_name => 'RCTAnimation')
   add_dependency(s, "React-jsinspector", :framework_name => 'jsinspector_modern')
   add_dependency(s, "React-jsinspectorcdp", :framework_name => 'jsinspector_moderncdp')
+  add_dependency(s, "React-jsinspectornetwork", :framework_name => 'jsinspector_modernnetwork')
   add_dependency(s, "React-jsinspectortracing", :framework_name => 'jsinspector_moderntracing')
   add_dependency(s, "React-renderercss")
 
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/NetworkIOAgent.cpp b/packages/react-native/ReactCommon/jsinspector-modern/NetworkIOAgent.cpp
@@ -271,16 +271,19 @@ bool NetworkIOAgent::handleRequest(
   }
 
   if (InspectorFlags::getInstance().getNetworkInspectionEnabled()) {
+    auto& networkReporter = NetworkReporter::getInstance();
+
     // @cdp Network.enable support is experimental.
     if (req.method == "Network.enable") {
-      NetworkReporter::getInstance().enableDebugging();
+      networkReporter.setFrontendChannel(frontendChannel_);
+      networkReporter.enableDebugging();
       frontendChannel_(cdp::jsonResult(req.id));
       return true;
     }
 
     // @cdp Network.disable support is experimental.
     if (req.method == "Network.disable") {
-      NetworkReporter::getInstance().disableDebugging();
+      networkReporter.disableDebugging();
       frontendChannel_(cdp::jsonResult(req.id));
       return true;
     }
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/network/CMakeLists.txt b/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
         glog
+        jsinspector_cdp
 )
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/network/NetworkReporter.cpp b/packages/react-native/ReactCommon/jsinspector-modern/network/NetworkReporter.cpp
@@ -8,16 +8,110 @@
 #include "NetworkReporter.h"
 
 #include <glog/logging.h>
+#include <jsinspector-modern/cdp/CdpJson.h>
 
 #include <stdexcept>
 
 namespace facebook::react::jsinspector_modern {
 
+namespace {
+
+/**
+ * Get the CDP `ResourceType` for a given MIME type.
+ *
+ * https://chromedevtools.github.io/devtools-protocol/tot/Network/#type-ResourceType
+ */
+std::string mimeTypeToResourceType(const std::string& mimeType) {
+  if (mimeType.find("image/") == 0) {
+    return "Image";
+  }
+
+  if (mimeType.find("video/") == 0 || mimeType.find("audio/") == 0) {
+    return "Media";
+  }
+
+  if (mimeType == "application/javascript" || mimeType == "text/javascript" ||
+      mimeType == "application/x-javascript") {
+    return "Script";
+  }
+
+  if (mimeType == "application/json" || mimeType.find("application/xml") == 0 ||
+      mimeType == "text/xml") {
+    // Assume XHR for JSON/XML types
+    return "XHR";
+  }
+
+  return "Other";
+}
+
+folly::dynamic headersToDynamic(const std::optional<Headers>& headers) {
+  folly::dynamic result = folly::dynamic::object;
+
+  if (headers) {
+    for (const auto& [key, value] : *headers) {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+folly::dynamic requestToCdpParams(const RequestInfo& request) {
+  folly::dynamic result = folly::dynamic::object;
+  result["url"] = request.url;
+  result["method"] = request.httpMethod;
+  result["headers"] = headersToDynamic(request.headers);
+  result["postData"] = request.httpBody.value();
+
+  return result;
+}
+
+folly::dynamic responseToCdpParams(
+    const ResponseInfo& response,
+    int encodedDataLength) {
+  auto headers = response.headers.value_or(Headers());
+  std::string mimeType = "Other";
+
+  if (headers.find("Content-Type") != headers.end()) {
+    mimeType = mimeTypeToResourceType(headers.at("Content-Type"));
+  }
+
+  folly::dynamic result = folly::dynamic::object;
+  result["url"] = response.url;
+  result["status"] = response.statusCode;
+  result["statusText"] = "";
+  result["headers"] = headersToDynamic(response.headers);
+  result["mimeType"] = mimeType;
+  result["encodedDataLength"] = encodedDataLength;
+
+  return result;
+}
+
+/**
+ * Get the current Unix timestamp in seconds (µs precision).
+ */
+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
+
 NetworkReporter& NetworkReporter::getInstance() {
   static NetworkReporter tracer;
   return tracer;
 }
 
+void NetworkReporter::setFrontendChannel(FrontendChannel frontendChannel) {
+  frontendChannel_ = std::move(frontendChannel);
+}
+
 bool NetworkReporter::enableDebugging() {
   if (debuggingEnabled_.load(std::memory_order_acquire)) {
     return false;
@@ -38,13 +132,34 @@ bool NetworkReporter::disableDebugging() {
   return true;
 }
 
-void NetworkReporter::reportRequestStart(const std::string& /*requestId*/) {
+void NetworkReporter::reportRequestStart(
+    const std::string& requestId,
+    const RequestInfo& requestInfo,
+    int encodedDataLength,
+    const std::optional<ResponseInfo>& redirectResponse) {
   if (!debuggingEnabled_.load(std::memory_order_relaxed)) {
     return;
   }
 
-  // TODO(T216933356)
-  throw std::runtime_error("Not implemented");
+  double timestamp = getCurrentUnixTimestampSeconds();
+
+  folly::dynamic params = folly::dynamic::object;
+  params["requestId"] = requestId;
+  params["loaderId"] = "";
+  params["documentURL"] = "mobile";
+  params["request"] = requestToCdpParams(requestInfo);
+  // NOTE: timestamp and wallTime share the same time unit and precision,
+  // except wallTime is from an arbitrary epoch - use the Unix epoch for both.
+  params["timestamp"] = timestamp;
+  params["wallTime"] = timestamp;
+  params["initiator"] = folly::dynamic::object("type", "script");
+  params["redirectHasExtraInfo"] = redirectResponse.has_value();
+  if (redirectResponse.has_value()) {
+    params["redirectResponse"] =
+        responseToCdpParams(redirectResponse.value(), encodedDataLength);
+  }
+
+  frontendChannel_(cdp::jsonNotification("Network.requestWillBeSent", params));
 }
 
 void NetworkReporter::reportConnectionTiming(const std::string& /*requestId*/) {
@@ -65,13 +180,26 @@ void NetworkReporter::reportRequestFailed(const std::string& /*requestId*/) {
   throw std::runtime_error("Not implemented");
 }
 
-void NetworkReporter::reportResponseStart(const std::string& /*requestId*/) {
+void NetworkReporter::reportResponseStart(
+    const std::string& requestId,
+    const ResponseInfo& responseInfo,
+    int encodedDataLength) {
   if (!debuggingEnabled_.load(std::memory_order_relaxed)) {
     return;
   }
 
-  // TODO(T216933356)
-  throw std::runtime_error("Not implemented");
+  folly::dynamic responseParams =
+      responseToCdpParams(responseInfo, encodedDataLength);
+
+  folly::dynamic params = folly::dynamic::object;
+  params["requestId"] = requestId;
+  params["loaderId"] = "";
+  params["timestamp"] = getCurrentUnixTimestampSeconds();
+  params["type"] = responseParams["mimeType"];
+  params["response"] = responseParams;
+  params["hasExtraInfo"] = false;
+
+  frontendChannel_(cdp::jsonNotification("Network.responseReceived", params));
 }
 
 void NetworkReporter::reportDataReceived(const std::string& /*requestId*/) {
@@ -83,13 +211,19 @@ void NetworkReporter::reportDataReceived(const std::string& /*requestId*/) {
   throw std::runtime_error("Not implemented");
 }
 
-void NetworkReporter::reportResponseEnd(const std::string& /*requestId*/) {
+void NetworkReporter::reportResponseEnd(
+    const std::string& requestId,
+    int encodedDataLength) {
   if (!debuggingEnabled_.load(std::memory_order_relaxed)) {
     return;
   }
 
-  // TODO(T216933356)
-  throw std::runtime_error("Not implemented");
+  folly::dynamic params = folly::dynamic::object;
+  params["requestId"] = requestId;
+  params["timestamp"] = getCurrentUnixTimestampSeconds();
+  params["encodedDataLength"] = encodedDataLength;
+
+  frontendChannel_(cdp::jsonNotification("Network.loadingFinished", params));
 }
 
 } // namespace facebook::react::jsinspector_modern
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/network/NetworkReporter.h b/packages/react-native/ReactCommon/jsinspector-modern/network/NetworkReporter.h
diff --git a/packages/react-native/ReactCommon/jsinspector-modern/network/React-jsinspectornetwork.podspec b/packages/react-native/ReactCommon/jsinspector-modern/network/React-jsinspectornetwork.podspec
diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock

Original file line number	Diff line number	Diff line change
`@@ -24,4 +24,5 @@ target_include_directories(jsinspector_network PUBLIC ${REACT_COMMON_DIR})`
`24`	`24`	`target_link_libraries(jsinspector_network`
`25`	`25`	`folly_runtime`
`26`	`26`	`glog`
	`27`	`+ jsinspector_cdp`
`27`	`28`	`)`