Flutter上的数据监控深入理解

前言

最近看公司Flutter项目的时候,发现想要分析数据非常的困难,不是数据缺失就是数据异常,作为一个成熟的企业来说这是非常危险的,缺少了数据就像船只在海上航行的时候没有了方向,将会变得无所适从,所以这周花了点时间去优化。

我们要关注什么数据
对于Flutter这样的组件来说,我们需要关注的数据无非是两项:

  • 性能数据
  • 异常数据

这两项数据是我们监控整个Flutter应用是否优秀的最基础也是最重要的指标。性能数据能够帮我们分析出Flutter对比Native,RN,Weex等框架是否有优势,而异常数据则是反应了项目的健康程度,很多时候在项目开发和测试的过程中问题没有暴露,而是在线上才会有问题,如果没有异常监控,应用就很难具备从错误中快速恢复的能力。

性能数据

对于性能数据,我们可以拆分成以下两个点:

  • 渲染时长
  • 页面帧率

对于页面帧率,目前我还没有什么仔细思考过,这一块的内容我会放在之后的文章中介绍。

对于渲染时长,我们可以通过Flutter给出的系统回调在监控页面第一帧的渲染时间。Android为以下方法:

getFlutterView().addFirstFrameListener(new FlutterView.FirstFrameListener() {
 @Override
 public void onFirstFrame() {
  //第一帧渲染回调
 }
});

iOS也差不多,具体大家可以参考网上的例子。

异常数据

对于异常数据,我们可以拆分成以下几个点:

  • 页面的打开次数
  • 页面发生异常的次数
  • Framework的异常次数
  • crash次数

统计页面的打开次数是为了让我们更好的观测整个大盘的数据,并且以它作为分母,得出我们整个Flutter项目的渲染成功率,这是很重要的一个指标。

但是我们想一想,在Flutter中使用navigator打开一个页面,如果我们不做任何处理的话,是无法感知到一个Flutter页面被打开了的,所以我们需要通过注册nevigator的observer去监听页面的打开与关闭:

Widget build(BuildContext context) {
 return new MaterialApp(
 navigatorObservers: [new MyNavigatorObserver()],
 home: new Scaffold(
  body: new MyPage(),
 ),
 );
}

在MyNavigatorObserver中通过didPush方法去上报页面打开的埋点。

有了页面的打开数据之后,我们接下去需要统计的是异常的发生次数,而在Flutter中异常可以大致分为三类:

  1. Dart异常
  2. Framework异常
  3. crash

对于Dart异常,我们可以通过全局的onError函数去捕获:

runZoned<Future<Null>>(() async {
runApp(new MyApp());
}, onError-: (error, stackTrace) async {
 //监听DartError
});

但是这里的回调是只要有Dart层的error就会触发,这样就带来一个问题:许多不影响用户体验,无关紧要的error都会被我们统计到,从而影响我们数据的准确性。针对于上面这个问题,我的想法是既然要统计的是影响用户的error,那我们可以借助Flutter本身的特性,我们知道Flutter在build期间发生了异常会展示一个红屏的widget,这个widget是ErrorWidget,我们只需要hook这个widget的生成,在该widget展示的时候上报我们需要的埋点就可以了:

ErrorWidget.builder = (FlutterErrorDetails flutterErrorDetails) {
 //统计Dart error
 return ErrorWidget(flutterErrorDetails.exception);
};

甚至我们还可以在这里重写这个ErrorWidget,去展示我们自定义的错误页。

说完了Dart异常,我们接着去处理Framework异常。这个异常比较特殊,应该是Android独有的,因为在Android中我们需要加载动态库去完成Flutter的初始化,所以这里我们可以捕获动态库的加载,如果有异常发生或者加载失败,则算作为Framework层异常。

最后一个则是运行时的crash,对于这部分异常,我们需要做的就是进行堆栈的捕获,并且判断是否是Flutter引起的crash,如果是则上报埋点。

总结

通过上面的几个数据统计,我们可以计算出Flutter应用的以下几个数据:

  • 页面渲染时间
  • 页面帧率
  • 页面打开次数
  • 页面异常率
  • 页面崩溃率

