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. WebViewClient
not provided
2. WebViewClient
provided
Notice that we’ve wrapped all the implementation with a flag isChuckerWebViewHelperEnabled
because 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
, PUT
are 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.