第五期 | 前端监控怎么玩?

6,371 阅读7分钟

2020.4.25 前端如何搞监控

场景


搭建平台开发的组件太多,实际上很多功能类似,需要监控组件在一类场景下效能如何
组件监控的指标

  • 引用量,引用次数高对此组件的优先级也高
  • 曝光点击率: 引导转化率 = 引导成交量/点击量/曝光量
  • 数据接口: 加载时间、组件异常、白屏率
  • 配置复杂度:比如输入转选择类型,预设默认值,减少用户配置时间
  • 代码质量:编译过程中,ESlint上报不合规


App、小程序监控
监控目的:

  • 有没有人用
  • 用的怎么样
  • 有什么异常
  • 如何跟踪
  • 分析解决
  • 提供决策


工具
以宋小菜为例:
----
第一版

  • Countly: 针对RN应用
  • 友盟:针对原生APP

第二版

  • BugSneg 针对RN
  • MongoDB 数据存储
  • RGB 基于Koa自建

第三版

  • 采集SDK 自研平台
  • Filebeat 节点 Node Transfer 做日志采集转发
  • Kafka集群做分布式消息通信
  • ES(ElasticSearch) 日志处理
  • Datawarehouse 下沉到数仓
  • Reports 大表哥报表平台
  • MySQL/Redis Task存储


系统架构
----
客户端: PC/H5、RN、小程序
日志处理: log-transfer、Filebeat、Kafka集群、ElasticSearch
数据处理: Data Warehouse、监控系统后台
数据展现:可视化报表平台、监控看板

为什么自己研发

以贝贝举例:
假设有80个工程项目,每年需要支付28W左右监控费用 > 自己研发成本
业界方案对比(有一定误差,仅供参考):

监控步骤

根据业务我们可以看到主要有两种场景,

  • 一种是用于广告营销类的,分析用户行为形成用户画像
  • 另一种主要是对自己系统做的错误监控,

这两种场景的步骤也是不同的。

用户监控: 埋点-> 采集 -> 计算 -> 分析
错误监控:错误收集-> 错误上报 -> 数据清洗 -> 数据持久化 -> 平台可视化、监控

错误监控实现层面来自贝贝的 Allen 讲师已经讲的很详细了,我这里用脑图整理了一下。
Web端错误监控脑图:


其他端

上面这套闭环的Web端监控,在其他端怎么用?其实主要是在第一层应用接入去做文章。
思路: 差异化采集、格式化上报

错误捕获以及代码实现

JS端:
错误捕获: ErrorUtils、Promise.rejection Tracking
网络请求: 替换XMLHttpRequest, 代理 send/open/onload 等方法

Native端:


微信小程序:
网络请求:代理全局wx的wx.request对象

代码实现:

React 端:

为什么选择ES和Mysql?
存储介质对比:


接下来是对营销、广告场景的监控分析:

埋点

监测用户行为、事件、留存 -> 上报数据,可以分成下面几个级别:

  • 站点级别
  • 页面级别
  • 组件级别
  • 组件内部链接级别

采集

采集哪些数据

  • 用户行为数据: 用户页面操作、页面跳转、窗口事件
  • 错误数据: 后端接口、前端JS错误 AppNative错误


通过单个页面我们可以获得的一些结论:

  • 用户地域分布
  • 在线时长
  • 按钮点击率
  • 页面来源分布:内链、外链、搜索引擎
  • 广告位点击率:点击次数/曝光次数
  • 日访问量趋势

如何采集用户停留时间?

  1. 使用置信区间,过滤异常数据。如下图可以看到有些平均时长不是很能表现用户停留时间,采用中位数效果会好些
  1. 采用柱状图展示用户停留时长

怎么采集事件?
鼠标、滚动、键盘、自定义事件
具体实现:

  • sendBeacon方法 确保事件被发送
  • 兼容IE用户, 发送请求
  • CORS 发送post请求批量上报


怎么将采集到的数据转换为人可以理解的指标?
流程:搭建指标体系 -> 获取数据 -> 数据分析 -> 具体到应用场景

举例1:用户登录或者游客访问

三个框对应 浏览器数据、事件数据、用户数据,自动生成uuid,和userid关联,将 uuid 和 userid 存储到cookie

举例2:用户跳转

跳转时记录来源, 项目ID、页面ID、区块ID、坑位下标、串联ID,
在下个页面,从URL获取utm值。然后进行页面上报

计算

数据清洗案例:

分析

怎么分析?
针对用户采集可以采用阿里云 Log Service,主要功能是查询和统计

分析什么?


如何分析基础数据 PV、UV、点击数、曝光数
使用漏斗模型,分析转化率 
用热力图分析页面
通过漏斗和路径分析来分析转化率

遇到的坑

iOS符号化


符号化后去除了大量版本间的差异,对错误聚合提供了方便

错误聚合

初级聚合: 全内容散列,聚合度低

将错误直接MD5散列, 这样聚合度会比较低,
通用优化:

  • 同一类错误 错误名和错误堆栈是相同的
  • 系统类行号去除,减少不同系统版本导致的堆栈不一致(用正则找到系统类,然后去掉行号)

然后对这些信息进行散列

针对优化:
同一类错误,有时候客户端不同系统版本之间的系统
解决: 抽取业务代码堆栈和业务名称来散列
OOM错误,堆栈溢出
这一类错误,直接拿到错误名聚合,然后分析在哪些设备上容易出现

向ES中写入 JSON 类型数据


数据量较大,所有数据并非写在一个索引中,这个时候需要按时或按天建立索引保存数据
同时,需要建立一个固定的索引模版,索引某一字段的数据类型一定要统一,否则会造成数据保存失败的情况。

字段问题:
哪些字段不变,哪些字段动态会变化的,需要设计系统时进行衡量,保持适度的灵活。
变化的字段集中在 pyload 信息,其他类型字段都是固定的,比如:

  • 设备特征:如系统类型、版本
  • 用户特征:如userId, ip、用户所在地
  • SDK信息:SDK类型、版本等


字段字符化处理:
如果使用JSON类型进行上报 且在ES中依然保存为JSON数据,虽然存在索引模版,但在模版没有照顾到的字段上报上来会生成新字段,因而造成字段数量爆炸、这时候就可以使用log-transfer 

第三方推荐

  • 友盟
  • 数极客
  • 神策
  • GrowingIO
  • Fundebug
  • FrontJS
  • Sentry

......

回顾

由于后面还有事情,所以今天的活动没有听完,只对我听过的一些进行了整理。
从业务上来看,监控的场景分为错误监控和用户行为监控,当然还有阿里更复杂的组件级别、场景级别的监控(目前遇不到)。同时学习了一些监控实现的步骤、像埋点、采集。清洗、分析之前都是没有接触过的。
贝贝的两位讲师内容很接近落地方案,后续PPT还得多看看,如果有这方面的需求也会更多的去了解。

关于前端早早聊大会:前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会,计划 2020 年办 >= 15 期,由前端早早聊与掘金联合举办,前端早早聊大会行程动态、录播视频/PPT/讲稿资料下载请关注 「前端早早聊」 公众号跟进。


5 月 16 日举办第六届 - 前端到底怎么玩 Serverless(Paas|Faas),报名请戳:huodongxing.com/go/tl6,海报及讲师行程如下:


看完若有启发,给作者点个👍吧