Android: Report fetch(), XHR and RCTNetworking call stacks to Network panel

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

@@ -77,12 +77,14 @@ const RCTNetworking = {
       }));
     }
     const requestId = generateRequestId();
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingAndroid.sendRequest(
       method,
       url,
       requestId,
       convertHeadersMapToArray(headers),
-      {...body, trackingName},
+      {...body, trackingName, devToolsRequestId},
       responseType,
       incrementalUpdates,
       timeout,

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/InspectorNetworkReporter.kt

@@ -34,7 +34,7 @@ internal object InspectorNetworkReporter {
    */
   @JvmStatic
   external fun reportRequestStart(
-      requestId: Int,
+      requestId: String,
       requestUrl: String,
       requestMethod: String,
       requestHeaders: Map<String, String>,
@@ -48,7 +48,7 @@ internal object InspectorNetworkReporter {
    * - Corresponds to `PerformanceResourceTiming.domainLookupStart`,
    *   `PerformanceResourceTiming.connectStart`.
    */
-  @JvmStatic external fun reportConnectionTiming(requestId: Int, headers: Map<String, String>)
+  @JvmStatic external fun reportConnectionTiming(requestId: String, headers: Map<String, String>)
 
   /**
    * Report when HTTP response headers have been received, corresponding to when the first byte of
@@ -58,7 +58,7 @@ internal object InspectorNetworkReporter {
    */
   @JvmStatic
   external fun reportResponseStart(
-      requestId: Int,
+      requestId: String,
       requestUrl: String,
       responseStatus: Int,
       responseHeaders: Map<String, String>,
@@ -71,43 +71,43 @@ internal object InspectorNetworkReporter {
    * Corresponds to `Network.dataReceived` in CDP.
    */
   @JvmStatic
-  fun reportDataReceived(requestId: Int, data: String) {
+  fun reportDataReceived(requestId: String, data: String) {
     // Guard call to CDP-only reporting method (avoid encodeToByteArray calculation)
     if (isDebuggingEnabled()) {
       reportDataReceivedImpl(requestId, data.encodeToByteArray().size)
     }
   }
 
-  @JvmStatic external fun reportDataReceivedImpl(requestId: Int, dataLength: Int)
+  @JvmStatic external fun reportDataReceivedImpl(requestId: String, dataLength: Int)
 
   /**
    * Report when a network request is complete and we are no longer receiving response data.
    * - Corresponds to `Network.loadingFinished` in CDP.
    * - Corresponds to `PerformanceResourceTiming.responseEnd`.
    */
-  @JvmStatic external fun reportResponseEnd(requestId: Int, encodedDataLength: Long)
+  @JvmStatic external fun reportResponseEnd(requestId: String, encodedDataLength: Long)
 
   /**
    * Report when a network request has failed.
    *
    * Corresponds to `Network.loadingFailed` in CDP.
    */
-  @JvmStatic external fun reportRequestFailed(requestId: Int, cancelled: Boolean)
+  @JvmStatic external fun reportRequestFailed(requestId: String, cancelled: Boolean)
 
   /**
    * Store response body preview. This is an optional reporting method, and is a no-op if CDP
    * debugging is disabled.
    */
   @JvmStatic
-  fun maybeStoreResponseBody(requestId: Int, body: String, base64Encoded: Boolean) {
+  fun maybeStoreResponseBody(requestId: String, body: String, base64Encoded: Boolean) {
     // Guard call to CDP-only reporting method (avoid sending string over JNI)
     if (isDebuggingEnabled()) {
       maybeStoreResponseBodyImpl(requestId, body, base64Encoded)
     }
   }
 
   @JvmStatic
-  external fun maybeStoreResponseBodyImpl(requestId: Int, body: String, base64Encoded: Boolean)
+  external fun maybeStoreResponseBodyImpl(requestId: String, body: String, base64Encoded: Boolean)
 
   /**
    * Incrementally store a response body preview, when a string response is received in chunks.
@@ -117,12 +117,12 @@ internal object InspectorNetworkReporter {
    * is disabled.
    */
   @JvmStatic
-  fun maybeStoreResponseBodyIncremental(requestId: Int, data: String) {
+  fun maybeStoreResponseBodyIncremental(requestId: String, data: String) {
     // Guard call to CDP-only reporting method (avoid sending string over JNI)
     if (isDebuggingEnabled()) {
       maybeStoreResponseBodyIncrementalImpl(requestId, data)
     }
   }
 
-  @JvmStatic external fun maybeStoreResponseBodyIncrementalImpl(requestId: Int, data: String)
+  @JvmStatic external fun maybeStoreResponseBodyIncrementalImpl(requestId: String, data: String)
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkEventUtil.kt

@@ -27,18 +27,18 @@ import okhttp3.Response
  */
 internal object NetworkEventUtil {
   @JvmStatic
-  fun onCreateRequest(requestId: Int, request: Request) {
+  fun onCreateRequest(devToolsRequestId: String, request: Request) {
     if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
       val headersMap = okHttpHeadersToMap(request.headers())
       InspectorNetworkReporter.reportRequestStart(
-          requestId,
+          devToolsRequestId,
           request.url().toString(),
           request.method(),
           headersMap,
           request.body()?.toString().orEmpty(),
           request.body()?.contentLength() ?: 0,
       )
-      InspectorNetworkReporter.reportConnectionTiming(requestId, headersMap)
+      InspectorNetworkReporter.reportConnectionTiming(devToolsRequestId, headersMap)
     }
   }
 
@@ -63,13 +63,14 @@ internal object NetworkEventUtil {
   fun onIncrementalDataReceived(
       reactContext: ReactApplicationContext?,
       requestId: Int,
+      devToolsRequestId: String,
       data: String?,
       progress: Long,
       total: Long,
   ) {
     if (ReactNativeFeatureFlags.enableNetworkEventReporting() && data != null) {
-      InspectorNetworkReporter.reportDataReceived(requestId, data)
-      InspectorNetworkReporter.maybeStoreResponseBodyIncremental(requestId, data)
+      InspectorNetworkReporter.reportDataReceived(devToolsRequestId, data)
+      InspectorNetworkReporter.maybeStoreResponseBodyIncremental(devToolsRequestId, data)
     }
     reactContext?.emitDeviceEvent(
         "didReceiveNetworkIncrementalData",
@@ -103,12 +104,13 @@ internal object NetworkEventUtil {
   fun onDataReceived(
       reactContext: ReactApplicationContext?,
       requestId: Int,
+      devToolsRequestId: String,
       data: String?,
       responseType: String,
   ) {
     if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
       InspectorNetworkReporter.maybeStoreResponseBody(
-          requestId,
+          devToolsRequestId,
           data.orEmpty(),
           responseType == "base64",
       )
@@ -126,12 +128,13 @@ internal object NetworkEventUtil {
   fun onDataReceived(
       reactContext: ReactApplicationContext?,
       requestId: Int,
+      devToolsRequestId: String,
       data: WritableMap,
       rawData: ByteArray,
   ) {
     if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
       InspectorNetworkReporter.maybeStoreResponseBody(
-          requestId,
+          devToolsRequestId,
           Base64.encodeToString(rawData, Base64.NO_WRAP),
           true,
       )
@@ -149,11 +152,12 @@ internal object NetworkEventUtil {
   fun onRequestError(
       reactContext: ReactApplicationContext?,
       requestId: Int,
+      devToolsRequestId: String,
       error: String?,
       e: Throwable?,
   ) {
     if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
-      InspectorNetworkReporter.reportRequestFailed(requestId, false)
+      InspectorNetworkReporter.reportRequestFailed(devToolsRequestId, false)
     }
     reactContext?.emitDeviceEvent(
         "didCompleteNetworkResponse",
@@ -171,10 +175,11 @@ internal object NetworkEventUtil {
   fun onRequestSuccess(
       reactContext: ReactApplicationContext?,
       requestId: Int,
+      devToolsRequestId: String,
       encodedDataLength: Long,
   ) {
     if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
-      InspectorNetworkReporter.reportResponseEnd(requestId, encodedDataLength)
+      InspectorNetworkReporter.reportResponseEnd(devToolsRequestId, encodedDataLength)
     }
     reactContext?.emitDeviceEvent(
         "didCompleteNetworkResponse",
@@ -189,6 +194,7 @@ internal object NetworkEventUtil {
   fun onResponseReceived(
       reactContext: ReactApplicationContext?,
       requestId: Int,
+      devToolsRequestId: String,
       requestUrl: String?,
       response: Response,
   ) {
@@ -200,7 +206,7 @@ internal object NetworkEventUtil {
 
     if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
       InspectorNetworkReporter.reportResponseStart(
-          requestId,
+          devToolsRequestId,
           requestUrl.orEmpty(),
           response.code(),
           headersMap,
@@ -223,6 +229,7 @@ internal object NetworkEventUtil {
   fun onResponseReceived(
       reactContext: ReactApplicationContext?,
       requestId: Int,
+      devToolsRequestId: String,
       statusCode: Int,
       headers: WritableMap?,
       url: String?,
@@ -241,6 +248,7 @@ internal object NetworkEventUtil {
     onResponseReceived(
         reactContext,
         requestId,
+        devToolsRequestId,
         url,
         Response.Builder()
             .protocol(Protocol.HTTP_1_1)