闲鱼技术—镜空

导语

发布app后，开发者最头疼的问题就是如何解决交付后的用户侧问题的还原和定位，是业界缺乏一整套系统的解决方案的空白领域，闲鱼技术团队结合自己业务痛点在flutter上提出一套全新的技术思路解决这个问题。

我们透过系统底层来捕获ui事件流和业务数据的流动，并利用捕获到的这些数据通过事件回放机制来复现线上的问题。本文先介绍flutter触摸手势事件原理，接着介绍里面怎样录制flutter ui手势事件，然后介绍怎样还原回放flutter ui手势事件，最后附上包括native录制回放的整体框架图。为了便于理解本文，读者可以先阅读我之前写的关于native录制和回放文章《千人千面线上问题回放技术》

背景

现在的app基本都会提供用户反馈问题的入口，然而提供给用户反馈问题一般有两种方式：

  • 直接用文字输入表达，或者截图
  • 直接录制视频反馈

这两种反馈方式常常带来以下抱怨：

  • 用户：输入文字好费时费力
  • 开发1：看不懂用户反馈说的是什么意思？
  • 开发2：大概看懂用户说的是什么意思了，但是我线下没办法复现哈
  • 开发3：看了用户录制的视频，但是我线下没办法重现，也定位不到问题

所以：为了解决以上问题，我们用一套全新的思路来设计线上问题回放体系

Flutter 手势基础知识

如果要录制和回放flutter ui事件，那么我们首先必须了解flutter ui手势基本原理。

  1. Flutter UI触摸原始数据Pointer
    我们可以把Flutter中的手势系统分两层概念来理解。第一层概念为原始触摸数据(pointer)，它描述了屏幕上指针（例如，触摸，鼠标和触控笔）的时间，类型，位置和移动。 第二层概念为手势，描述由一个或多个原始移动数据组成的语义动作。一般情况下单独的原始触摸数据没有任何意义。
    原始触摸数据是由系统传给native，native再通过flutter view channel传给flutter。
    flutter接收native传来的原始数据接口如下：
  1. void _handlePointerDataPacket(ui.PointerDataPacket packet) {
  2.     // We convert pointer data to logical pixels so that e.g. the touch slop can be
  3.     // defined in a device-independent manner.
  4.     _pendingPointerEvents.addAll(PointerEventConverter.expand(packet.data, ui.window.devicePixelRatio));
  5.     if (!locked)
  6.       _flushPointerEventQueue();
  7.   }

2. Flutter UI碰撞测试

当屏幕接收到触摸时，dart Framework会对您的应用程序执行碰撞测试，以确定触摸与屏幕相接的位置存在哪些视图（renderobject）。 触摸事件然后被分发到最内部的renderobject上。 从最内部renderobject开始，这些事件在renderobject树中向上冒泡传递，通过冒泡传递最后把所有的renderobject遍历出来，从这个传递机制可想而知，遍历出来renderobject列表里的最后一个是WidgetsFlutterBinding（严格来讲WidgetsFlutterBinding不是renderobject），后面会介绍到WidgetsFlutterBinding。

  1. void _handlePointerEvent(PointerEvent event) {
  2.     assert(!locked);
  3.     HitTestResult result;
  4.     if (event is PointerDownEvent) {
  5.       assert(!_hitTests.containsKey(event.pointer));
  6.       result = HitTestResult();
  7.       hitTest(result, event.position);
  8.       _hitTests[event.pointer] = result;
  9.       assert(() {
  10.         if (debugPrintHitTestResults)
  11.           debugPrint('$event: $result');
  12.         return true;
  13.       }());
  14.     } else if (event is PointerUpEvent || event is PointerCancelEvent) {
  15.       result = _hitTests.remove(event.pointer);
  16.     } else if (event.down) {
  17.       result = _hitTests[event.pointer];
  18.     } else {
  19.       return; // We currently ignore add, remove, and hover move events.
  20.     }
  21.     if (result != null)
  22.       dispatchEvent(event, result);
  23.   }

上面代码以 histTest()检测当前触摸 pointer event 涉及到哪些视图。
最后通过dispatchEvent(event, result)来处理该事件。

  1. void dispatchEvent(PointerEvent event, HitTestResult result) {
  2.     assert(!locked); 
  3.     assert(result != null);
  4.     for (HitTestEntry entry in result.path) {
  5.       try {
  6.         entry.target.handleEvent(event, entry);
  7.       } catch (exception, stack) {
  8.       }
  9.     }
  10.   }

