40 | 衡量Flutter App线上质量，我们需要关注这三个指标
陈航
该思维导图由 AI 生成，仅供参考
你好，我是陈航。
在上一篇文章中，我与你分享了如何捕获 Flutter 应用的未处理异常。所谓异常，指的是 Dart 代码在运行时意外发生的错误事件。对于单一异常来说，我们可以使用 try-catch，或是 catchError 去处理；而如果我们想对异常进行集中的拦截治理，则需要使用 Zone，并结合 FlutterError 进行统一管理。异常一旦被抓取，我们就可以利用第三方数据上报服务（比如 Bugly），上报其上下文信息了。
这些线上异常的监控数据，对于开发者尽早发现线上隐患，确定问题根因至关重要。如果我们想进一步评估应用整体的稳定性的话，就需要把异常信息与页面的渲染关联起来。比如，页面渲染过程是否出现了异常，而导致功能不可用？
而对于以“丝般顺滑”著称的 Flutter 应用而言，页面渲染的性能同样需要我们重点关注。比如，界面渲染是否出现会掉帧卡顿现象，或者页面加载是否会出现性能问题导致耗时过长？这些问题，虽不至于让应用完全不能使用，但也很容易引起用户对应用质量的质疑，甚至是反感。
通过上面的分析，可以看到，衡量线上 Flutter 应用整体质量的指标，可以分为以下 3 类：
页面异常率；
页面帧率；
页面加载时长。
其中，页面异常率反应了页面的健康程度，页面帧率反应了视觉效果的顺滑程度，而页面加载时长则反应了整个渲染过程中点对点的延时情况。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了如何收集页面异常率、页面帧率和页面加载时长这三个指标，并强调了异常监控对于发现线上隐患和确定问题根因的重要性。页面异常率是页面渲染过程中出现异常的概率，页面帧率反映了视觉效果的顺滑程度，页面加载时长则反映了整个渲染过程中点对点的延时情况。作者提供了具体的代码示例，演示了异常发生次数和整体页面PV数的统计方法，以及页面异常率的计算方法。此外，文章还介绍了如何通过帧回调机制获取页面加载时长。通过本文，读者可以了解到如何采集这三项重要的质量指标，从而建立起Flutter应用的质量监控能力，及早发现线上隐患，提升用户体验。整体内容涵盖了Flutter应用性能监控的关键指标和相应的数据采集方式，为读者提供了实用的技术指导。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Flutter 核心技术与实战》，新⼈⾸单¥59
《Flutter 核心技术与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(10)
- 最新
- 精选
！_新起点
如果页面渲染依赖单个或多个网络接口回调，那么我们需要减去用单个或者多个接口请求后，成功或者失败后的最后的回调里加载时间的时长。作者回复: 页面加载时长=页面本地渲染时长+网络加载时长
2019-10-0323
和小胖老师，如果一个 App 只有一个继承 StatelessWidget 的页面，那么在不用原生配合的情况下如何得知页面退出了呢？NavigatorObserver 的 didPush 可以知道页面进入了，但是没有页面退出或者销毁的回调。作者回复: 如果你不是指的根widget退出，可以通过didPop回调；如果是根Widget的退出，那必须要通过原生配合了
2019-10-30
小米页面加载时长，一般超过多少毫秒算不正常呢？作者回复: 看具体业务了，一般TP90超过2秒就不正常
2019-10-26
find当升级到Flutter 1.12.x 之后，onReportTimings应该改成SchedulerBinding的addTimingsCallback,SchedulerBinding.instance.addTimingsCallback(_onReportTimings);2021-04-0734
(Jet)黄仲平老师好，在真实运用中这个帧率和界面异常率，是会设定一个阀值，当超出这个值的时候就上报。是吗？2022-01-111
小何return lastFrames.length/sum * 60; 这里写是写反了嘛 不应该是return sum * 60/lastFrames.length;嘛2021-07-221- find那个帧率是怎么打印出来的，什么时机打印，上报呢2021-04-07
IF-Processing两个问题： 1. 下面这段怎么保留的原始回调，没看懂。。保留引用就能保留原始回调了吗？这个调用是链式的？ void main() { runApp(MyApp()); //设置帧回调函数并保存原始帧回调函数 orginalCallback = window.onReportTimings; window.onReportTimings = onReportTimings;} 2.咱们统计出来这3个指标之后，通过什么手段上报呢？也使用类似bugly这种异常上报的机制吗？什么情况下使用，如何使用呢？2020-02-061
Fun请问计算FPS的时候为什么要乘602019-12-301
时光念你如果接口是when整合过的，取第二次的addPostFrameCallback时间作为Endtime。如果每个接口单独请求，取接口数量➕1的回调次数时间作为Endtime。2019-12-26
收起评论