字节 Flutter 高可用体系建设

1. 字节跳动 Flutter 高可用实践王凯字节跳动 - Flutter Infra

2.

3. • Flutter 高可用目标 • Flutter 异常治理和工具建设 • Flutter 性能优化和工具建设 • 展望

4. Flutter的现状媲美原生的性能快速支撑了广泛的业务发展 �

5. Flutter 的挑战部分场景的性能有欠缺，崩溃率有上升，同时，Flutter 平台工具不全面、经验案例较少 � Flutter 版小视频

6. 建设 Flutter 高可用体系的目标工具建设全流程高可用监控平台提供指标和归因能力引擎层优化改进稳定性和性能提供基础保障和底层优化业务层治理建设最佳实践案例实现人人可优化 �

7. • Flutter高可用目标 • Flutter异常治理和工具建设 • Flutter性能优化和工具建设 • 展望

8. FlutterApp 异常的分类原生崩溃 1. OOM 2. ANR 3.桥接的原生库问题 4.系统兼容问题功能异常 FlutterApp 的异常 1.黑/白屏 2. 输入框和软键盘问题 3. Webview 相关问题 Dart 异常 1.框架异常 2. 业务空异常 3. 其他各种异常

9. FlutterApp 的功能异常 - WebView异常现象：进入混合图层模式下的 WebView 页面时，页面的元素会有白色闪烁入口：系统 logcat 输出解决： https://github.com/flutter/engine/pull/24272

10. FlutterApp 的 Dart 异常异常采集异常聚合异常消费经验总结

11. Dart异常采集采集哪些可能有用的信息？案发现场重现路径环境信息异常堆栈操作轨迹设备信息堆内存业务埋点运行时信息系统日志

12. Dart异常采集采集哪些可能有用的信息？案发现场重现路径环境信息异常后果白屏 ? 异常堆栈路由历史设备信息堆内存业务埋点运行时信息连续异常系统日志

13. 案发现场：异常堆栈 Flutter.onError = xxx runZoneGuarded()

14. 重现路径(1)：路由历史 navigatorObservers : didPush() 匿名路由返回了空

15. 匿名路由怎么处理？ Navigator.of(context).push(new MaterialPageRoute(builder: (context)=> new MiddlePage())); 匿名路由的RouteSettings.name = null, 如果能把路由创建的位置注入，就可以作为标识

16. 匿名路由怎么处理？更改编译流程

17. 重现路径(1)：路由历史实现对匿名路由的覆盖

18. 重现路径(2)：业务埋点 Android 可以使用 mmap 写文件或直接 logcat, 崩溃时获取区间内容，Flutter 怎么做？

19. 重现路径(2)：业务埋点覆写 printHandler 实现了对业务日志的记录

20. 异常定级：是否导致白屏 Widget Build出错时，框架使用ErrorWidget替换

21. 异常定级：是否导致白屏替换 ErrorWidgetBuilder, 获取白屏标识，和堆栈关联

22. FlutterApp 的 Dart 异常异常采集异常聚合异常消费经验总结

23. 异常聚合异常代码行的包名、文件名、类名、方法名

24. FlutterApp 的 Dart 异常异常采集异常聚合异常消费经验总结

25. Dart 异常的消费及时触达责任人，异常自动分配提升解决问题效率

26. FlutterApp 的 Dart 异常异常采集异常聚合异常消费经验总结

27. 异常经验的沉淀可以看到同类异常的修复情况、处理人和分析文档供参考

28. Dart 异常监控小结  丰富现场信息：堆栈、业务日志等  平台提取了专门的白屏异常  通过异常自动分配提升分发效率  通过异常专家系统促进解决经验的复用

29. • Flutter 高可用建设目标 • Flutter 异常治理和工具建设 • Flutter 性能优化和工具建设 • 展望

30. FlutterApp 的性能监控监控什么？用户感知反馈 + 核心业务指标关联       启动监控 / 页面测速卡顿监控内存监控流量监控耗电监控 / CPU 监控存储监控

31. FlutterApp 的性能监控 Flutter增量监控哪些？       启动监控 / 页面测速卡顿监控内存监控流量监控耗电监控 / CPU 监控存储监控  引擎监控 / 页面测速  卡顿监控  channel 监控

32. FlutterApp的性能监控应该有哪些监控形式？全研发流程覆盖应用内 UME 桌面工具增强 devtools 聚合分析平台