上面的代码就是用来分别调用每个视图（RenderObject）的手势识别器独自处理当前触摸事件（决定是否接收此事件）。
entry.target是每个widget对应的RenderObject,所有的RenderObject都需要实现（implements）HitTestTarget类的接口，HitTestTarget里面有就有handleEvent这个接口，所以每个RenderObject都需要实现handleEvent这个接口， 这个接口就是用来处理手势识别。

  1. abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget

除了最后一个WidgetsFlutterBinding外，其他视图RenderObject调用自己的handleEvent来识别手势，其作用就是判断当前手势是否要放弃，如果不放弃则丢到一个路由器里（这个路由器就是手势竞技场）最后由WidgetsFlutterBinding 调用handleEvent统一决议这些手势识别器最终谁胜出，所以这里WidgetsFlutterBinding.handleEvent其实就是统一处理接口，它的代码如下：

  1. void handleEvent(PointerEvent event, HitTestEntry entry) {
  2.     pointerRouter.route(event);
  3.     if (event is PointerDownEvent) {
  4.       gestureArena.close(event.pointer);
  5.     } else if (event is PointerUpEvent) {
  6.       gestureArena.sweep(event.pointer);
  7.     }
  8.   }

3. Flutter UI手势决议

从上面的介绍可以得出一次触摸事件可能触发多个手势识别器。框架通过让每个识别器加入一个“手势竞争场”来决议用户想要的手势。“手势竞争场”使用以下规则来决议哪个手势胜出，非常简单

  1. 在任何时候，任何识别器都可以自己宣布失败并主动离开“手势竞争场”。如果在当前“竞争场”中只剩下一个识别器，那么剩下来的就是赢家，赢家意味着独自接收此触摸事件并做出响应动作
  2. 在任何时候，任何识别器都可以自己宣布胜利，并且最终就是它胜利，所有剩下的其他识别器都会失败

4. Flutter UI手势例子

下面示例表示屏幕window由ABCDEFKG视图组成，其中A视图是根视图，即是最底下的视图。红圈表示触摸点位置，触摸落在G视图的中间位置。

新年巨制！千人千面回放技术让你“看到”flutter用户侧问题 - 图1

根据碰撞测试，遍历出响应此触摸事件的视图路径：
WidgetsFlutterBinding <— A <— C <— K <— G (其中GKCA是renderObject)

遍历路径列表后，开始调用各自的视图（GKCA）entry.target.handleEvent来把自己识别器放到竞技场里参加决议，当然有些视图由于根据自己的逻辑判断主动放弃识别该触摸事件。这个处理过程如下图

新年巨制！千人千面回放技术让你“看到”flutter用户侧问题 - 图2

按G->K->C->A->WidgetsFlutterBinding顺序分别调用handleEvent()方法，最后通过WidgetsFlutterBinding调用自己的handleEvent()接口来统一决议最终哪个手势识别器胜出。
胜出的那个手势识别器通过回调方法回调到上层业务代码，流程如下
新年巨制！千人千面回放技术让你“看到”flutter用户侧问题 - 图3

Flutter UI录制

从上面的flutter手势处理可知，我们只需要在手势识别器回调上包装回调方法，即可拦截到手势回调方法，这样我们就可以在拦截过程读到WidgetsFlutterBinding <— A <— C <— K <— G链路的这棵视图树。我们只需要把这个棵树，树上的节点相关属性和手势类型记录下来，那回放时，通过这些信息去匹配到当前界面上的对应视图即可回放。下面是tap事件的录制代码，其他类型手势的录制代码原理一样，这里略过。

  1. static GestureTapCallback onTapWithRecord(GestureTapCallback orgOnTap,       BuildContext context)
  2.   {
  3.     if (null != orgOnTap && null != context)
  4.     {
  5.       final GestureTapCallback onTapWithRecord = () {
  6.         if(bStartRecord)
  7.         {
  8.           saveTapInfo(context, TouchEventUIType.OnTap,null);
  9.         }
  10.         if (null != orgOnTap)
  11.         {
  12.           orgOnTap();
  13.         }
  14.       };
  15.       return onTapWithRecord;
  16.     }
  17.     return orgOnTap;
  18.   }
  20. static void saveTapInfo(BuildContext context, TouchEventUIType type, Offset point)
  21.   {
  22.     if(null == point && null != pointerPacketList && pointerPacketList.isNotEmpty)
  23.     {
  24.       final ui.PointerDataPacket last = pointerPacketList.last;
  25.       if(null != last && null != last.data && last.data.isNotEmpty)
  26.       {
  27.         final ui.Rect rect = QueReplayTool.getWindowRect(context);
  29.         point = new Offset(last.data.last.physicalX / ui.window.devicePixelRatio - rect.left,
  30.           last.data.last.physicalY /ui.window.devicePixelRatio - rect.top);
  31.       }
  32.     }
  33.     final RecordInfo record = createTapRecordInfo(context, type, point);
  34.     if(null != record)
  35.     {
  36.       FlutterQuestionReplayPlugin.saveRecordDataToNative(record);
  37.     }
  38.     clearPointerPacketList();
  39.   }

