Promote fuseboxWebSocketEventsEnabled to canary#57544
Closed
huntie wants to merge 4 commits into
Closed
Conversation
Summary: **Motivation** React Native DevTools' Network panel records fetch, XHR, and Image traffic, but WebSocket connections are invisible — neither the core CDP backend nor any existing inspector integration implements the CDP `Network.webSocket*` events. TODO: **Goal (as of this diff)**: Parity with Expo's current WS event coverage. Network Initiator is added down the stack. **This diff** Adds first-party reporting for six of the seven WebSocket CDP events (`webSocketCreated`, `webSocketWillSendHandshakeRequest`, `webSocketHandshakeResponseReceived`, `webSocketFrameSent`, `webSocketFrameReceived`, `webSocketClosed`), following the layering of the existing HTTP pipeline: - `CdpNetwork` (jsinspector-modern/network): new WebSocket CDP types and event params with `folly::dynamic` serialization. - `NetworkHandler`: new `onWebSocket*` emitters, active only while the Network domain is enabled. - `NetworkReporter` (react/networking): new `reportWebSocket*` platform-facing methods, compiled to no-ops unless `REACT_NATIVE_DEBUGGER_ENABLED`. - iOS: new `RCTInspectorWebSocketReporter` wrapper in React-CoreModules, with call sites in `RCTWebSocketModule`. Each connection gets a UUID request ID (associated object on `SRWebSocket`); the real handshake response is read from `SRWebSocket.receivedHTTPHeaders`. React-CoreModules gains a dependency on React-networking (no cycle: React-networking's transitive closure never reaches React-CoreModules). - Reporting is gated behind a new `fuseboxWebSocketEventsEnabled` feature flag (experimentation, default false), checked alongside `enableNetworkEventReporting` and a connected debugger at the call-site wrapper. **Notes** `webSocketFrameError` is intentionally omitted for now. Android integration follows separately. Changelog: [Internal] Differential Revision: D111561998
Summary: **Context** Companion to the iOS implementation earlier in this stack: reports the same six `Network.webSocket*` CDP events through the shared `NetworkReporter` C++ core, gated behind the same `fuseboxWebSocketEventsEnabled` + `enableNetworkEventReporting` feature flags. **Changes** - `InspectorNetworkReporter` (Kotlin): six new JNI-backed `reportWebSocket*` methods. Binary message payloads take a `ByteString` overload that defers base64 encoding behind `isDebuggingEnabled()`, matching the existing `reportDataReceived` pattern. - `JInspectorNetworkReporter` (JNI): bridges the new methods to `NetworkReporter::reportWebSocket*`. - `WebSocketModule`: each connection gets a UUID CDP request ID. `connect()` reports `webSocketCreated` and the handshake request headers; `onOpen` reports the real handshake response (OkHttp `Response` code and headers); `send`/`sendBinary`/`onMessage` report frames; `onClosed`/`onFailure` report `webSocketClosed`. All call sites funnel through a private `reportToInspector` helper that checks both feature flags, per the `NetworkEventUtil` convention of gating at the call-site layer. Changelog: [Internal] Differential Revision: D111561994
Summary:
**Problem**
The request initiator for WebSocket connections never resolved in the React Native DevTools Network panel. `NetworkHandler::onWebSocketCreated` consumes a stored initiator stack keyed by request ID, but the native WebSocket modules minted their own UUIDs — never matching an ID created by `__NETWORK_REPORTER__.createDevToolsRequestId()`, which is the call that captures the JS stack. The fallback `{type: "script"}` initiator (no stack) was reported every time.
**Fix**
Mirror the HTTP pipeline's `unstable_devToolsRequestId` plumbing. `WebSocket.js` now creates the DevTools request ID at construction time — while the caller's frames are still on the stack — and passes it through a new optional `unstable_devToolsRequestId` connect option on `NativeWebSocketModule`. Both native modules prefer it as the connection's CDP request ID, falling back to a native UUID when absent (production builds, or debugger not attached).
Adds `testWebSocketCreatedWithInitiator`, asserting the initiator stack (function name, line number, source URL) resolves through `Network.webSocketCreated`.
Changelog: [Internal]
Differential Revision: D111561995
Summary: See rollout plan described on D111561998. Changelog: [General][Added] - **React Native DevTools**: Support for inspecting WebSocket events in the Network panel is added to the [`CANARY` channel](https://reactnative.dev/docs/releases/release-levels) Differential Revision: D111892214
meta-cla
Bot
added
the
CLA Signed
|
@huntie has exported this pull request. If you are a Meta employee, you can view the originating Diff in D111892214. |
|
This pull request has been merged in 713ae6b. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
See rollout plan described on D111561998.
Changelog:
[General][Added] - React Native DevTools: Support for inspecting WebSocket events in the Network panel is added to the
CANARYchannelDifferential Revision: D111892214