这是我参与「第五届青训营 」笔记创作活动的第9天,关于前端监控sdk实战的知识点总结,包括: 什么是前端监控和概述:前端监控之常用性能指标。
———Zy_Thomas
前端监控
什么是前端监控
前端监控就是尽可能地采集到这一过程以及后续用户交互中产出地性能指标与发生的异常事件并上报到平台完成消费。
为什么需要前端监控
从用户(浏览网页的人)的视角来抛出一些使用时遇到的问题:
- 网页打开太慢
- 网页卡顿
- 网页图片全部裂开
- 网页无内容
前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差地页面进行分析与归因。
前端监控到底监控了什么
- 性能指标
- 异常事件
- 用户行为
概述:前端监控之常用性能指标
2010年8月,W3C成立了Web性能工作组,由来自Google和Microsoft地工程师担任主席,目标是制定衡量Web应用性能地方法和API。
随后,Web性能工作组开始制定了一系列Web性能标准,应用到桌面和移动浏览器以及其他环境中,帮助Web开发人员评估和理解应用地性能特征。
以用户为中心的性能指标
-
静态资源错误 在拉取和加载静态资源的过程中发生了预期之外的错误,如网络异常等,导致静态资源无法正常渲染到页面上
-
请求异常 请求状态码>=400时
-
JS错误 在页面运行时发生的JS错误会严重影响页面的正常渲染与交互,是前端监控的重点
-
白屏异常 没有标准化的监听方法,更考验前端监控开发者的功底
封装一个通用的SDK
流程概述
数据采集 ==> 组装上报 ==> 清洗存储 ==> 数据消费
请求函数:Navigator.sendBeacon()