Android Network Traffic Tracking and Monitoring
Article Summary
Ahmed Alnaami from AirAsia reveals how they solved a debugging nightmare: tracking network traffic across Native, React Native, and WebViews in one super app.
Debugging API failures across multiple tech stacks traditionally meant cables, coffee, and waiting for Gradle builds. Ahmed shares how AirAsia's super app team implemented Chucker, an OkHttp interceptor, to monitor all HTTP requests in real-time through notifications and local logging.
Key Takeaways
- Chucker logs all HTTP requests locally and shows traces via notifications
- Works across Native, React Native, Glide, and WebViews with custom helpers
- WebView support requires custom helper classes (not supported out of box)
- Filter requests by host, file extension, and control CORS preflight interception
- Debug-only implementation prevents production WebView issues
One interceptor solution can unify network debugging across your entire multi-platform mobile app without attaching a debugger.
About This Article
AirAsia's super app uses Native, React Native, PWA WebViews, and Glide image loading. Each one makes HTTP requests through different channels, which makes it hard to track and debug network traffic across all these tech stacks.
Ahmed Alnaami's team added Chucker as an OkHttp interceptor across all layers. They integrated ChuckerInterceptor into Native and Retrofit clients, added it to Glide's custom AppGlideModule, injected it via CustomNetworkModule for React Native, and built ChuckerWebViewHelper and SyncCookieHandler classes to capture WebView requests with host and file-extension filtering.
Engineers can now debug API failures without attaching debuggers, waiting for Gradle builds, or using USB cables. All HTTP requests log locally and show up as notifications. They can configure filters like interceptAllHosts, handleRequestsWithPayload, and interceptPreflight to cut down on noise and avoid issues in production WebViews.
