小程序中无痕埋点的示例分析 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下小程序中无痕埋点的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

背景

微信小程序发布以来,已经从小巧和用完即走的定位,变成了包含复杂功能和完整业务的移动应用。

随之而来的是,生产运营会出现更多难以定位和无法简单复现的bug,尤其本人从事银行业务开发,稳定性要求极高,不然很容易造成客诉甚至资金损失。

另外,为了做了用户研究,需要了解用户如何使用我们的小程序,如路由时序,点击流等。

以上都需要有完整可用的日志来发现和定位生产问题,跟踪用户行为。

日志种类

翻查api文档,小程序打印日志方式有三种,简单描述如下:

<李>

控制台日志(控制台):开发测试阶段用于调试

<李>

实时日志(天气。getRealtimeLogManager):实时记录用户操作,官方提供了很好的过滤筛选,可以精准定位到具体日志;日限500 w条,不过多个打印会合并成一条上报;最多保留7天。传送门

<李>

本地日志(天气。getLogManage）：客户端本地日志，用户点击“反馈与投诉”或者点击页面中的反馈组件可以同步到管理台；最大5m。传送门

集合上报和数据脱敏
对于具体的问题可能需要通过不同的日志来定位，或者结合起来相互印证用户的行为。
所以我们需要同时上报几种日志，但对于某些业务敏感数据可能不适合上报到外系统（微信服务器）或保存在客户端本地，我们可以在封装的集合上报函数中先对数据进行脱敏处理。
做法很简单，遍历日志对象，通过正则匹配，把敏感数据打码。
脱敏后的实时日志如下：
可以参考我们封装的日志插件 @wxa/log

无痕埋点

事件捕获

一般来说，前端日志至少包括：路由切换信息，脚本错误日志，接口请求数据，用户交互信息

在小程序中，前三可以通过官方监听接口和封装函数的方法来抓取数据并且上报。

唯独用户交互信息，因为小程序的双线程架构，导致没办法像h6那样直接在document对象中抓取用户事件。只能在每个wxml模版最外层绑定事件来监听用户行为。

但是对于非冒泡事件（如catchtap）和组件事件（如getuserinfo），还是没办法捕获。

再者，也没办法捕获所有事件，组件事件是不会冒泡的。

劫持事件

另辟蹊径，能不能劫持小程序中所有事件函数来实现事件捕获？可以。

微信小程序中普通事件和组件事件都是bind{event}。可以把模版中所有这形式的key对应的值都替换成我们定义的hook。

在hook函数中完成事件捕获和上报，再执行原来绑定的事件，实现类似beforeEevent和afterEvent的事件钩子函数。

组件标识

事件对象中并没有触发事件的组件的详细信息（类似xpath的元数据），要是页面有两个组件都绑定了同一个事件，那我们要怎么区分用户是点击了哪个组件触发的事件。

可以结合组件的组件名、id、class等信息给组件构造一个id，格式为：

eventName*tagName#id.class(data)复制代码

例如

确认复制代码

通过劫持事件和增加标识信息后，实际输出的代码为：

复制代码

然后在事件对象中可以通过e.mark。eleId来拿到组件标识

实现拦截函数 import BindHijackPlugin 得到“@wxa/plugin-bind-hijack/runtime"; 　　　　wxa.use (BindHijackPlugin, { 　　,,,beforeTap:,函数(e) { 　　,,,,,,,美元日志(& # 39;tap 事件# 39;,,e); 　　,,,}, 　　,,,afterTap:,函数(e) { 　　,,,,,,,console.log (& # 39; afterTap& # 39;,, e); 　　,,,}, 　　,,,:,函数(e){,//所有事件拦截　　,,,,,,,console.log(& # 39;之前# 39;,,e); 　　,,,}, 　　后,,,:,函数(e) { 　　,,,,,,,console.log(& # 39;后# 39;,,e); 　　,,,}, 　　});复制代码