Specify how to support websocket traffic inspection

[chrisfillmore]

Happy new year everyone.

The topic of support for websocket traffic inspection has been brought up before: https://github.com/facebook/flipper/issues/960 https://github.com/facebook/flipper/issues/1119 https://github.com/facebook/react-native/issues/28518

I think this feature would be valuable to many users and a motivating reason to adopt Flipper. My use case is as follows: I have an Android app which uses opens several websocket connections: plain ws, GraphQL, ActionCable, SocketIO. I have already hacked together the changes required to report this traffic to NetworkFlipperPlugin, so in principle it seems straightforward to report this traffic, at least on Android.

It seems that for Flipper to support websocket traffic inspection, the following enhancements are required:

1. New plugin UI for Flipper desktop to display traffic
2. A new interface with methods to report websocket frame sent/received
3. Platform-specific implementations of flipper plugins that intercept and report traffic

The interface in (2) could look like:

// Kotlin
interface WebSocketReporter {
  fun webSocketFrameSent(frame: Frame)
  fun webSocketFrameReceived(frame: Frame)
}

The implementations for (3) are straightforward on Android. I have implementations for FlipperOkHttpWebSocketFactory and FlipperOkHttpWebSocketListener. I have been filing pull requests with client libs to allow users to inject their own OkHttp WebSocket.Factory. There is now support in Ktor, as of v1.5.0 (https://github.com/ktorio/ktor/pull/2035), and I have an open PR with this ActionCable client: https://github.com/vinted/actioncable-client-kotlin/pull/22. The SocketIO lib already supports this.

Implementations to report traffic on iOS/browsers would also need to be written.

This leaves (1), which I think is where support is needed from the Flipper devs. The community could only feasibly contribute to this feature if they knew how the websocket monitoring feature was supposed to look/behave. Some important questions:

• Should WS traffic be displayed in the same "Network" plugin as HTTP?
• Or, should there be separate, dedicated "WebSocket" panel, listing the connections?
• Or should it just look like Chrome DevTools, with a messages pane for frames sent/received?
• etc

This needs some specification.

There is also an interesting opportunity here for Flipper to support domain-specific traffic monitoring, or protocols built on top of websockets. Some websocket interfaces may be providing asynchronous transactions, e.g. where the client sends a frame which includes some domain-specific id, and the server will send a frame with the same id some time in the future. (The particular use case I have in mind is Janus, the transaction field.) Other protocols like ActionCable and SocketIO could also have dedicated plugins/reporting.

I would strongly urge anyone undertaking design work on Flipper to consider this kind of extensibility. If it were easy for users to write Flipper plugins for whatever custom websocket protocol they happen to use, I imagine it would be very useful.

So to wrap up, the ask for Flipper devs is: can we get some guidance/spec on how Flipper UI should display WS connections/frames? Also, any feedback on anything else in this post is very welcome! Thanks for reading.

[MahmonirB]

I have same issue.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[prohi]

Same problem here :(

[mweststrate]

We currently don't have any plans to implement websocket support in the near future ourselves. If anyone wants to work on it, feel free to, it'd be a super useful feature to have! There are a lot of useful pointers in the OP, and we can surely assist with integrating it into the Network plugin UI

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[aprilmintacpineda]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Booooo

[Matju-M]

basil-ws I have added a plugin for RN. Hopefully it'll help you out.

[realtril]

@Matju-M can i use it somehow with android?

[mmangion-ys]

@realtril It should work with android, since flipper supports both. But I haven't tested it yet.

[realtril]

@mmangion-ys

:(

[Matju-M]

And it works on ios right?

[hskyGhst]

@realtril tested version 0.2.5 against an app running on Android simulator Pixel_2_API_29 seems to be working fine.

Make sure that you install and bootstrap basil-ws-flipper in your application.

install: yarn add basil-ws-flipper add to RN bootstrap:

if (__DEV__) {
  require('basil-ws-flipper').wsDebugPlugin;
}

[mandrachek]

On Android, standard OkHttp interceptors do not handle websocket data. You have to have a WebSocketListener for that, which has to be attached at the point when the websocket is created.