这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天。今天学习了前端监控SDK开发。
前端监控
前端监控是一个成熟业务线的标配，目前最多的场景是监控JS错误，接口请求和性能优化，然后根据日志信息进行分析分类的可视化展示，在发生异常的时候通知到相应的业务开发，监控的性能指标给页面的体验优化提供数据对比和优化的方向。
前端监控的流程
- 前端埋点(通过 sdk 给页面的 dom 都加上标记)
- 数据上报(收集，存储)
- 分析和计算(将采集到的数据进行加工汇总)
- 可视化展示(按照纬度将数据展示)
- 监控报警(发现异常后按一定的条件触发报警)
前端监控目标
前端监控主要包含两大块：错误监控和性能监控
- 保证稳定性（错误监控） 错误监控包括 JavaScript 代码错误，Promsie 错误，接口（XHR，fetch）错误，资源加载错误（script，link等）等，这些错误大多会导致页面功能异常甚至白屏。
- 提升用户体验（性能监控） 性能监控包括页面的加载时间，接口响应时间等，侧面反应了用户体验的好坏。
- 加载时间：页面运行时各个阶段的加载时间；
- TTFB(time to first byte)(首字节时间)：浏览器发起第一个请求到数据返回第一个字节所消耗的时间，这个时间包含了网络请求时间、后端处理时间；
- FP(First Paint)(首次绘制)：首次绘制包括了任何用户自定义的背景绘制，它是将第一个像素点绘制到屏幕的时刻；
- FCP(First Content Paint)(首次内容绘制)：首次内容绘制是浏览器将第一个DOM渲染到屏幕的时间,可以是任何文本、图像、SVG等的时间；
- FMP(First Meaningful paint)(首次有意义绘制)：首次有意义绘制是页面可用性的量度标准；
- LCP(Largest Contentful Paint)：视窗内最大的图片或者文本渲染的时间，当最大的内容块渲染完的时候，基本上主内容都加载完了，与现有的页面加载指标相比，与用户体验的相关性更好；
- FID(First Input Delay)(首次输入延迟)：用户首次和页面交互到页面响应交互的时间；
- 卡顿：指超过50ms的长任务；
- 业务上的统计 PV：page view 即页面浏览量或点击量 UV：指访问某个站点的不同 IP 地址的人数 页面的停留时间：用户在每一个页面的停留时间
