千人千面线上问题回放技术揭秘

栏目: 编程语言 · 发布时间: 6年前

内容简介:发布app后,开发者最头疼的问题就是如何解决交付后的用户侧问题的还原和定位,是业界缺乏一整套系统的解决方案的空白领域,闲鱼技术团队结合自己业务痛点提出一套全新的技术思路解决这个问题并在线上取得了比较满意的实践效果。我们透过系统底层来捕获ui事件流和业务数据的流动,并利用捕获到的这些数据通过事件回放机制来复现线上的问题。本文先介绍录制和回放的整体框架,接着介绍里面涉及到的3个关键技术点,也是这里最复杂的技术(模拟触摸事件,统一拦截器实现,统一hook block)现在的app基本都会提供用户反馈问题的入口,

导语

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

我们透过系统底层来捕获ui事件流和业务数据的流动,并利用捕获到的这些数据通过事件回放机制来复现线上的问题。本文先介绍录制和回放的整体框架,接着介绍里面涉及到的3个关键技术点,也是这里最复杂的技术(模拟触摸事件,统一拦截器实现,统一hook block)

背景

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

  • 直接用文字输入表达,或者截图

  • 直接录制视频反馈

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

  • 用户:输入文字好费时费力

  • 开发1:看不懂用户反馈说的是什么意思?

  • 开发2:大概看懂用户说的是什么意思了,但是我线下没办法复现哈

  • 开发3:看了用户录制的视频,但是我线下没办法重现,也定位不到问题

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

线上问题回放体系的意义

  • 用户不需要输入文字反馈问题,只需要重新操作一下app重现问题步骤即可

  • 开发者拿到用户反馈的问题脚本后,通过线下回放对问题一目了然,跟录制视频效果一样,是的,你没看错,就是跟看视频一样。

  • 通过脚本的回放实时获取到app运行时相关数据(本地数据,网络数据,堆栈等等), 以便排查问题

  • 为后续自动测试提供想象空间--你懂的

效果视频

技术原理

1.app与外部环境的关系

千人千面线上问题回放技术揭秘

从上面的关系图可以看出,整个app的运行无非是用户ui操作,然后触发app从外界获取数据,包括网络数据,gps数据等等,也包括从手机本地获取数据,比如相册数据,机器数据,系统等数据。 所以我们要实现问题回放只需要记录用户的UI操作和外界数据,app自身数据即可。

app录制 = 用户的UI操作 + 外界数据(手机内和手机外) + app自身数据

2.线上问题回放架构由两部分组成:录制和回放

3.录制架构图

千人千面线上问题回放技术揭秘

录制流程

千人千面线上问题回放技术揭秘

4.回放架构图

千人千面线上问题回放技术揭秘 回放跟录制框架图基本一样,实际上录制和回放的代码是在一起,逻辑也是统一的,为了便于表达,我人为划分成两个架构图出来。

回放的流程:

回放流程图在这里省略

1.启动app,点击回放按钮

2.引擎加载回放脚本

3.注册事件(如ui事件,网络数据事件,本地文件事件,页面跳转事件等等)

4.从脚本中解析出一个个事件数据节点,并组成消费队列

5.启动播放器,从消费队列里读取一个个事件来播放,如果是ui事件则直接播放,如果是静态数据事件则直接按照指令要求替换数据值,如果是非ui运行时事件则通过事件指令规则来确定是主动播放还是等待拦截对应的事件,如果需要等待拦截对应的事件,则播放器会一直等待此事件直到此事件被app消费掉为止。只有此事件被消费了,播放器才能播放下一个事件。

6.当拦截到被注册的事件后,根据此事件指令要求把相应的数据塞到相应的字段里

7.跳回6继续运行,直到消费队列里的事件被消费

注意:回放每个事件时会实时自动打印出相应的堆栈信息和事件数据,有利于排查问题

关键技术介绍

1.模拟触摸事件

从ui事件数据解析出被触摸的view,以及此view所在的视图树中的层级关系,并在当前回放界面上查找到对应的view,然后往该view上发送ui操作事件(点击,双击等等),并带上触摸事件的坐标信息,其实这里是模拟触摸事件。

我们先来介绍触摸事件的处理流程

等待触摸阶段

  • 手机屏幕处于待机状态,等待触摸事件发生

  • 手指开始触摸屏幕

系统反应阶段

  • 屏幕感应器接收到触摸,并将触摸数据传给系统IOKit(IOKit是苹果的硬件驱动框架)

  • 系统IOKit封装该触摸事件为IOHIDEvent对象

  • 接着系统IOKit把IOHIDEvent对象转发给SpringBoard进程

SpringBoard进程就是iOS的系统桌面,它存在于iDevice的进程中,不可清除,它的运行原理与Windows中的explorer.exe系统进程相类似。它主要负责界面管理,所以只有它才知道当前触摸到底有谁来响应。

