How Xianyu Monitors Flutter Performance for Hundreds of Millions of Users

Background

Xianyu's Flutter client serves over a hundred million users, making performance and stability critical for user experience. The team needed a systematic way to monitor Flutter performance in production and use the data to drive UX improvements.

Goals

The monitoring solution focuses on three key indicators:

Page scroll smoothness (FPS)

Page load time (first‑screen + time to interactive)

Exception rate

These metrics become the quantitative standards for Flutter UI quality.

Frame‑Rate Monitoring

Traditional native FPS detection (Android Choreographer, iOS CADisplayLink) cannot be applied directly to Flutter because Flutter renders on separate UI and GPU task runners. Instead, the team uses the Flutter Performance Overlay to observe frame timing and implements a custom listener on handleBeginFrame() and handleDrawFrame() to calculate FPS in production.

handleBeginFrame: Called by the engine to prepare the framework to produce a new frame.

handleDrawFrame: Called by the engine to produce a new frame.

The interval between these callbacks yields the UI‑task‑runner FPS, which reflects CPU‑side rendering delays. GPU timing would require engine modification, but most real‑world stalls are CPU‑bound, so this approach is sufficient.

Page Load Timing

For native pages, Xianyu's high‑availability system measures load time by checking component coverage (horizontal > 60 %, vertical > 80 %) and a main‑thread heartbeat. The same principle is adapted for Flutter: the start point is the route transition, and the end point is either the coverage condition or the last frame before interaction when the page is sparse.

Exception Rate

Flutter exceptions can halt subsequent logic, causing UI bugs or white screens. The team defines the exception rate as:

FlutterExceptionRate = (Number of filtered exceptions) / (Flutter page PV)

Implementation uses FlutterError.onError to capture framework‑level errors, reports them via a custom zone, and filters out harmless exceptions via a whitelist.

Future<Null> main() async {

FlutterError.onError = (FlutterErrorDetails details) async {

Zone.current.handleUncaughtError(details.exception, details.stack);

};

runZoned(() async {

runApp(new HomeApp());

}, onError: (error, stackTrace) async {

await _reportError(error, stackTrace);

});

Results and Observations

In release mode, Flutter maintains an average FPS above 50 on iOS and slightly lower on Android, indicating acceptable smoothness. However, average FPS can mask short stalls; therefore, the team also tracks frame‑drop ranges, stall seconds, and scroll duration to get a fuller picture.

Load‑time measurements show that AOT‑compiled release builds load faster than JIT‑based debug builds, and Flutter’s overall load time outperforms the legacy Weex solution.

Exception monitoring now surfaces critical crashes early, providing stack traces for rapid debugging while filtering out noise.

Conclusion

The monitoring framework delivers concrete, numeric standards for Flutter performance—covering scroll smoothness, load latency, and stability—enabling data‑driven UX upgrades across Xianyu’s fully Flutter‑based product detail and publishing pages.