快手前端监控体系建设的演进之路

1. 快手手前端监控体系建设的演进之路路宋云路路快手手前端技术专家

2. 个人人介绍宋云路路 2016 年年加入入快手手，亲身经历了了快手手从千万级 DAU 到亿级 DAU 的前端架构演进全过程，快手手前端监控平台发起人人，目目前负责快手手国际化前端业务。

3. • 背景介绍 • 快手手前端监控能力力力设计 • 前端监控平台搭建实践 • 总结展望

4. 前端发展与监控的演进 div+css 前端技术趋势前端监控趋势 Hybrid 页面性能监控错误监控接口监控容器监控资源监控稳定性监控首屏监控

5. 快手手前端监控演进第一阶段 2011~2016 • 百度统计拿来主义 • Google Analytics • 其他痛点：无法与内部账号系统打通自定义能力受限诸多各种问题

6. 快手手前端监控演进第二阶段 2017~2019 • 访问刀耕火种 • 页面性能 • JS错误痛点：布局能力有限无法基于前端业务场景分析问题数据监控处理能力弱

7. 快手手前端监控演进 • 监控第三阶段 2020~2021 全面建设 • 排障 • 分析 • 预警关键词：性能，稳定性，度量标准

8. 监控体系建设中面面临的挑战 • 如何定义监控核心心指标，什什么算是优/良/差？ • 如何快速分析定位性能问题原因？ • 如何确定数据是准确的，怎样进行行行数据置信验证？ • 重大大活动如何提供稳定监控服务支支撑？

9. 二二、快手手前端监控能力力力设计

10. 1. ⻚页面面性能指标设计如果我们只能用用一一个指标代表前端⻚页面面性能，应该用用哪个？开始请求获取首字节页面开始显示页面加载完毕完整加载时间在SPA等场景下易被绕过在长页面下不能反应用户体感

11. 1. ⻚页面面性能指标设计如果我们只能用用一一个指标代表前端⻚页面面性能，应该用用哪个？开始请求获取首字节页面开始显示页面加载完毕白屏时间未体现页面核心内容信息可以借助端能力优化实际白屏时间

12. 1. ⻚页面面性能指标设计如果我们只能用用一一个指标代表前端⻚页面面性能，应该用用哪个？开始请求获取首字节页面加载完毕页面开始显示重要元素时间 FMP vs LCP

13. 1. ⻚页面面性能指标设计 FMP （First Meaningful Paint）单位时间内布局结点增加最多的时间点限制：没有标准实现对页面细微的变化过于敏感 FMP

14. 1. ⻚页面面性能指标设计 LCP （Largest Contentful Paint）统计图片，视频/直播，文本结点中最大屏幕元素绘制的时间限制：最大元素不一定是最重要元素浏览器支持率仅70%

15. 1. ⻚页面面性能指标设计如果我们只能用用一一个指标代表前端⻚页面面性能，应该用用哪个？开始请求获取首字节页面开始显示页面加载完毕异步数据自定义FMP API数据渲染到Dom后的时间

16. 1. ⻚页面面性能指标设计自定义FMP指标阈值定义对业务的激励效果优化18% 3000 2000 1000 0 第一周性能一个月后性能

17. 2. H5视频/直播指标设计当我们观看视频/直播时，哪些情况让你觉得最反感？现象上报数据指标设计视频出错了播放出错上报播放失败率等待时间长点击到实际播放耗时启播耗时太卡了播放卡顿上报百秒卡顿率

18. 3. H5容器器监控指标设计做为前端，为什么要关心H5容器的监控数据？

19. 一一个真实的访问案例例：页面打开很慢完整加载时间90分位： 6.5s ：页面打开还是很慢 4.5s

20. 前端为什什么要关心心容器器的监控？前端时间起点点击H5入口 WebView启动时间 P90 5.9s 前端时间起点点击H5入口开始JS桥注入 Cookie开始注入完成创建WebView 完整加载前端加载时间 P90 4.5s 开始创建WebView 进入H5容器逻辑 DomReady JS桥注入完成 WebView加载过程放大 Cookie注入完成

21. 3. H5容器器相关指标设计 1 2 页面性能 WebView完整生命周期性能 3 页面稳定性基础维度 Cookie成功率网速分类占比 JS桥成功率低端机占比页面异常退出率无响应(ANR)率系统环境离线包命中率崩溃率运行时环境 2s白屏率

22. 4. 其他监控能力力力设计 API性能 / 异常资源性能 / 异常 XMLHttpRequest fetch ResourceTiming JS异常 window.onerror addEventListener('error') unhandledRejection

23. 看到大大盘数据变了了，如何定位问题原因？

24. 数据归因诊断能力力力一条数据中的指标分为两类：原子指标，综合指标综合指标指标分类原子指标 FMP LCP 如果我们能提前定义一个指 Load 标数值依赖的原子指标信 DNS 息，是否可以进行快速归因 TCP SSL ... 定位？

25. 数据归因诊断能力力力 SSL建连 TCP连接数据传输 Dom解析资源加载 JS加载 API加载 JS执行 … html文件大小资源文件大小资源文件数量 API接口数量离线包数量 ... 网络分布设备分布地域分布版本分布环境分布 ... 性能相关 1. 定义指标的依赖树 2. 查询其依赖树的变动，进行归因 3. 计算每个因子波动的贡献度 4. 选出 TOP3 贡献度因子 DNS查询 FMP 内容相关访问来源相关

