Support CDP response previews (#52487)

Summary:
Pull Request resolved: #52487

Continues integration of `NetworkReporter` (jsinspector-modern) on Android, to enable the Network panel in React Native DevTools.

NOTE: As with iOS, all changes are gated behind the `enableNetworkEventReporting` and `fuseboxNetworkInspectionEnabled` feature flags.

**This diff**

Integrates `Network.storeRequestBody` on Android (CDP: [`Network.getResponseBody`](https://chromedevtools.github.io/devtools-protocol/tot/Network/#method-getResponseBody) CDP event) to populate the "Preview" and "Response" tabs in the React Native DevTools Network panel.

This is integrated with `NetworkingModule.kt` to support synchronously received `text` or `blob` data types, with incremental response support added next in D77927896.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D77799617

fbshipit-source-id: 495baebbb3b447d1ea86705c1680578eed796d78

Author: huntie

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobModule.kt

@@ -35,7 +35,6 @@ import java.util.HashMap
 import java.util.UUID
 import okhttp3.MediaType
 import okhttp3.RequestBody
-import okhttp3.ResponseBody
 import okio.ByteString
 
 @ReactModule(name = NativeBlobModuleSpec.NAME)
@@ -72,7 +71,7 @@ public class BlobModule(reactContext: ReactApplicationContext) :
           return !isRemote && responseType == "blob"
         }
 
-        override fun fetch(uri: Uri): WritableMap {
+        override fun fetch(uri: Uri): Pair<WritableMap, ByteArray> {
           val data = getBytesFromUri(uri)
 
           val blob = Arguments.createMap()
@@ -85,7 +84,7 @@ public class BlobModule(reactContext: ReactApplicationContext) :
           blob.putString("name", getNameFromUri(uri))
           blob.putDouble("lastModified", getLastModifiedFromUri(uri))
 
-          return blob
+          return blob to data
         }
       }
 
@@ -119,8 +118,7 @@ public class BlobModule(reactContext: ReactApplicationContext) :
           return responseType == "blob"
         }
 
-        override fun toResponseData(body: ResponseBody): WritableMap {
-          val data = body.bytes()
+        override fun toResponseData(data: ByteArray): WritableMap {
           val blob = Arguments.createMap()
           blob.putString("blobId", store(data))
           blob.putInt("offset", 0)

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

@@ -64,4 +64,11 @@ internal object InspectorNetworkReporter {
    * - Corresponds to `PerformanceResourceTiming.responseEnd`.
    */
   @JvmStatic external fun reportResponseEnd(requestId: Int, encodedDataLength: Long)
+
+  /**
+   * Store response body preview. This is an optional reporting method, and is a no-op if CDP
+   * debugging is disabled.
+   */
+  @JvmStatic
+  external fun maybeStoreResponseBody(requestId: Int, body: String, base64Encoded: Boolean)
 }

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

@@ -10,6 +10,7 @@
 package com.facebook.react.modules.network
 
 import android.os.Bundle
+import android.util.Base64
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.WritableMap
@@ -92,7 +93,16 @@ internal object NetworkEventUtil {
   }
 
   @JvmStatic
-  fun onDataReceived(reactContext: ReactApplicationContext?, requestId: Int, data: String?) {
+  fun onDataReceived(
+      reactContext: ReactApplicationContext?,
+      requestId: Int,
+      data: String?,
+      responseType: String
+  ) {
+    if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
+      InspectorNetworkReporter.maybeStoreResponseBody(
+          requestId, data.orEmpty(), responseType == "base64")
+    }
     reactContext?.emitDeviceEvent(
         "didReceiveNetworkData",
         buildReadableArray {
@@ -102,7 +112,16 @@ internal object NetworkEventUtil {
   }
 
   @JvmStatic
-  fun onDataReceived(reactContext: ReactApplicationContext?, requestId: Int, data: WritableMap?) {
+  fun onDataReceived(
+      reactContext: ReactApplicationContext?,
+      requestId: Int,
+      data: WritableMap,
+      rawData: ByteArray
+  ) {
+    if (ReactNativeFeatureFlags.enableNetworkEventReporting()) {
+      InspectorNetworkReporter.maybeStoreResponseBody(
+          requestId, Base64.encodeToString(rawData, Base64.NO_WRAP), true)
+    }
     reactContext?.emitDeviceEvent(
         "didReceiveNetworkData",
         Arguments.createArray().apply {

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

@@ -60,8 +60,10 @@ public class NetworkingModule(
     /** Returns if the handler should be used for an URI. */
     public fun supports(uri: Uri, responseType: String): Boolean
 
-    /** Fetch the URI and return the JS body payload. */
-    @Throws(IOException::class) public fun fetch(uri: Uri): WritableMap
+    /**
+     * Fetch the URI and return a tuple containing the JS body payload and the raw response body.
+     */
+    @Throws(IOException::class) public fun fetch(uri: Uri): Pair<WritableMap, ByteArray>
   }
 
   /** Allows adding custom handling to build the [RequestBody] from the JS body payload. */
@@ -79,7 +81,7 @@ public class NetworkingModule(
     public fun supports(responseType: String): Boolean
 
     /** Returns the JS body payload for the [ResponseBody]. */
-    @Throws(IOException::class) public fun toResponseData(body: ResponseBody): WritableMap
+    @Throws(IOException::class) public fun toResponseData(data: ByteArray): WritableMap
   }
 
   private val client: OkHttpClient
@@ -254,7 +256,7 @@ public class NetworkingModule(
       // Check if a handler is registered
       for (handler in uriHandlers) {
         if (handler.supports(uri, responseType)) {
-          val res = handler.fetch(uri)
+          val (res, rawBody) = handler.fetch(uri)
           val encodedDataLength = res.toString().toByteArray().size
           // fix: UriHandlers which are not using file:// scheme fail in whatwg-fetch at this line
           // https://github.com/JakeChampion/fetch/blob/main/fetch.js#L547
@@ -266,7 +268,7 @@ public class NetworkingModule(
                   .message("OK")
                   .build()
           NetworkEventUtil.onResponseReceived(reactApplicationContext, requestId, url, response)
-          NetworkEventUtil.onDataReceived(reactApplicationContext, requestId, res)
+          NetworkEventUtil.onDataReceived(reactApplicationContext, requestId, res, rawBody)
           NetworkEventUtil.onRequestSuccess(
               reactApplicationContext, requestId, encodedDataLength.toLong())
           return
@@ -543,8 +545,10 @@ public class NetworkingModule(
                   // Check if a handler is registered
                   for (responseHandler in responseHandlers) {
                     if (responseHandler.supports(responseType)) {
-                      val res = responseHandler.toResponseData(responseBody)
-                      NetworkEventUtil.onDataReceived(reactApplicationContext, requestId, res)
+                      val responseData = responseBody.bytes()
+                      val res = responseHandler.toResponseData(responseData)
+                      NetworkEventUtil.onDataReceived(
+                          reactApplicationContext, requestId, res, responseData)
                       NetworkEventUtil.onRequestSuccess(
                           reactApplicationContext, requestId, responseBody.contentLength())
                       return
@@ -582,7 +586,7 @@ public class NetworkingModule(
                     responseString = Base64.encodeToString(responseBody.bytes(), Base64.NO_WRAP)
                   }
                   NetworkEventUtil.onDataReceived(
-                      reactApplicationContext, requestId, responseString)
+                      reactApplicationContext, requestId, responseString, responseType)
                   NetworkEventUtil.onRequestSuccess(
                       reactApplicationContext, requestId, responseBody.contentLength())
                 } catch (e: IOException) {

packages/react-native/ReactAndroid/src/main/jni/react/jni/InspectorNetworkReporter.cpp

@@ -101,6 +101,23 @@ std::string limitRequestBodySize(std::string requestBody) {
       std::to_string(requestId), static_cast<std::int64_t>(encodedDataLength));
 }
 
+/* static */ void InspectorNetworkReporter::maybeStoreResponseBody(
+    jni::alias_ref<jclass> /*unused*/,
+    jint requestId,
+    jni::alias_ref<jstring> body,
+    jboolean base64Encoded) {
+#ifdef REACT_NATIVE_DEBUGGER_ENABLED
+  // Debug build: Process response body and report to NetworkReporter
+  auto& networkReporter = NetworkReporter::getInstance();
+  if (!networkReporter.isDebuggingEnabled()) {
+    return;
+  }
+
+  networkReporter.storeResponseBody(
+      std::to_string(requestId), body->toStdString(), base64Encoded != 0u);
+#endif
+}
+
 /* static */ void InspectorNetworkReporter::registerNatives() {
   javaClassLocal()->registerNatives({
       makeNativeMethod(
@@ -112,6 +129,9 @@ std::string limitRequestBodySize(std::string requestBody) {
       makeNativeMethod(
           "reportConnectionTiming",
           InspectorNetworkReporter::reportConnectionTiming),
+      makeNativeMethod(
+          "maybeStoreResponseBody",
+          InspectorNetworkReporter::maybeStoreResponseBody),
   });
 }
 

packages/react-native/ReactAndroid/src/main/jni/react/jni/InspectorNetworkReporter.h

@@ -44,6 +44,12 @@ class InspectorNetworkReporter
       jint requestId,
       jlong encodedDataLength);
 
+  static void maybeStoreResponseBody(
+      jni::alias_ref<jclass> /*unused*/,
+      jint requestId,
+      jni::alias_ref<jstring> body,
+      jboolean base64Encoded);
+
   static void registerNatives();
 
  private:

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/modules/network/NetworkEventUtilTest.kt

@@ -127,7 +127,7 @@ class NetworkEventUtilTest {
     val requestId = 1
     val data = "response data"
 
-    NetworkEventUtil.onDataReceived(reactContext, requestId, data)
+    NetworkEventUtil.onDataReceived(reactContext, requestId, data, "string")
 
     val eventNameCaptor = ArgumentCaptor.forClass(String::class.java)
     val eventArgumentsCaptor = ArgumentCaptor.forClass(WritableArray::class.java)
@@ -147,7 +147,7 @@ class NetworkEventUtilTest {
     val requestId = 1
     val data: WritableMap = Arguments.createMap().apply { putString("key", "value") }
 
-    NetworkEventUtil.onDataReceived(reactContext, requestId, data)
+    NetworkEventUtil.onDataReceived(reactContext, requestId, data, ByteArray(0))
 
     val eventNameCaptor = ArgumentCaptor.forClass(String::class.java)
     val eventArgumentsCaptor = ArgumentCaptor.forClass(WritableArray::class.java)
@@ -276,8 +276,8 @@ class NetworkEventUtilTest {
     NetworkEventUtil.onDataSend(null, 1, 100, 1000)
     NetworkEventUtil.onIncrementalDataReceived(null, 1, "data", 100, 1000)
     NetworkEventUtil.onDataReceivedProgress(null, 1, 100, 1000)
-    NetworkEventUtil.onDataReceived(null, 1, "data")
-    NetworkEventUtil.onDataReceived(null, 1, Arguments.createMap())
+    NetworkEventUtil.onDataReceived(null, 1, "data", "string")
+    NetworkEventUtil.onDataReceived(null, 1, Arguments.createMap(), ByteArray(0))
     NetworkEventUtil.onRequestError(null, 1, "error", null)
     NetworkEventUtil.onRequestSuccess(null, 1, 0)
     NetworkEventUtil.onResponseReceived(null, 1, url, response)

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

@@ -7,6 +7,8 @@
 
 #include "HttpUtils.h"
 
+#include <algorithm>
+
 namespace facebook::react::jsinspector_modern {
 
 std::string httpReasonPhrase(uint16_t status) {
@@ -147,8 +149,14 @@ std::string httpReasonPhrase(uint16_t status) {
 std::string mimeTypeFromHeaders(const Headers& headers) {
   std::string mimeType = "application/octet-stream";
 
-  if (headers.find("Content-Type") != headers.end()) {
-    mimeType = headers.at("Content-Type");
+  for (const auto& [name, value] : headers) {
+    std::string lowerName = name;
+    std::transform(
+        lowerName.begin(), lowerName.end(), lowerName.begin(), ::tolower);
+    if (lowerName == "content-type") {
+      mimeType = value;
+      break;
+    }
   }
 
   return mimeType;