Tackling Intermittent Android Bugs: Rolling Video Buffers and Automated Logcat Alignment in the Browser

Every mobile QA engineer and Android developer has experienced the nightmare scenario of testing a complex user flow, only for the app to freeze or crash without any clear indication of what went wrong. The only recourse is to hope that a screen recording was turned on, or that a terminal running adb logcat was open in the background, and that the issue can be reproduced on the next attempt.

However, even with constant monitoring, massive 45-minute video files and 200,000-line logcat dumps are left behind, making it nearly impossible to isolate and reproduce the issue.

In this article, we explore the engineering principles behind solving intermittent mobile bugs by implementing an in-browser rolling ring buffer that continuously captures screen video and streams logcat, automatically isolating the crash context the moment it occurs. The core architecture consists of two decoupled, continuous streams running in a sliding window, typically capturing the most recent 120-180 seconds of data.

The first stream is the Live Android Device, connected via WebUSB transport pipeline, which feeds the [Video Frame Stream] and [Raw Logcat Stream]. Both streams are then processed by the [Rolloing RingBuffer] and [Chrono Log Buffer] respectively. The rolling ring buffer, implemented using a circular buffer with $O(1)$ amortized memory allocation, manages video and log chunks, automatically overwriting expired slices to ensure continuous streaming.

The buffer class in TypeScript/JavaScript is provided, allowing for easy integration into mobile applications.

Upon detecting a crash or manual stop, the system slices the MP4 and logcat data based on timestamp alignment, resulting in a timestamp-aligned, sliced MP4 and log slice. This efficient, automated process allows for quick identification and resolution of intermittent mobile bugs, saving valuable time and resources for QA engineers and developers alike.