26. 数据归因诊断能力力力算法原理： FMP ↑10% 贡献值 =（因子波动率 - 指标波动率）* 因子数值离线归因分析 • 遍历每一个因子 • 查询其性能数值，计算波动率 • 根据公式计算贡献值 & 贡献度离线包版本 v3.0 1600ms ↑25% 贡献值 = （0.25 - 0.1）* 1600 = 240 客户端版本 v1.1.10 1500ms ↑20% 贡献值 = （0.2 - 0.1）* 1500 = 150 省份吉林 1000ms ↑20% 贡献值 = （0.2 - 0.1）* 1000 = 100

27. 数据归因诊断能力力力

28. 性能检测诊断能力力力 • 预定义User Agent, Cookie等访问信息 • 基于Puppeteer打开无无头浏览器器，抓取⻚页面面性能相关信息 • 根据性能信息和预定义诊断报告模板生生成诊断报告

29. 某用用户⻚页面面很慢，如何定位问题来源？

30. 访问级别请求还原 sessionID + 日志排序还原操作顺序

31. 三、前端监控平台搭建实践

32. 1. 前端监控平台整体设计数据展示数据处理整体架构图性能分析错误统计资源分析服务端分发数据上报 API分析数据过滤访问行为页面性能接口性能资源性能进入错误数据页面错误 OLAP引擎客户端上报 HTTP上报容器性能数据报告监控报警数据分流性能数据数据采集多维分析停留离开自定义数据 JS错误接口错误资源错误容器错误性能事件

33. 1. 前端监控平台整体设计采集上报存储查询采集端 JS-SDK 页面性能 JS异常自定义数据 WebView性能 API异常资源加载异常视频直播数据 H5容器 API性能环境信息处理序列ID生成上报暂存队列批量上报

34. 1. 前端监控平台整体设计采集上报存储查询上报采集端 JS-SDK 页面性能 JS异常自定义数据 JS桥上报 WebView性能 API异常资源加载异常视频直播数据 H5容器 API性能环境信息处理序列ID生成上报暂存队列批量上报 HTTP Post Image Src HTTP SendBeacon

35. 1. 前端监控平台整体设计采集上报服务端存储数据仓库 Flink数据基础过滤（分流 / 校验 / 采样）数据解析数据补全数据映射数据分发 Kafka 数据清洗 OLAP引擎 Druid Clickhouse 查询

36. 1. 前端监控平台整体设计采集上报服务端存储查询数据仓库 Flink数据基础过滤（分流 / 校验 / 采样）数据解析数据补全数据映射数据分发展示查询 Kafka 数据清洗 OLAP引擎 Druid Clickhouse API 性能分析性能诊断资源分析 API分析错误统计多维分析项目管理报警管理

37. 1. 前端监控平台整体设计监控数据表设计进入停留 • 访问 • API请求 • 页面性能 • JS桥调用 • 容器性能 • JS错误 • 资源性能 • 加载错误离开 • 停留时长页面访问表容器访问表 API调用表 JS桥调用表资源调用表离线包使用表异常调用表自定义事件表一次页面访问可能产生 5~10 条数据

38. 1. 前端监控平台整体设计如何保证数据准确性和完整性？数据收集校验前端 / H5容器双重统计相互校验数据上报丢失统计数据清洗加工校验基于序列ID空缺计算丢失率实时 / 离线数据双重统计 JS桥上报 < 1% HTTP上报 < 1.5% 相互校验

39. 2. 重大活动的监控能力保障面对业务侧百万级QPS的请求，如何保障监控平台的处理能力和响应速度？上报存储查询

40. 2. 重大活动的监控能力保障数据上报的潜在风险数据上报保障方案上报量过大，带宽 / 数据处理能力超载动态采样上报 • • • 通过客户端动态下发采样率 JSSDK上报前通过JS桥获取最新的采样率基于采样率上报数据批量上报 • • 通过客户端按分钟合并上报前端暂存队列合并上报逻辑优化 • • 防抖处理兜底兼容逻辑

41. 2. 重大活动的监控能力保障拆分专项数据源，单独保障降低数据维度数量 • • 独立链路动态降级 • • 采样清洗采样落库容灾互备 • • 多链路互备多机房部署存储保障应急预案 • • 全流程预案设计预案演练

42. 2. 重大活动的监控能力保障前端服务优化 • 预查询 • 查询分段 • 缓存查询结果数据查询 • 业务逻辑优化 • 健康检测 • 压测 DevOps 优化查询保障 • 监控预警 • Oncall巡检

43. 2. 重大活动的监控能力保障专用监控大屏

44. 四、总结展望

45. 快手手前端监控平台运行行行效果 • 建立了以自定义FMP为主的前端性能度量指标体系 • 通过各种能力组合，将过去小时级别的排障耗时缩短为分钟级别 • 平台总体接入项目数400+，日生产数据百亿条

46. 后续展望平台化生态化智能化 • 内部系统高度集成 • 前端 -> 移动端 • 自动巡检 • 一站式监控能力 • 前端 -> node • 自动报警 • 监控 -> 分析治理 • 自动归因

47.