SpringBoard接收阶段

  • SpringBoard收到IOHIDEvent消息后,触发runloop中的Source1回调__IOHIDEventSystemClientQueueCallback()方法。

  • SpringBoard开始查询前台是否存在正在运行的app,如果存在,则SpringBoard通过进程通信方式把此触摸事件转发给前台当前app,如果不存在,则SpringBoard进入其自己内部响应过程。

app处理阶段

  • 前台app主线程Runloop收到SpringBoard转发来的消息,并触发对应runloop 中的Source1回调_UIApplicationHandleEventQueue()。

  • _UIApplicationHandleEventQueue()把IOHIDEvent处理包装成UIEvent进行处理分发

  • Soucre0回调内部UIApplication的sendEvent:方法,将UIEvent传给UIWindow

  • 在UIWindow为根节点的整棵视图树上通过hitTest(_:with:)和point(inside:with:)这两个方法递归查找到合适响应这个触摸事件的视图。

  • 找到最终的叶子节点视图后,就开始触发此视图绑定的相应事件,比如跳转页面等等。

从上面触摸事件处理过程中我们可以看出要录制ui事件只需要在app处理阶段中的UIApplication sendEvent方法处截获触摸数据,回放时也是在这里把触摸模拟回去。

下面是触摸事件录制的代码,就是把UITouch相应的数据保存下来即可 这里有一个关键点,需要把touch.timestamp的时间戳记录下来,以及把当前touch事件距离上一个touch事件的时间间隔记录下来,因为这个涉及到触摸引起惯性加速度问题。比如我们平时滑动列表视图时,手指离开屏幕后,列表视图还要惯性地滑动一小段时间。

我们来看一下代码怎么模拟单击触摸事件(为了容易理解,我把有些不是关键,复杂的代码已经去掉)

接着我们来看一下模拟触摸事件代码 一个基本的触摸事件一般由三部分组成:

  • 1.UITouch对象 - 将用于触摸

  • 2.第一个UIEvent Began触摸

  • 3.第二个UIEvent Ended触摸

实现步骤:

  • 1.代码的前面部分都是一些UITouch和UIEvent私有接口,私有变量字段,由于苹果并不公开它们,为了让其编译不报错,所以我们需要把这些字段包含进来,回放是在线下,所以不必担心私有接口被拒的事情。

  • 2.构造触摸对象:UITouch和UIEvent,把记录对应的字段值塞回相应的字段。塞回去就是用私有接口和私有字段

  • 3.触摸的view位置转换为Window坐标,然后往app里发送事件 [[UIApplication sharedApplication] sendEvent:event];

  • 4.要回放这些触摸事件,我们需要把他丢到CADisplayLink里面来执行

怎样调用私有接口,以及使用哪些私有接口,这点不需要再解释了,如果感兴趣,请关注我们公众号,后续我专门写篇文章来揭露这方面的技术,总的来说就下载苹果提供触摸事件的源码库,分析源码,然后设置断掉调试,甚至反汇编来理解触摸事件的原理。

2.统一拦截器

录制和回放都居于事件流来处理的,而数据的事件流其实就是对一些关键方法的hook,由于我们为了保证对业务代码无侵入和扩展性(随便注册事件),我们需要对所有方法统一hook,所有的方法由同一个钩子来响应处理。如下图所示

千人千面线上问题回放技术揭秘

这个钩子是用用汇编编写,由于汇编代码比较多,而且比较难读懂,所以这里暂时不附上源码,汇编层主要把硬件里面的一些数据统一读取出来,比如通用寄存器数据和浮点寄存器数据,堆栈信息等等,甚至前面的前面的方法参数都可以读取出来,最后转发给 c语言 层处理。

汇编层把硬件相关信息组装好后调用c层统一拦截接口,汇编层是为c层服务。c层无法读取硬件相关信息,所以这里只能用汇编来读取。c层接口通过硬件相关信息定位到当前的方法是属于哪个事件,知道了事件,也意味着知道了事件指令,知道了事件指令,也知道了哪些字段需要塞回去,也知道了被hook的原始方法。

c层代码介绍如下: 由于是统一调用这个拦截器,所以拦截器并不知道当前是哪个业务代码执行过来的,也不知道当前这个业务方法有多少个参数,每个参数类型是什么等等,这个接口代码处理过程大概如下

  • 通过寄存器获取对象self

  • 通过寄存器获取方法sel

  • 通过self和sel获取对应的事件指令

  • 通过事件指令回调上层来决定是否往下执行

  • 获取需要回放该事件的数据

  • 把数据塞回去,比如塞到某个寄存器里,或者塞到某个寄存器所指向的对象的某个字段等等

  • 如果需要立即回放则调用原来被hook的原始方法,如果不是立即回放,则需要把现场信息保存起来,并等待合适的时机由播放队列来播放(调用)

3.怎样统一hook block

