阅读 530

Flutter无痕埋点

Flutter无痕埋点

由于工作调整的原因,后面可能将不再接触flutter开发,本着技术共享不埋没的原则,开源一下flutter无痕埋点的技术方案,此方案完成于半年前,应该在闲鱼的无痕埋点方案开源前,与闲鱼的方案不太一样,大家有什么建议可以广泛留言。另外特别感谢永葵同学在此技术中的参与和共同努力。

思考

  • 既然是无痕埋点,Flutter如何实现AOP?像iOS,可以在运行时通过一些方法交换,消息转发来实现切面,但是由于目前Flutter不支持运行时的反射功能,所以第一时间放弃了这个方向。另外由于当时时间和资源上也不是很充足,也没有研究编译期的AOP方案,不过之后闲鱼出品的AspectD确实是个不错的AOP框架。切回正题,所以当时的选择时阅读Flutter的源码,试图寻找官方的API来解决问题。

Flutter如何遍历widget

  • 众所周知,在flutter中有widget树和element树,两者成一一对应的关系,那么想要遍历widget树,其实也就是遍历element树,在阅读源码的过程中发现framework.dart这个文件下一个visitChildElements(ElementVisitor visitor)的方法,也就是说,通过这个方法,我们可以遍历指定element下所有的elements,然后通过element拿到他所对应的widget。

页面埋点

导航栏监听

  • 要想做页面埋点,第一个想到的就是通过监听导航栏页面的变动,就可以监听到页面的变化。通过NavigatorObserver确实就可以监听到页面的push和pop,但是官方的这个类提供的方法并不能拿到具体跳转页面的信息(静态页面除外)。那么是不是可以当监听到页面push和pop时,直接遍历element树拿到widget信息呢?实践证明,当监听到push的同时去遍历会报错,因为这个时候页面还正在渲染,flutter的元素正在生成,所以遍历会有问题。所以需要监听页面的渲染完成的时机。

页面渲染监听

  • 如何做页面渲染的监听呢?我们可以看一下Flutter的启动函数
void runApp(Widget app) {
 WidgetsFlutterBinding.ensureInitialized()
   ..attachRootWidget(app)
   ..scheduleWarmUpFrame();
}
复制代码

然后我们再观察下WidgetsFlutterBinding这个类,

class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding 
复制代码

在这个类里做了非常多的绑定,渲染的绑定,手势的绑定等等。 SchedulerBinding这是一个调度器,调度任务的安排。 在SchedulerBinding中有一个控制渲染的方法

    void handleDrawFrame() {
   assert(_schedulerPhase == SchedulerPhase.midFrameMicrotasks);
   Timeline.finishSync(); // end the "Animate" phase
   try {
     // PERSISTENT FRAME CALLBACKS
     _schedulerPhase = SchedulerPhase.persistentCallbacks;
     for (FrameCallback callback in _persistentCallbacks)
       _invokeFrameCallback(callback, _currentFrameTimeStamp);

     // POST-FRAME CALLBACKS
     _schedulerPhase = SchedulerPhase.postFrameCallbacks;
     final List<FrameCallback> localPostFrameCallbacks =
         List<FrameCallback>.from(_postFrameCallbacks);
     _postFrameCallbacks.clear();
     for (FrameCallback callback in localPostFrameCallbacks)
       _invokeFrameCallback(callback, _currentFrameTimeStamp);
   } finally {
     _schedulerPhase = SchedulerPhase.idle;
     Timeline.finishSync(); // end the Frame
     assert(() {
       if (debugPrintEndFrameBanner)
         debugPrint('▀' * _debugBanner.length);
       _debugBanner = null;
       return true;
     }());
     _currentFrameTimeStamp = null;
   }
 }
复制代码

根据源码我们可以看到当布局完成后会调用已经注册的回调postFrameCallbacks,官方很友好的开放了添加回调的方法。

void addPostFrameCallback(FrameCallback callback) {
   _postFrameCallbacks.add(callback);
 }

复制代码

所以我们就可以当监听到导航栏路由变化时,并且监听到布局渲染后去遍历element树,拿到我们想要的widget,去获取widget上面的信息。

识别页面并获取页面信息

  • 在树的遍历上,我们需要用从下往上从左往右的方式去遍历,因为元素是从上往下从右往左添加到树上的。我们只需要找到第一个Scaffold,就可以确定页面,从它再往上取1-2层,拿到为页面的widget,这中间的一个路径就可以作为我们页面的标示了。当然你也可以加上Scaffold里页面的title。

点击埋点

全局捕获点击事件

  • 在flutter中存在一个手势竞技场,竞技场中最后获胜的手势可以响应点击事件。那么既然竞技场最后只能响应一个手势,但是又不能hook手势的onTap方法,那我们要如何实现全局捕获点击事件呢?同样我们仍然阅读flutter源码,可以看到TapGestureRecognizer中有一个如下方法。
void acceptGesture(int pointer) {
   super.acceptGesture(pointer);
   if (pointer == primaryPointer) {
     _checkDown(pointer);
     _wonArenaForPrimaryPointer = true;
     _checkUp();
   }
 }
 
void rejectGesture(int pointer) {
   super.rejectGesture(pointer);
   if (pointer == primaryPointer) {
     // Another gesture won the arena.
     assert(state != GestureRecognizerState.possible);
     if (_sentTapDown)
       _checkCancel('forced ');
     _reset();
   }
 }
复制代码

上面的方法是手势的拒绝和添加。从源码中我们可以看出当另一个手势从竞技场胜出时,不会执行手势的成功回调,而是会执行手势的取消回调。那么我们是不是可以添加一个全局的手势,然后重写它的拒绝方法,让它内部执行手势的接受方法呢,这样我们自己添加的全局手势也能执行成功回调了?实践见证确实可以这样做。

识别点位标示并获取信息

  • 同样我们可以在全局手势的回调中拿到当前点位坐标。在回调中同样我们遍历element树,拿到符合点位坐标并且widget runTimeType 是Ink的最小单元。

最小单元: 蓝色,黄色,绿色都是Ink控件,白色为点击的点,那么绿色即为最小单元。

把Ink到Scroffld的中间路径为作为一个点击位的标示,当然中间可以过滤一些不需要的widget,不然路径会很长。另外可以获取按钮或者子控件的一些其他信息,如title和Image name。

遇到的坑

无痕埋点的方案基本上是上面的这些,但是中间我们还是一路踩坑,细节上有些需要特殊处理。

多子元素控件的处理

  • flutter中widget子组件可能不仅有child还有些childrens,所对应的element为SingleChildRenderObjectElement和MultiChildRenderObjectElement,所以在遍历element是要注意区分为哪种element类型,不同类型的遍历上略有不同。如在手势埋点中,在多子元素的组件中,从最后一个开始遍历,保证获取到的第一个命中的点击事件是相应的那个(界面上是最顶层的组件)。同样像ListView,Tab这种组件想要获取正确的路径位置,需要获取当前element在MultiChildRenderObjectElement中的正确位置。

Tab的特殊处理

  • 当Tab下的页面切换时,并不会触发路由的didPush和didPop,所以我们需要借助点击事件的获取,并分析出是tab切换所触发的,然后遍历获取到页面信息。

附言

  • 对文章有疑问或者有任何技术想要探讨的同学可以通过邮箱联系我 531889780@qq.com
关注下面的标签,发现更多相似文章
评论