Flipper: Question: Inspect websocket traffic

[mdoesburg]

Is there a way to inspect websocket traffic with the network plugin? I currently only see non websocket traffic.

[passy]

Which platform are you on? It would be great if you could use the template we have for future questions. :)

On Android, for instance, we install an interceptor with OkHttp. So if you use a separate library for websockets, it won't get intercepted.

[mdoesburg]

Which platform are you on? It would be great if you could use the template we have for future questions. :)

On Android, for instance, we install an interceptor with OkHttp. So if you use a separate library for websockets, it won't get intercepted.

Noted. I am building a React Native app (RN 0.62.0) with AWS Amplify / AWS AppSync on macOS Catalina. When running the app in both an iOS and Android simulator I don't see the websocket that AWS Amplify opens. I can see the websocket when I use the Inspector in the simulator dev menu, but I don't see the websocket in the Network plugin on Flipper. I do see regular requests on Flipper like POST and GET requests.

Within AWS Amplify I use DataStore which uses the @aws-amplify/pubsub package for websockets I think. Is there anyway to make the websocket connection show up on Flipper?

[passy]

Sorry, I'm not quite sure how the mechanism works behind the scenes, especially how JS in RN communicates with the device network stack. That would probably be a question for the React Native team.

[usrbowe]

Well, I think this is something which needs appropriate UI on Flipper side. Like we can't just put all messages from WS together with other requests (it would become very messy).

So something like Chrome DevTools do, where we list WebSocket connection and upon selecting we will have a list of messages from that specific web socket connection.

If I'm not mistaken, there is currently not a support for this in Flipper, right?

Did quick look on React Native:
The source code for WebSocket for iOS is here: https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTSRWebSocket.h

I guess the implementation should be in similar way as we currently inject into NSURL connections? https://github.com/facebook/flipper/blob/c611ae12f0934295252db0a76d4cd0417fb05a4e/iOS/Plugins/FlipperKitNetworkPlugin/SKIOSNetworkPlugin/FLEXNetworkLib/FLEXNetworkObserver.mm#L189

[sueLan]

If I'm not mistaken, there is currently not a support for this in Flipper, right?

I think it hasn't been supported yet. They only injected methods in URLSessionDelegate and URLSession. https://github.com/facebook/flipper/blob/c611ae12f0934295252db0a76d4cd0417fb05a4e/iOS/Plugins/FlipperKitNetworkPlugin/SKIOSNetworkPlugin/FLEXNetworkLib/FLEXNetworkObserver.mm#L194

But WebSocket in RN for iOS uses low-level API NSStreamDelegate https://github.com/facebook/react-native/blob/b020e7c440f58dabd4cc64b72869f3ae9680ef30/Libraries/WebSocket/RCTSRWebSocket.h#L51

[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.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.