Report fetch(), XHR and RCTNetworking call stacks to Network panel on iOS

packages/react-native/Libraries/Network/RCTInspectorNetworkReporter.h

@@ -27,7 +27,7 @@
  * - Corresponds to `PerformanceResourceTiming.requestStart` (specifically,
  *   marking when the native request was initiated).
  */
-+ (void)reportRequestStart:(NSNumber *)requestId
++ (void)reportRequestStart:(NSString *)requestId
                    request:(NSURLRequest *)request
          encodedDataLength:(int)encodedDataLength;
 
@@ -40,7 +40,7 @@
  *   `PerformanceResourceTiming.connectStart`. Defined as "immediately before
  *   the browser starts to establish the connection to the server".
  */
-+ (void)reportConnectionTiming:(NSNumber *)requestId request:(NSURLRequest *)request;
++ (void)reportConnectionTiming:(NSString *)requestId request:(NSURLRequest *)request;
 
 /**
  * Report when HTTP response headers have been received, corresponding to
@@ -49,7 +49,7 @@
  * - Corresponds to `Network.responseReceived` in CDP.
  * - Corresponds to `PerformanceResourceTiming.responseStart`.
  */
-+ (void)reportResponseStart:(NSNumber *)requestId
++ (void)reportResponseStart:(NSString *)requestId
                    response:(NSURLResponse *)response
                  statusCode:(int)statusCode
                     headers:(NSDictionary<NSString *, NSString *> *)headers;
@@ -59,7 +59,7 @@
  *
  * Corresponds to `Network.dataReceived` in CDP.
  */
-+ (void)reportDataReceived:(NSNumber *)requestId data:(NSData *)data;
++ (void)reportDataReceived:(NSString *)requestId data:(NSData *)data;
 
 /**
  * Report when a network request is complete and we are no longer receiving
@@ -68,20 +68,20 @@
  * - Corresponds to `Network.loadingFinished` in CDP.
  * - Corresponds to `PerformanceResourceTiming.responseEnd`.
  */
-+ (void)reportResponseEnd:(NSNumber *)requestId encodedDataLength:(int)encodedDataLength;
++ (void)reportResponseEnd:(NSString *)requestId encodedDataLength:(int)encodedDataLength;
 
 /**
  * Report when a network request has failed.
  *
  * - Corresponds to `Network.loadingFailed` in CDP.
  */
-+ (void)reportRequestFailed:(NSNumber *)requestId cancelled:(BOOL)cancelled;
++ (void)reportRequestFailed:(NSString *)requestId cancelled:(BOOL)cancelled;
 
 /**
  * Store response body preview. This is an optional reporting method, and is a
  * no-op if CDP debugging is disabled.
  */
-+ (void)maybeStoreResponseBody:(NSNumber *)requestId data:(NSData *)data base64Encoded:(bool)base64Encoded;
++ (void)maybeStoreResponseBody:(NSString *)requestId data:(NSData *)data base64Encoded:(bool)base64Encoded;
 
 /**
  * Incrementally store a response body preview, when a string response is
@@ -91,6 +91,6 @@
  * As with `maybeStoreResponseBody`, calling this method is optional and a
  * no-op if CDP debugging is disabled.
  */
-+ (void)maybeStoreResponseBodyIncremental:(NSNumber *)requestId data:(NSString *)data;
++ (void)maybeStoreResponseBodyIncremental:(NSString *)requestId data:(NSString *)data;
 
 @end

packages/react-native/Libraries/Network/RCTInspectorNetworkReporter.mm