录制流程图如下：

新年巨制！千人千面回放技术让你“看到”flutter用户侧问题 - 图4

Flutter UI回放

ui回放分两部分，第一部分通过录制的相关信息match到当前界面相应视图，第二部分是在此视图上进行模拟相关手势动作，这部分是个难点，也是重点，其中涉及到怎样生成原始的触摸数据信息，里面有时间，类型，坐标，方向，如果这些信息设置不合理或者错误会导致crash，还有滚动距离不符需要补偿，怎么补偿等等。
下面是滚动事件回放流程图，其他类型手势的回放原理一样。

新年巨制！千人千面回放技术让你“看到”flutter用户侧问题 - 图5

上面的预处理，识别消耗指的是在滚动开始时，手势识别器要判断是否符合滚动手势所需要滚动的距离。
所以我们为了让其控件滚动首先要生成一些触摸点数据，让手势识别器识别为滚动事件。这样才能进行后续的滚动动作。
下面是滚动处理逻辑代码，如下：

  1. void verticalScroll(double dstPoint, double moveDis) {
  2.     preReplayPacket = null;
  3.     if (0.0 != moveDis) {
  4.       //此处计算滚动方向，和滚动单元像素偏移，由于代码太长略过
  5.       int count =
  6.           ((ui.window.devicePixelRatio * moveDis) / (unit.abs())).round() * 2;
  7.       if (count < minCount) {
  8.         count = minCount; //保证最少偏移50/2=25 小于这个数 可能没反应，因为被其他控件检测滚动消耗掉了
  9.         //还有就是如果count太小，count被scroll view消耗完前并没有滚动，这是就触摸结束了（ui.PointerChange.up），那可能引起cell
  10.         //点击事件跳转事件
  11.       }
  12.       final double physicalX =
  13.           rect.center.dx * ui.window.devicePixelRatio; //376.0;
  14.       double physicalY;
  15.       final double needOffset = (count * unit).abs();
  16.       final double targetHeight = rect.size.height * ui.window.devicePixelRatio;
  17.       final int scrollPadding = rect.height ~/ 4;
  18.       if (needOffset <= targetHeight / 2) {
  19.         physicalY = rect.center.dy * ui.window.devicePixelRatio;
  20.       } else if (needOffset > targetHeight / 2 && needOffset < targetHeight) {
  21.         physicalY = (orgMoveDis > 0)
  22.             ? (rect.bottom - scrollPadding) * ui.window.devicePixelRatio
  23.             : (rect.top + scrollPadding) * ui.window.devicePixelRatio;
  24.       } else {
  25.         physicalY = (orgMoveDis > 0)
  26.             ? (rect.bottom - scrollPadding) * ui.window.devicePixelRatio
  27.             : (rect.top + scrollPadding) * ui.window.devicePixelRatio;
  28.         count = ((rect.height - 2 * scrollPadding) *
  29.                 ui.window.devicePixelRatio /
  30.                 unit.abs())
  31.             .round();
  32.       }
  33.       final List<ui.PointerDataPacket> packetList =createTouchDataList(count, unit, physicalY, physicalX);
  34.       exeScroolTouch(packetList,dstPoint);
  35.     } else {
  36.       new Timer(const Duration(microseconds: fpsInterval), () {
  37.         replayScrollEvent();
  38.       });
  39.     }
  40.   }

上面代码大概处理逻辑：1.计算滚动方向，每个生成的触摸数据偏移单元 2.计算滚动的开始位置 3.生成滚动原始触摸数据列表 4.循环发射原始触摸数据，并计算是否滚动到指定的位置，如果还达不到指定的位置，则继续补给

