Add CDP support for WebSocket events (Android) (#57541)

Summary:
Pull Request resolved: #57541

**Context**

This stack implements WebSocket event debugging for the Network panel in React Native DevTools.

**This diff**

Follows the iOS implementation: reports the same six `Network.webSocket*` CDP events through the shared `NetworkReporter` C++ core, gated behind the same `fuseboxWebSocketEventsEnabled` feature flag.

**Changes**

- `InspectorNetworkReporter` + `JInspectorNetworkReporter`: New JNI-backed `reportWebSocket*` methods bridging to the shared `NetworkReporter` C++ core. Payload conversion costs (base64) are deferred until a debugger is attached.
- `WebSocketModule`: Reports connection lifecycle, real handshake headers (from the OkHttp `Request`/`Response`), and sent/received messages, gated behind the same feature flags as iOS.

Changelog: [Internal]

Reviewed By: GijsWeterings

Differential Revision: D111561994

fbshipit-source-id: 735ad0e47fc4e9e943b1092fbc23846ff9baf963

Author: huntie

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

@@ -5,10 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@file:Suppress("DEPRECATION_ERROR") // Conflicting okhttp versions
+
 package com.facebook.react.modules.network
 
 import com.facebook.proguard.annotations.DoNotStripAny
 import com.facebook.soloader.SoLoader
+import okio.ByteString
 
 /**
  * [Experimental] An interface for reporting network events to the modern debugger server and Web
@@ -125,4 +128,106 @@ internal object InspectorNetworkReporter {
   }
 
   @JvmStatic external fun maybeStoreResponseBodyIncrementalImpl(requestId: String, data: String)
+
+  /**
+   * Report that a WebSocket connection is about to be created.
+   *
+   * Corresponds to `Network.webSocketCreated` in CDP.
+   */
+  @JvmStatic external fun reportWebSocketCreated(requestId: String, url: String)
+
+  /**
+   * Report that a WebSocket handshake (HTTP upgrade) request is about to be sent, along with its
+   * final request headers.
+   *
+   * Corresponds to `Network.webSocketWillSendHandshakeRequest` in CDP.
+   */
+  @JvmStatic
+  external fun reportWebSocketWillSendHandshakeRequest(
+      requestId: String,
+      headers: Map<String, String>,
+  )
+
+  /**
+   * Report that a WebSocket handshake response was received and the connection is established.
+   *
+   * Corresponds to `Network.webSocketHandshakeResponseReceived` in CDP.
+   */
+  @JvmStatic
+  external fun reportWebSocketHandshakeResponseReceived(
+      requestId: String,
+      statusCode: Int,
+      headers: Map<String, String>,
+  )
+
+  /**
+   * Report a text WebSocket message sent over an open connection.
+   *
+   * Corresponds to `Network.webSocketFrameSent` in CDP.
+   */
+  @JvmStatic
+  fun reportWebSocketMessageSent(requestId: String, message: String) {
+    if (isDebuggingEnabled()) {
+      reportWebSocketMessageSentImpl(requestId, message, false)
+    }
+  }
+
+  /**
+   * Report a binary WebSocket message sent over an open connection.
+   *
+   * Corresponds to `Network.webSocketFrameSent` in CDP.
+   */
+  @JvmStatic
+  fun reportWebSocketMessageSent(requestId: String, message: ByteString) {
+    // Guard call to CDP-only reporting method (avoid base64 encoding)
+    if (isDebuggingEnabled()) {
+      reportWebSocketMessageSentImpl(requestId, message.base64(), true)
+    }
+  }
+
+  @JvmStatic
+  external fun reportWebSocketMessageSentImpl(
+      requestId: String,
+      payloadData: String,
+      isBinary: Boolean,
+  )
+
+  /**
+   * Report a text WebSocket message received over an open connection.
+   *
+   * Corresponds to `Network.webSocketFrameReceived` in CDP.
+   */
+  @JvmStatic
+  fun reportWebSocketMessageReceived(requestId: String, message: String) {
+    if (isDebuggingEnabled()) {
+      reportWebSocketMessageReceivedImpl(requestId, message, false)
+    }
+  }
+
+  /**
+   * Report a binary WebSocket message received over an open connection.
+   *
+   * Corresponds to `Network.webSocketFrameReceived` in CDP.
+   */
+  @JvmStatic
+  fun reportWebSocketMessageReceived(requestId: String, message: ByteString) {
+    // Guard call to CDP-only reporting method (avoid base64 encoding)
+    if (isDebuggingEnabled()) {
+      reportWebSocketMessageReceivedImpl(requestId, message.base64(), true)
+    }
+  }
+
+  @JvmStatic
+  external fun reportWebSocketMessageReceivedImpl(
+      requestId: String,
+      payloadData: String,
+      isBinary: Boolean,
+  )
+
+  /**
+   * Report that a WebSocket connection was closed, whether cleanly or due to an error.
+   *
+   * Corresponds to `Network.webSocketClosed` in CDP.
+   */
+  @JvmStatic external fun reportWebSocketClosed(requestId: String)
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.kt

@@ -19,14 +19,18 @@ import com.facebook.react.bridge.ReadableType
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.bridge.buildReadableMap
 import com.facebook.react.common.ReactConstants
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.modules.network.CustomClientBuilder
 import com.facebook.react.modules.network.ForwardingCookieHandler
+import com.facebook.react.modules.network.InspectorNetworkReporter
+import com.facebook.react.modules.network.NetworkEventUtil
 import com.facebook.react.modules.network.OkHttpClientProvider
 import java.io.IOException
 import java.net.URI
 import java.net.URISyntaxException
 import java.util.HashMap
+import java.util.UUID
 import java.util.concurrent.ConcurrentHashMap
 import java.util.concurrent.TimeUnit
 import okhttp3.CookieJar
@@ -51,12 +55,31 @@ public class WebSocketModule(context: ReactApplicationContext) :
   private val contentHandlers: MutableMap<Int, ContentHandler> = ConcurrentHashMap()
   private val cookieHandler: ForwardingCookieHandler = ForwardingCookieHandler()
 
+  /** CDP request IDs used to report each connection's events to the modern debugger server. */
+  private val inspectorRequestIds: MutableMap<Int, String> = ConcurrentHashMap()
+
   override fun invalidate() {
     for (socket in webSocketConnections.values) {
       socket.close(1_001 /* endpoint is going away */, null)
     }
     webSocketConnections.clear()
     contentHandlers.clear()
+    inspectorRequestIds.clear()
+  }
+
+  /** Whether WebSocket events should be reported to the modern debugger server. */
+  private fun isInspectorNetworkReportingEnabled(): Boolean =
+      ReactNativeFeatureFlags.enableNetworkEventReporting() &&
+          ReactNativeFeatureFlags.fuseboxWebSocketEventsEnabled()
+
+  /**
+   * Run [block] with the connection's CDP request ID, when WebSocket event reporting to the modern
+   * debugger server is enabled.
+   */
+  private inline fun reportToInspector(id: Int, block: (requestId: String) -> Unit) {
+    if (isInspectorNetworkReportingEnabled()) {
+      inspectorRequestIds[id]?.let(block)
+    }
   }
 
   private fun sendEvent(eventName: String, params: ReadableMap) {
@@ -142,11 +165,30 @@ public class WebSocketModule(context: ReactApplicationContext) :
       }
     }
 