@@ -48,14 +48,14 @@ Headers convertNSDictionaryToHeaders(const NSDictionary<NSString *, NSString *>
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
 
 // Dictionary to buffer incremental response bodies (CDP debugging active only)
-static const NSMutableDictionary<NSNumber *, NSMutableString *> *responseBuffers = nil;
+static const NSMutableDictionary<NSString *, NSMutableString *> *responseBuffers = nil;
 
 #endif
 
 @implementation RCTInspectorNetworkReporter {
 }
 
-+ (void)reportRequestStart:(NSNumber *)requestId
++ (void)reportRequestStart:(NSString *)requestId
                    request:(NSURLRequest *)request
          encodedDataLength:(int)encodedDataLength
 {
@@ -68,11 +68,10 @@ + (void)reportRequestStart:(NSNumber *)requestId
   requestInfo.httpBody = convertRequestBodyToStringTruncated(request);
 #endif
 
-  NetworkReporter::getInstance().reportRequestStart(
-      requestId.stringValue.UTF8String, requestInfo, encodedDataLength, std::nullopt);
+  NetworkReporter::getInstance().reportRequestStart(requestId.UTF8String, requestInfo, encodedDataLength, std::nullopt);
 }
 
-+ (void)reportConnectionTiming:(NSNumber *)requestId request:(NSURLRequest *)request
++ (void)reportConnectionTiming:(NSString *)requestId request:(NSURLRequest *)request
 {
   Headers headersMap;
 
@@ -81,10 +80,10 @@ + (void)reportConnectionTiming:(NSNumber *)requestId request:(NSURLRequest *)req
   headersMap = convertNSDictionaryToHeaders(request.allHTTPHeaderFields);
 #endif
 
-  NetworkReporter::getInstance().reportConnectionTiming(requestId.stringValue.UTF8String, headersMap);
+  NetworkReporter::getInstance().reportConnectionTiming(requestId.UTF8String, headersMap);
 }
 
-+ (void)reportResponseStart:(NSNumber *)requestId
++ (void)reportResponseStart:(NSString *)requestId
                    response:(NSURLResponse *)response
                  statusCode:(int)statusCode
                     headers:(NSDictionary<NSString *, NSString *> *)headers
@@ -99,17 +98,17 @@ + (void)reportResponseStart:(NSNumber *)requestId
 #endif
 
   NetworkReporter::getInstance().reportResponseStart(
-      requestId.stringValue.UTF8String, responseInfo, response.expectedContentLength);
+      requestId.UTF8String, responseInfo, response.expectedContentLength);
 }
 
-+ (void)reportDataReceived:(NSNumber *)requestId data:(NSData *)data
++ (void)reportDataReceived:(NSString *)requestId data:(NSData *)data
 {
-  NetworkReporter::getInstance().reportDataReceived(requestId.stringValue.UTF8String, (int)data.length, std::nullopt);
+  NetworkReporter::getInstance().reportDataReceived(requestId.UTF8String, (int)data.length, std::nullopt);
 }
 
-+ (void)reportResponseEnd:(NSNumber *)requestId encodedDataLength:(int)encodedDataLength
++ (void)reportResponseEnd:(NSString *)requestId encodedDataLength:(int)encodedDataLength
 {
-  NetworkReporter::getInstance().reportResponseEnd(requestId.stringValue.UTF8String, encodedDataLength);
+  NetworkReporter::getInstance().reportResponseEnd(requestId.UTF8String, encodedDataLength);
 
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: Check for buffered response body and flush to NetworkReporter
@@ -118,17 +117,17 @@ + (void)reportResponseEnd:(NSNumber *)requestId encodedDataLength:(int)encodedDa
     if (buffer != nullptr) {
       if (buffer.length > 0) {
         NetworkReporter::getInstance().storeResponseBody(
-            requestId.stringValue.UTF8String, RCTStringViewFromNSString(buffer), false);
+            requestId.UTF8String, RCTStringViewFromNSString(buffer), false);
       }
       [responseBuffers removeObjectForKey:requestId];
     }
   }
 #endif
 }
 
-+ (void)reportRequestFailed:(NSNumber *)requestId cancelled:(bool)cancelled
++ (void)reportRequestFailed:(NSString *)requestId cancelled:(bool)cancelled
 {
-  NetworkReporter::getInstance().reportRequestFailed(requestId.stringValue.UTF8String, cancelled);
+  NetworkReporter::getInstance().reportRequestFailed(requestId.UTF8String, cancelled);
 
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: Clear buffer for request
@@ -138,7 +137,7 @@ + (void)reportRequestFailed:(NSNumber *)requestId cancelled:(bool)cancelled
 #endif
 }
 
-+ (void)maybeStoreResponseBody:(NSNumber *)requestId data:(id)data base64Encoded:(bool)base64Encoded
++ (void)maybeStoreResponseBody:(NSString *)requestId data:(id)data base64Encoded:(bool)base64Encoded
 {
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: Process response body and report to NetworkReporter
@@ -152,21 +151,20 @@ + (void)maybeStoreResponseBody:(NSNumber *)requestId data:(id)data base64Encoded
       NSString *encodedString = [(NSData *)data base64EncodedStringWithOptions:0];
       if (encodedString != nullptr) {
         networkReporter.storeResponseBody(
-            requestId.stringValue.UTF8String, RCTStringViewFromNSString(encodedString), base64Encoded);
+            requestId.UTF8String, RCTStringViewFromNSString(encodedString), base64Encoded);
       } else {
         RCTLogWarn(@"Failed to encode response data for request %@", requestId);
       }
     } @catch (NSException *exception) {
       RCTLogWarn(@"Exception while encoding response data: %@", exception.reason);
     }
   } else if ([data isKindOfClass:[NSString class]] && [(NSString *)data length] > 0) {
-    networkReporter.storeResponseBody(
-        requestId.stringValue.UTF8String, RCTStringViewFromNSString((NSString *)data), base64Encoded);
+    networkReporter.storeResponseBody(requestId.UTF8String, RCTStringViewFromNSString((NSString *)data), base64Encoded);
   }
 #endif
 }
 