生成滚动原始触摸数据列表代码如下：
第一数据是down触摸数据，其他都是move触摸数据。up数据在这里不需要生成，当滚动距离到目标位置后才另外生成up触摸数据。为什么这样设计？此处留给大家思考！

  1. List<ui.PointerDataPacket>  createTouchDataList(int count,double unit,double physicalY,double physicalX)
  2.   {
  3.       final List<ui.PointerDataPacket> packetList =  <ui.PointerDataPacket>[];
  4.       int uptime = 0;
  5.       for (int i = 0; i < count; i++) {
  6.       ui.PointerChange change;
  7.       if (0 == i) {
  8.       change = ui.PointerChange.down;
  9.       } else {
  10.       change = ui.PointerChange.move;
  11.       physicalY += unit;
  12.       if (i < 15) //前面几个点让在短时间内偏移的距离长点 这样避开单击和长按事件
  13.           {
  14.       physicalY += unit;
  15.       physicalY += unit;
  16.       }
  17.       }
  18.       uptime += replayOnePointDuration;
  19.       final ui.PointerData pointer = new ui.PointerData(
  20.       timeStamp: new Duration(microseconds: uptime),
  21.       change: change,
  22.       kind: ui.PointerDeviceKind.touch,
  23.       device: 1,
  24.       physicalX: physicalX,
  25.       physicalY: physicalY,
  26.       buttons: 0,
  27.       pressure: 0.0,
  28.       pressureMin: 0.0,
  29.       pressureMax: touchPressureMax,
  30.       distance: 0.0,
  31.       distanceMax: 0.0,
  32.       radiusMajor: downRadiusMajor,
  33.       radiusMinor: 0.0,
  34.       radiusMin: downRadiusMin,
  35.       radiusMax: downRadiusMax,
  36.       orientation: orientation,
  37.       tilt: 0.0);
  38.       final List<ui.PointerData> pointerList = <ui.PointerData>[];
  39.       pointerList.add(pointer);
  40.       final ui.PointerDataPacket packet =
  41.       new ui.PointerDataPacket(data: pointerList);
  42.       packetList.add(packet);
  43.       }
  44.       return packetList;
  45.   }

循环发射原始触摸数据，并判断是否继续补给代码如下：
我们以定时器不断的往系统发送触摸数据，每次发送数据前都需要判断是否已经达到目标位置。

  1. void exeScroolTouch(List<ui.PointerDataPacket> packetList,double dstPoint){
  2.   Timer.periodic(const Duration(microseconds: fpsInterval), (Timer timer) {
  3.   final ScrollableState state = element.state;
  4.   final double curPoint = state.position.pixels;//ui.window.physicalSize.height*state.position.pixels/RecordInfo.recordedWindowH;
  5.   final double offset = (dstPoint - curPoint).abs();
  6.   final bool existOffset = offset > 1 ? true : false;
  7.   if (packetList.isNotEmpty && existOffset) {
  8.     sendTouchData(packetList, offset);
  9.   } else if (packetList.isNotEmpty) {
  10.   record.succ = true;
  11.   timer.cancel();
  12.   packetList.clear();
  13.   if (null != preReplayPacket) {
  14.   final ui.PointerDataPacket packet =
  15.   createUpTouchPointPacket();
  16.   if (null != packet) {
  17.   ui.window.onPointerDataPacket(packet);
  18.   }
  19.   }
  20.   new Timer(const Duration(microseconds: fpsInterval), () {
  21.   replayScrollEvent();
  22.   });
  23.   } else if (existOffset) {
  24.   record.succ = true;
  25.   timer.cancel();
  26.   packetList.clear();
  27.   final ui.PointerDataPacket packet =
  28.   createUpTouchPointPacket();
  29.   if (null != packet) {
  30.   ui.window.onPointerDataPacket(packet);
  31.   }
  32.   verticalScroll(dstPoint, dstPoint - curPoint);
  33.   } else {
  34.     finishReplay();
  35.   }
  36.   });
  37.   }

问题回放整体框架图

下图包括native和flutter，包括ui和数据。
新年巨制！千人千面回放技术让你“看到”flutter用户侧问题 - 图6

总结

  • 本文大概介绍了flutter ui手势问题回放，核心部分由四部分组成，一是flutter手势原理，二是flutter ui录制，三是flutter ui回放，四是整个框架图，由于篇幅有限，这四分部都介绍比较笼统，不够详细，请谅解！flutter录制回放代码其实很多，我这里只是附上比较重要，而且易于理解的代码。其他不重要或不易读懂的代码都省掉了。
  • 如果对里面的技术点感兴趣，你可以关注我们的公众号。我们后续会单独对里面的技术点详细深入的分析发文。
  • 如果觉得上面有错误的地方，请指出。谢谢

后续的深入

到目前为止，我们现在的flutter ui录制回放已经开发完成，但我们后续还需要继续优化和深入。我们后续从两个点来深入优化：1.如何在回放时模拟的触摸事件更逼真，比如滚动加速度，一次的滚动其实是一个曲线变化的过程 2.解决手势录制和回放不一致性。举个例子，在键盘里输入123，我们录制时截获到了手势123，但是由于业务上层的bug导致了当时输入3没有响应，输入框里只显示12，我们回放时模拟手势123，最终回放完后输入框显示123，所以这样导致录制和回放不一致性，这个问题怎么解决？这是个麻烦的问题，我们后续会解决。而且已经有这解决方案。