有了以上的几个数据,我们就可以根据它们来进行业务上的优化,做到百尺竿头更进一步。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Flutter持久化存储之数据库存储(sqflite)详解

    前言 数据库存储是我们常用的存储方式之一,对大批量数据有增.删.改.查操作需求时,我们就会想到使用数据库,Flutter中提供了一个sqflite插件供我们用于大量数据执行CRUD操作.本篇我们就来一起学习sqflite的使用. sqflite是一款轻量级的关系型数据库,类似SQLite. 在Flutter平台我们使用sqflite库来同时支持Android 和iOS. sqflite使用 引入插件 在pubspec.yaml文件中添加path_provider插件,最新版本为1.0.0,如下:

  • Flutter上的数据监控深入理解

    前言 最近看公司Flutter项目的时候,发现想要分析数据非常的困难,不是数据缺失就是数据异常,作为一个成熟的企业来说这是非常危险的,缺少了数据就像船只在海上航行的时候没有了方向,将会变得无所适从,所以这周花了点时间去优化. 我们要关注什么数据 对于Flutter这样的组件来说,我们需要关注的数据无非是两项: 性能数据 异常数据 这两项数据是我们监控整个Flutter应用是否优秀的最基础也是最重要的指标.性能数据能够帮我们分析出Flutter对比Native,RN,Weex等框架是否有优势,而异

  • Flutter如何保证数据操作原子性详解

    目录 前言 Flutter单例模式 问题示例 解决办法 Flutter任务队列 问题示例 解决办法 总结 前言 Flutter 是单线程架构,按道理理说,Flutter 不会出现 Java 的多线程相关的问题. 但在我使用 Flutter 过程中,却发现 Flutter 依然会存在数据操作原子性的问题. 其实 Flutter 中存在多线程的(Isolate 隔离池),只是 Flutter 中的多线程更像 Java 中的多进程,因为 Flutter 中线程不能像 Java 一样,可以两个线程去操作

  • FormData+Ajax实现上传进度监控

    什么是FormData? FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同: 如何创建一个FormData对象 你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样: //实例化一个formData对象 var

  • Python 多进程和数据传递的理解

    Python 多进程和数据传递的理解 python不仅线程用的是系统原生线程,进程也是用的原生进程 进程的用法和线程大同小异 import multiprocessing p = multiprocessing.Process(target=fun,args=()) 线程的基本方法在进程中都能够使用 但是进程和线程中有一个明显的区别:可以实现多核的运用 python本身会启动一个主进程,并且拥有一个主线程把主进程看做一家之主,那主线程也是他本身,其他线程就相当于老婆们 而进程,长大了的儿子们,线

  • Zabbix 上Windows性能监控的方法

    背景信息 最近在重新看一些关于windows 性能的书籍,对于我这样一个原来使用SCOM监控的懒人来说,Zabbix 上自带的windows OS template 的模板实在是不够用,因为之前SCOM监控包(微软出的,把所有工作都做了,我只需要按需启用规则和告警即可). 默认的Zabbix 性能数据只有Avg Latency,平均的数据也不准,想看下磁盘的Latency以及IOPS要自己动手,看了下zabbix 中windows performance Counter 的语法,我略有退缩了.全

  • Zabbix对Kafka topic积压数据监控的解决方案

    目录 Kafka 需求 解决方案 1.监控分析 2.监控思路 (1) 消费者组管理 (2)分区自动发现 (3)获取监控项“test-group/test/分区X”的Lag (4)最终脚本 3.Zabbix 自动发现配置 4.告警信息 Kafka Apache Kafka是一个分布式发布-订阅消息系统和一个强大的队列,可以处理大量的数据,并使您能够将消息从一个端点传递到另一个端点. Kafka适合离线和在线消息消费. Kafka消息保留在磁盘上,并在群集内复制以防止数据丢失.Kafka构建在Zoo

  • Android进阶Handler应用线上卡顿监控详解

    目录 引言 1 Handler消息机制 1.1 方案确认 1.2 Looper源码 1.3 Blockcanary原理分析 1.4 Handler监控的缺陷 2 字节码插桩实现方法耗时监控 2.1 字节码插桩流程 2.2 引入ASM实现字节码插桩 2.3 Blockcanary的优化策略 引言 在上一篇文章中# Android进阶宝典 -- KOOM线上APM监控最全剖析,我详细介绍了对于线上App内存监控的方案策略,其实除了内存指标之外,经常有用户反馈卡顿问题,其实这种问题是最难定位的,因为不

  • 使用HttpWebRequest向网站模拟上传数据

    最近有个朋友离开IT行业二年的朋友说要实现用程序向某个网站的页面上传数据,他是意思是每天有几十条数据要在网站页面上填写,很烦,最好用程序来写.网站页面是用POST传递的,同时没有验证码之类的东东,只有一点限制就是5分种内不能填写二次记录.这一切都好办. using System.Web;using System.Net;using System.Text;using System.IO; //创建对某个网站页面的请求 HttpWebRequest  myRequest = (HttpWebReq

  • php实现批量上传数据到数据库(.csv格式)的案例

    友情提示:上传数据的文档需要转化为.csv格式的文档 前端代码: <form name="importForm" action="import.php" method="POST" enctype="multipart/form-data"> <input type="hidden" value="import_goods" name="file"&

  • Android 提交或者上传数据时的dialog弹框动画效果

    效果图如下所示: 类似这种弹框里含有动画,一般我们在上传数据或者支付的时候会用到,当然,假如我们换几张图片,还可以把它当做是加载数据的时候使用,总之这是一个dialog弹框,只不过这个弹框在弹出后,上面有动画的运行. 上代码 首先是布局文件 : <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="200dp" andr

随机推荐