33. 页面测速混合路由示意线上监控平台

34. 卡顿监控平均流畅度：FPS 大卡顿：7 帧丢帧率指标线下单点 : Timeline 线下防劣化 : 慢函数线上：慢消息归因工具

35. 卡顿指标FPS drawCount: 用户实际可见的有效帧数 frameCount: 预期绘制的帧数，在统计区间内应该绘制的帧数 draw퐶표 � 퐹� 值 = 60 ∗ 푓푟 푒퐶 표�

36. 卡顿指标 FPS  怎么获取 drawCount、frameCount ？  监听哪些场景？  怎么确定场景的开始和结束？  如何定义场景标识？

37. 计算 FPS - 获取 drawCount、frameCount frameCount drawCount

38. FPS 监控 – 监听哪些场景分为三类滑动转场动画

39. FPS 监控 – 滑动场景启停和名称滑动 FpsKey：该可滑动 Widget 的创建位置开始：ScrollStartNotification 的 dispatch 结束：ScrollEndNotification 的 dispatch

40. FPS监控 – 转场场景启停和名称转场 FpsKey： RouteSettings 中的 name 参数开始：Route 的 didPush 结束：didPush 中转场动画结束时 push install createAnimation didPush

41. FPS监控 – 动画场景启停和名称滑动时机：AnimationController 的监听 FpsKey：业务注入 AnimationController

42. FPS监控平台展示

43. 卡顿归因工具 Timeline: 单点，自动标识 build 耗时, 适合分析疑点，容易发现常见的无效 rebuild 慢函数: 可用于自动化测试，控制性能劣化慢消息: 线上可用

44. 线下使用timeline 下面的图暴露了哪些改进点？

45. Flutter列表卡顿优化 Android RecyclerView prefetch 优化前优化后

46. Flutter列表卡顿优化怎么判断空闲时刻？自定义 List

47. Flutter列表卡顿优化优化前优化后

48. 慢函数监控

49. 慢消息监控事件循环方案探索 1. Profiling Zone 方案 2. Message Loop 方案 3. Library Hook 方案

50. 慢消息监控（方案1） – Profiling Zone 方案最终未实际采用

51. 慢消息监控 – Profiling Zone方案 Demo：输出：最终未实际采用

52. 慢消息监控 – Profiling Zone 方案寻找闭包标识闭包内异常时输出

53. 慢消息监控 – Profiling Zone 方案寻找闭包标识原有的闭包 toString 异常时获取堆栈

54. 慢消息监控 – Profiling Zone 方案补充闭包标识输出： Dart “闭包套娃”问题会导致内部闭包信息无法获得原因：最终未实际采用

55. 慢消息监控（方案2） – MessageLoop 方案思路 1. Flutter的任务都是通过 MessageLoopImpl::FlushTask() 执行的 2. 通过监控线程上的 task 的执行时间，发现耗时消息最终未实际采用

56. 慢消息监控 – MessageLoop 方案优势 1. 逻辑简单不足 1. Dart_InvokeClosure, 无法知道 microtask 中到底在做什么 2. 监控覆盖率极高，兼顾 Dart & C++ 2. 一次 Dart_InvokeClosure 可能对应多个 microtask 最终未实际采用

57. 慢消息监控（方案3） – Library Hook 方案目标 1. 定位慢消息，得到消息执行耗时 2. 给出慢消息闭包的有效标识，能找到源码最终实际采用

58. 慢消息监控 Hook API

59. 慢消息监控闭包标识：名字和行号 _ExampleState.build.<anonymous closure>.<anonymous closure> (my_example/main.dart:74)

60. 慢消息监控效果监控数据问题代码

61. Flutter性能监控小结  在原生监控基础上增加了针对 Flutter 特性的监控  页面测速：覆盖了容器层和 Flutter 分阶段耗时  卡顿监控：实现了无侵入的精细到 Widget 级别的指标监控能力，归因手段上使用了「慢消息监控」作为线上环境的手段

62. • Flutter 高可用建设目标 • Flutter 异常治理和工具建设 • Flutter 性能优化和工具建设 • 展望

63. 展望 1. 平台工具仍然不完整，无法覆盖全流程 2. 工具平台逐步开源（UME）或开放（线上监控），服务更多 Flutter 开发者

64. Flutter 解决方案输出火山引擎移动研发平台 veMARS，欢迎体验

65.

66. 字节_Flutter_高可用体系建设扫描二维码提交议题反馈