RUSLAN DAvletshin
Logging WebSocket messages in Scarlet with Flipper
How we added logging of WebSocket messages to the Scarlet Kotlin library in our projects and integrated these logs with Flipper. You can also use this article as an example of Flipper integration in case you have different WebSocket implementation.
Logging WebSocket messages in Scarlet with Flipper
WebSocket is a great way to stay up to date with a server for real-time apps like trading clients or chats.

In Android the general way to handle network requests is to use Retrofit and OkHttp libraries. This solution offers great debugging functionality by providing the interceptor mechanism that can be used to log requests in LogCat or to connect with more advanced debug tools like Flipper.

On the socket side there is the Scarlet library from Tinder that offers a Retrofit like interface to deal with socket connections. It has similar interfaces for requests and a similar builder that accepts OkHttpClient instances.

Scarlet library is very useful when working with sockets but it has one disadvantage: there is no logging mechanism for socket messages. Although you can add an OkHttp interceptor when building a Scarlet instance, that interceptor won't intercept socket messages. As we can see in the following issues [1][2] the problem still exists.

Manual logging

The first attempt of logging web socket messages was a manual addition of logging code to specific message streams. It is a working solution but it requires a lot of boilerplate code. So we continued to look for a more general approach.

General solution

As was proposed in this issue, we started from a custom MessageAdapter. But instead of implementing a custom MessageAdapter we decided to wrap existing adapters in order to reduce code duplication. We developed this idea and created LoggingMessageAdapterFactory— a factory that produces wrapped factories for regular instances of MessageAdapter.

Implementations of that factory vary depending on the build type. A suitable implementation can be provided with DI.

The first wrapping of MessageAdapter became TimberLoggingMessageAdapter that prints raw messages to LogCat. Its code is pretty straightforward.

Flipper integration

We already use Flipper for debugging regular network requests in our project so we decided to go further and integrate our solution with NetworkFlipperPlugin.

After some investigation of FlipperOkHttpInteceptor bundled with Flipper library we figured out that we can use NetworkReporter.RequestInfo and NetworkReporter.ResponseInfo to log socket messages.

Let's look a bit closer to fields of NetworkReporter's subclasses.

NetworkReporter.RequestInfo

  • requestId — unique identifier of request should be the same for RequestInfo and ResponseInfo of one message.
  • timeStamp — time of message.
  • method — string that should be displayed in the method column. We used SEND for outgoing messages and RECEIVEfor incoming ones.
  • headers — array of headers. We used only one header content-type: application/json so Flipper can auto-format message. You can replace it with one that matches your message format.
  • uri — url of request. Should be correct url. We used $baseUrl/$messageId to distinguish different messages.
Most fields of NetworkReporter.ResponseInfo are similar to NetworkReporter.RequestInfo so we have listed only the different ones.

  • statusCode — status code of request. We used 200 for all messages.
  • body — bytes array representing body. We used it to place message content.
As the result we've got following FlipperLogginMessageAdapter.

That creates the following report in Flipper network tab.

With this solution our performance in WebSocket related tasks has greatly improved and I hope it will help you too.
How to find us
+13029669257
+79160837954
[email protected]


...or just fill this form.
How to find us

+13029669257
+79160837954
[email protected]


...or just fill this form.