-+ (void)maybeStoreResponseBodyIncremental:(NSNumber *)requestId data:(NSString *)data
++ (void)maybeStoreResponseBodyIncremental:(NSString *)requestId data:(NSString *)data
 {
 #ifdef REACT_NATIVE_DEBUGGER_ENABLED
   // Debug build: Buffer incremental response body contents

packages/react-native/Libraries/Network/RCTNetworkTask.h

@@ -28,6 +28,7 @@ typedef NS_ENUM(NSInteger, RCTNetworkTaskStatus) {
 @property (nonatomic, readonly) NSNumber *requestID;
 @property (nonatomic, readonly, weak) id requestToken;
 @property (nonatomic, readonly) NSURLResponse *response;
+@property (nonatomic, readonly) NSString *devToolsRequestId;
 
 @property (nonatomic, copy) RCTURLRequestCompletionBlock completionBlock;
 @property (nonatomic, copy) RCTURLRequestProgressBlock downloadProgressBlock;
@@ -40,7 +41,10 @@ typedef NS_ENUM(NSInteger, RCTNetworkTaskStatus) {
 - (instancetype)initWithRequest:(NSURLRequest *)request
                         handler:(id<RCTURLRequestHandler>)handler
                   callbackQueue:(dispatch_queue_t)callbackQueue NS_DESIGNATED_INITIALIZER;
-
+- (instancetype)initWithDevToolsRequestId:(NSString *)devToolsRequestId
+                                  request:(NSURLRequest *)request
+                                  handler:(id<RCTURLRequestHandler>)handler
+                            callbackQueue:(dispatch_queue_t)callbackQueue;
 - (void)start;
 - (void)cancel;
 

packages/react-native/Libraries/Network/RCTNetworkTask.mm

@@ -26,13 +26,26 @@ @implementation RCTNetworkTask {
 - (instancetype)initWithRequest:(NSURLRequest *)request
                         handler:(id<RCTURLRequestHandler>)handler
                   callbackQueue:(dispatch_queue_t)callbackQueue
+{
+  self = [self initWithDevToolsRequestId:nil request:request handler:handler callbackQueue:callbackQueue];
+  return self;
+}
+
+- (instancetype)initWithDevToolsRequestId:(NSString *)devToolsRequestId
+                                  request:(NSURLRequest *)request
+                                  handler:(id<RCTURLRequestHandler>)handler
+                            callbackQueue:(dispatch_queue_t)callbackQueue
 {
   RCTAssertParam(request);
   RCTAssertParam(handler);
   RCTAssertParam(callbackQueue);
 
   if ((self = [super init])) {
     _requestID = @(currentRequestId++);
+    _devToolsRequestId = devToolsRequestId;
+    if (_devToolsRequestId == nil) {
+      _devToolsRequestId = [NSString stringWithFormat:@"RCTNetworkTask_%@", _requestID];
+    }
     _request = request;
     _handler = handler;
     _callbackQueue = callbackQueue;

packages/react-native/Libraries/Network/RCTNetworking.h

@@ -47,6 +47,9 @@
  */
 - (RCTNetworkTask *)networkTaskWithRequest:(NSURLRequest *)request
                            completionBlock:(RCTURLRequestCompletionBlock)completionBlock;
+- (RCTNetworkTask *)networkTaskWithDevToolsRequestId:(NSString *)devToolsRequestId
+                                             request:(NSURLRequest *)request
+                                     completionBlock:(RCTURLRequestCompletionBlock)completionBlock;
 
 - (void)addRequestHandler:(id<RCTNetworkingRequestHandler>)handler;
 

packages/react-native/Libraries/Network/RCTNetworking.ios.js

@@ -40,6 +40,8 @@ const RCTNetworking = {
     withCredentials: boolean,
   ) {
     const body = convertRequestBody(data);
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingIOS.sendRequest(
       {
         method,
@@ -50,6 +52,7 @@ const RCTNetworking = {
         incrementalUpdates,
         timeout,
         withCredentials,
+        unstable_devToolsRequestId: devToolsRequestId,
       },
       callback,
     );