基于大数据的前端页面异常结果检测

1. 第十六届 D 2 前端技术论坛基于大数据的前端异常结果检测王骕

2. 研发背景观测检测目录适用性及其它工程化及产品化

3. 研发背景

4. 研发背景-定义问题如何在客户场景下发现非预期的页面展现结果？ 1 2 3 4 5 6

5. 研发背景-定义问题如何在客户场景下发现非预期的页面展现结果？ • 页面在实际用户场景中展现内容及交互过程是否符合预期，是建立监控体系的最根本诉求。 • 监控中所称“白屏”, 是非预期结果中的一种极端情况，其检测条件是最容易简化的，但并非直接目的； • 不能直接观测，是解题困难的根本原因；

6. 如何观测

7. 如何观测 – 建立观察窗口把页面渲染的过程，理解为页面不断添加内容而由“不稳定”到“稳定”的过渡。变化率 1.0 缺少统一实现！ 0.5 一次满屏用户页面活动.. NavigationStart 0 domContentLoad firstPaint 页面状态 load 首屏完成时间线 ★ 用户视觉稳定 ★ 用户开始有继续交互的意识和动作

8. 如何检测

9. 理解原理 - 页面上看 32 49 248 页面渲染过程中的不同形态会反馈在不同的DOM数量上 99 46

10. 理解原理 - 推论及验证如果通过在页面渲染完成时收集dom数，上报一定数量的样本统计并绘制成图像，则： Y: 样本数 G2 G3 G1 X: DOM数一个页面在不同的渲染状态下对应 DOM 数量的可能成组分布，且各组间会有一个较清析的级差；对 X 轴上的投影进行分类计算，则最少可以找出1组异常组；通过配置是否包含后续的 N 个分组，则可以监控到其它非预期状态；

11. 验证推理 - 统计上看

12. 在更多页面上验证推论

13. 在同一页面的不同时间上验证

14. 如果无法直接分组 18 ~ 500+

15. 如果无法直接分组 815 32 26

16. 如果无法直接分组 - 借用流量维度

17. 总结原理 1、大部份页面在不同的渲染状态下对应 DOM 数量的可以成组分布，且各组间会有一个较清析的级差； 2、少部份不能直接分类的页面中，由于异常点集中于左下，所以仍可以根据其它方法进行样本分类，其结果不具备绝对性，但比例变化时仍具参考性； 3、页面在客户侧的渲染形态分布是基本稳定的，如果渲染状态发生了变化那么由一定对应服务端或前端功能的改变（功能或策略变动，页面型态切换，故障等）

18. 适用性及其它

19. 适用性及其它已知问题

20. 工程化及产品化

21. 工程化及产品化

22. Thanks