+    val request = builder.build()
+
+    if (isInspectorNetworkReportingEnabled()) {
+      val requestId = UUID.randomUUID().toString()
+      inspectorRequestIds[id] = requestId
+      InspectorNetworkReporter.reportWebSocketCreated(requestId, url)
+      InspectorNetworkReporter.reportWebSocketWillSendHandshakeRequest(
+          requestId,
+          NetworkEventUtil.okHttpHeadersToMap(request.headers()),
+      )
+    }
+
     client.newWebSocket(
-        builder.build(),
+        request,
         object : WebSocketListener() {
           override fun onOpen(webSocket: WebSocket, response: Response) {
             webSocketConnections[id] = webSocket
+            reportToInspector(id) { requestId ->
+              InspectorNetworkReporter.reportWebSocketHandshakeResponseReceived(
+                  requestId,
+                  response.code(),
+                  NetworkEventUtil.okHttpHeadersToMap(response.headers()),
+              )
+            }
             val params = buildReadableMap {
               put("id", id)
               put("protocol", response.header("Sec-WebSocket-Protocol", ""))
@@ -159,6 +201,10 @@ public class WebSocketModule(context: ReactApplicationContext) :
           }
 
           override fun onClosed(webSocket: WebSocket, code: Int, reason: String) {
+            reportToInspector(id) { requestId ->
+              InspectorNetworkReporter.reportWebSocketClosed(requestId)
+            }
+            inspectorRequestIds.remove(id)
             val params = buildReadableMap {
               put("id", id)
               put("code", code)
@@ -168,10 +214,17 @@ public class WebSocketModule(context: ReactApplicationContext) :
           }
 
           override fun onFailure(webSocket: WebSocket, t: Throwable, response: Response?) {
+            reportToInspector(id) { requestId ->
+              InspectorNetworkReporter.reportWebSocketClosed(requestId)
+            }
+            inspectorRequestIds.remove(id)
             notifyWebSocketFailed(id, t.message)
           }
 
           override fun onMessage(webSocket: WebSocket, text: String) {
+            reportToInspector(id) { requestId ->
+              InspectorNetworkReporter.reportWebSocketMessageReceived(requestId, text)
+            }
             val params = Arguments.createMap()
             params.putInt("id", id)
             params.putString("type", "text")
@@ -186,6 +239,9 @@ public class WebSocketModule(context: ReactApplicationContext) :
           }
 
           override fun onMessage(webSocket: WebSocket, bytes: ByteString) {
+            reportToInspector(id) { requestId ->
+              InspectorNetworkReporter.reportWebSocketMessageReceived(requestId, bytes)
+            }
             val params = Arguments.createMap()
             params.putInt("id", id)
             params.putString("type", "binary")
@@ -240,9 +296,13 @@ public class WebSocketModule(context: ReactApplicationContext) :
       sendEvent("websocketClosed", params)
       webSocketConnections.remove(id)
       contentHandlers.remove(id)
+      inspectorRequestIds.remove(id)
       return
     }
     try {
+      reportToInspector(id) { requestId ->
+        InspectorNetworkReporter.reportWebSocketMessageSent(requestId, message)
+      }
       client.send(message)
     } catch (e: Exception) {
       notifyWebSocketFailed(id, e.message)
@@ -267,10 +327,14 @@ public class WebSocketModule(context: ReactApplicationContext) :
       sendEvent("websocketClosed", params)
       webSocketConnections.remove(id)
       contentHandlers.remove(id)
+      inspectorRequestIds.remove(id)
       return
     }
     try {
       val decodedString = checkNotNull(ByteString.decodeBase64(base64String)) { "bytes == null" }
+      reportToInspector(id) { requestId ->
+        InspectorNetworkReporter.reportWebSocketMessageSent(requestId, decodedString)
+      }
       client.send(decodedString)
     } catch (e: Exception) {
       notifyWebSocketFailed(id, e.message)
@@ -294,9 +358,13 @@ public class WebSocketModule(context: ReactApplicationContext) :
       sendEvent("websocketClosed", params)
       webSocketConnections.remove(id)
       contentHandlers.remove(id)
+      inspectorRequestIds.remove(id)
       return
     }
     try {
+      reportToInspector(id) { requestId ->
+        InspectorNetworkReporter.reportWebSocketMessageSent(requestId, byteString)
+      }
       client.send(byteString)
     } catch (e: Exception) {
       notifyWebSocketFailed(id, e.message)
@@ -321,6 +389,7 @@ public class WebSocketModule(context: ReactApplicationContext) :
       sendEvent("websocketClosed", params)
       webSocketConnections.remove(id)
       contentHandlers.remove(id)
+      inspectorRequestIds.remove(id)
       return
     }
     try {

packages/react-native/ReactAndroid/src/main/jni/react/devsupport/JInspectorNetworkReporter.cpp

@@ -178,6 +178,60 @@ JInspectorNetworkReporter::maybeStoreResponseBodyIncrementalImpl(
 #endif
 }
 
+/* static */ void JInspectorNetworkReporter::reportWebSocketCreated(
+    jni::alias_ref<jclass> /*unused*/,
+    jni::alias_ref<jstring> requestId,
+    jni::alias_ref<jstring> url) {
+  NetworkReporter::getInstance().reportWebSocketCreated(
+      requestId->toStdString(), url->toStdString());
+}
+
+/* static */ void
+JInspectorNetworkReporter::reportWebSocketWillSendHandshakeRequest(
+    jni::alias_ref<jclass> /*unused*/,
+    jni::alias_ref<jstring> requestId,
+    jni::alias_ref<jni::JMap<jstring, jstring>> headers) {
+  NetworkReporter::getInstance().reportWebSocketWillSendHandshakeRequest(
+      requestId->toStdString(), convertJavaMapToHeaders(headers));
+}
+
+/* static */ void
+JInspectorNetworkReporter::reportWebSocketHandshakeResponseReceived(
+    jni::alias_ref<jclass> /*unused*/,
+    jni::alias_ref<jstring> requestId,
+    jint statusCode,
+    jni::alias_ref<jni::JMap<jstring, jstring>> headers) {
+  NetworkReporter::getInstance().reportWebSocketHandshakeResponseReceived(
+      requestId->toStdString(),
+      static_cast<uint16_t>(statusCode),
+      convertJavaMapToHeaders(headers));
+}
+
+/* static */ void JInspectorNetworkReporter::reportWebSocketMessageSentImpl(
+    jni::alias_ref<jclass> /*unused*/,
+    jni::alias_ref<jstring> requestId,
+    jni::alias_ref<jstring> payloadData,
+    jboolean isBinary) {
+  NetworkReporter::getInstance().reportWebSocketMessageSent(
+      requestId->toStdString(), payloadData->toStdString(), isBinary != 0u);
+}
+
+/* static */ void JInspectorNetworkReporter::reportWebSocketMessageReceivedImpl(
+    jni::alias_ref<jclass> /*unused*/,
+    jni::alias_ref<jstring> requestId,
+    jni::alias_ref<jstring> payloadData,
+    jboolean isBinary) {
+  NetworkReporter::getInstance().reportWebSocketMessageReceived(
+      requestId->toStdString(), payloadData->toStdString(), isBinary != 0u);
+}
+
+/* static */ void JInspectorNetworkReporter::reportWebSocketClosed(
+    jni::alias_ref<jclass> /*unused*/,
+    jni::alias_ref<jstring> requestId) {
+  NetworkReporter::getInstance().reportWebSocketClosed(
+      requestId->toStdString());
+}
+
 /* static */ void JInspectorNetworkReporter::registerNatives() {
   javaClassLocal()->registerNatives({
       makeNativeMethod(
@@ -204,6 +258,24 @@ JInspectorNetworkReporter::maybeStoreResponseBodyIncrementalImpl(
       makeNativeMethod(
           "maybeStoreResponseBodyIncrementalImpl",
           JInspectorNetworkReporter::maybeStoreResponseBodyIncrementalImpl),
+      makeNativeMethod(
+          "reportWebSocketCreated",
+          JInspectorNetworkReporter::reportWebSocketCreated),
+      makeNativeMethod(
+          "reportWebSocketWillSendHandshakeRequest",
+          JInspectorNetworkReporter::reportWebSocketWillSendHandshakeRequest),
+      makeNativeMethod(
+          "reportWebSocketHandshakeResponseReceived",
+          JInspectorNetworkReporter::reportWebSocketHandshakeResponseReceived),
+      makeNativeMethod(
+          "reportWebSocketMessageSentImpl",
+          JInspectorNetworkReporter::reportWebSocketMessageSentImpl),
+      makeNativeMethod(
+          "reportWebSocketMessageReceivedImpl",
+          JInspectorNetworkReporter::reportWebSocketMessageReceivedImpl),
+      makeNativeMethod(
+          "reportWebSocketClosed",
+          JInspectorNetworkReporter::reportWebSocketClosed),
   });
 }