如果你只是想大概理解block的底层技术,你只需google一下即可。 如果你想全面深入的理解block底层技术,那网上的那些资料远远满足不了你的需求。 只能阅读苹果编译器clang源码和列出比较有代表性的block例子源码,然后转成c语言和汇编,通过c语言结合汇编研究底层细节。

何谓oc block

  • block就是闭包,跟回调函数callback很类似,闭包也是对象

  • blcok的特点: 1.可有参数列表 2.可有返回值 3.有方法体 4.capture上下文变量 5.有对象引用计数的内存管理策略(block生命周期)

  • block的一般存储在内存中形态有三种 _NSConcretStackBlock(栈)_NSConcretGlobalBlock(全局)_NSConcretMallocBlock(堆)

系统底层怎样表达block

我们先来看一下block的例子:

这段代码首先定义两个变量,接着定义一个block,最后调用block。

  • 两个变量:这两个变量都是被block引用,第一个变量有关键字_ block,表示可以在block里对该变量赋值,第二个变量没有_ block关键字,在block里只能读,不能写。

  • 两个调用block的语句:第一个直接在当前方法test()里调用,此时的block内存数据在栈上,第二个是异步调用,就是说当执行block(2)时test()可能已经运行完了,test()调用栈可能已经被销毁。那这种情况block的数据肯定不能在栈上,只能在堆上或者在全局区。

系统底层表达block比较重要的几种数据结构如下:

  • 注意:虽然底层是用这些结构体来表达block,但是它们并不是源码,是二进制代码

这个例子中的block在底层表达大概如下图:

千人千面线上问题回放技术揭秘

首先用block_info_1来表达block本身,然后用block_desc_1来具体描述block相关信息(比如block_info_1结构体大小,在堆上还是在栈上?copy或dispose时调用哪个方法等等),然而block_desc_1具体是哪个结构体是由block_info_1中flags字段来决定的,block_info_1里的invoke字段是指向block方法体,即是代码段。block的调用就是执行这个函数指针。由于var1是可写的,所以需要设计一个结构体(byref_var1_1)来表达var1,为什么var2直接用他原有的类型表达,而var1要用结构体来表达。篇幅有限,这个自己想想吧?

block小结

  • 为了表达block,底层设计三种结构体:block_info_1,block_desc_1,byref_var1_1,三种函数指针: block invoke方法体,copy方法,dispose方法

  • 其实表达block是非常复杂的,还涉及到block的生命周期,内存管理问题等等,我在这里只是简单的贯穿主流程来介绍的,很多细节都没介绍。

怎样统一hook block

通过上面的分析,得知oc里的block就是一个结构体指针,所以我在源码里可以直接把它转成结构体指针来处理。 统一hook block源码如下

我们首先新建一个新的block newBlock,然后把原来的block orgblock 和 事件指令blockEvent包到新的blcok中,这样达到引用的效果。然后把新的block转成结构体指针,并把结构体指针中的字段invoke(方法体)指向统一回调方法。你可能诧异新的block是没有参数类型的,原来block是有参数类型,外面调用原来block传递参数时会不会引起crash?答案是否定的,因为这里构造新的block时 我们只用block数据结构,block的回调方法字段已经被阉割,回调方法已经指向统一方法了,这个统一方法可以接受任何类型的参数,包括没有参数类型。这个统一方法也是汇编实现,代码实现跟上面的汇编层代码类似,这里就不附上源码了。

那怎样在新的blcok里读取原来的block和事件指令对象呢? 代码如下:

总结

闲鱼技术团队是一只短小精悍的工程技术团队。我们不仅关注于业务问题的有效解决,同时我们在推动打破技术栈分工限制(android/iOS/Html5/Server 编程模型和语言的统一)、计算机视觉技术在移动终端上的前沿实践工作。作为闲鱼技术团队的软件工程师,您有机会去展示您所有的才能和勇气,在整个产品的演进和用户问题解决中证明技术发展是改变生活方式的动力。

简历投递: guicai.gxy@alibaba-inc.com

千人千面线上问题回放技术揭秘

识别二维码,前瞻技术尽在掌握


以上所述就是小编给大家介绍的《千人千面线上问题回放技术揭秘》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

基于MVC的JavaScript Web富应用开发

基于MVC的JavaScript Web富应用开发

麦卡劳(Alex MacCaw) / 李晶、张散集 / 电子工业出版社 / 2012-5 / 59.00元

《JavaScript Web 富应用开发》Developing JavaScript Web Applications是 Alex MacCaw 的新作(由O'Reilly出版发行),本书系统而深入的讲解了如何使用最前沿的Web技术构建下一代互联网富应用程序。作者 Alex MacCaw 是一名Ruby/JavaScript 程序员,在开源社区中很有名望,是Spine框架的作者,同时活跃在纽约、......一起来看看 《基于MVC的JavaScript Web富应用开发》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具