Track your Android App Network Traffic

While developing any app making API calls is common, but sometimes servers might fail us, or we might fail them ! 🤷

And when that happens it’s time to open your laptop 💻 then get a USB cable 🔌 then make some coffee ☕️ while waiting for Gradle to build the app, then attach the debugger, finally try to follow the steps to catch the API error !

Or use Chucker !

In airasia super app we use multiple technologies such as Native, ReactNative , PWA (WebViews) and all of them make Http requests which made it hard for us to track the network traffic and debug our flows until we implemented the following steps for each tech stack

What is Chucker

It’s an OkHttp Interceptor that you can add to your OkHttp client, it will log all the http requests in a local data base and will show the trace in notifications

Setup

The setup is easy and you can check full configurations here

dependencies {
  debugImplementation "com.github.chuckerteam.chucker:library:<version>"
  releaseImplementation "com.github.chuckerteam.chucker:library-no-op:<versoin>"
// optional for WebViews intreceptor
  implementation "com.squareup.okhttp3:okhttp-urlconnection:<version>"
}

Now we should be able to use the library , we have multiple use cases to cover all the network traffic in an app

Chucker with Native

Wither you’re using OkHttp alone or with retrofit

val client = OkHttpClient.Builder()
                .addInterceptor(ChuckerInterceptor(context))
                .build()

Chucker with Glide

glide allow us to add custom logic to its internal loaders

@GlideModule
class MyGlideModule : AppGlideModule() {
    override fun registerComponents(context: Context, glide: Glide, registry: Registry) {
        val builder = OkHttpClient.Builder()
        builder.addInterceptor(ChuckerInterceptor(context))
        val factory = OkHttpUrlLoader.Factory(builder.build())
        registry.replace(GlideUrl::class.java, InputStream::class.java, factory)
    }
}

Chucker with ReactNative

React native uses OkHttp internally for api requests so we can easily integrate chucker with it,

First create a network module that basically will take the default react native OkHttp client and add chucker to it

internal class CustomNetworkModule(val context: Context) : OkHttpClientFactory {
    override fun createNewNetworkModuleClient(): OkHttpClient {
        val builder = OkHttpClientProvider.createClientBuilder()
        builder.addInterceptor(ChuckerInterceptor(context))
        return builder.build()
    }
}

then call this at your application onCreate or at your splash screen

OkHttpClientProvider.setOkHttpClientFactory(CustomNetworkModule(context))

Chucker with WebViews

Chucker does not support webviews out of the box so we need a helper to be able to capture all requests inside WebViews .

Add the following classes

• ChuckerWebViewHelper.kt

• SyncCookieHandler.kt

Now you can use this helper with your WebView , there are two ways to use it

1. WebViewClientnot provided

2. WebViewClient provided

Notice that we’ve wrapped all the implementation with a flag isChuckerWebViewHelperEnabledbecause in production we don’t want to interrupt WebView original request handling causing unexpected issues

The helper offers multiple configurations

.enable(true)

to enable or disable the helper, you might want to control this remotly

.addWebViewClient(webView)

use it only if your not gonna provide your own webView client

.handleRequestsWithPayload(true)

requests like POST , PATCH, PUTare experimental in the helper , so if you faced any issues you can skip them

.addInterceptHost("example.com", "*.website.com")

by default the helper will not intercept all requests since websites usually use a lot of third party end points , so you can filter your websites ,
and it supports wild card *

.interceptAllHosts(true)

to intercept all hosts ignoring previous configuration

.addInterceptFileExtension("json", "jpg")

webViews fetch lots of css files and images and other resources that we might dont need to intercept , use this function to filter them

.interceptAllFileExtension(false)

will ignore previous configuration and intercept all files (might cause spamming)

.interceptPreflight(false)

WebViews implement CORS for security so before each API request from java script there will be an OPTION request first , usually you don’t need to debug those so keep the flag off

.setListener()

to track and log any issues with the helper

The reason we need a helper is WebView don’t have a full requests interceptor, you can check issue here

That is it ! , this should cover most of the network traffic in an application,
So the aim is to use OkHttp and chucker will do it’s magic.

References

• https://medium.com/@madmuc/intercept-all-network-traffic-in-webkit-on-android-9c56c9262c85