前端监控
-
写在前面：前端监控就是监控前端的一切行为，可以简单分为数据监控，性能监控，异常监控
-
前端监控的作用
- 更快的发现问题（通过设置阈值以告警，帮助我们在线上事故意外情况下可以及时定位）
- 帮助我们分析线上数据，判断产品的收益等（比如某个新项目用户的访问次数，用户曝光次数点击次数等，通过数据帮助我们更好的拓展业务）
几个指标
-
用户体验层几个性能指标（性能监控）
TTFB(Time To Firstbyte / 首字节时间) 指浏览器发起请求后到数据返回第一个字节所消耗的时间，包括网络请求时间和后端处理时间 FCP(First Content Paint / 首次内容绘制) 指浏览器将第一个DOM渲染上屏幕去的时间，可以是任何的文本，图片等 LCP(Large Contentful Paint / 最大内容渲染) 指视口中页面的最大元素的渲染时间 FID(First Input Delay / 首次输入延迟) 指用户首次页面交互到页面响应交互的时间 页面卡顿： FPS(Frame per Second / 每秒显示帧数) 静态资源下载时间等
FPS详解： 网页的FPS就是网页在渲染这些变化时的帧率，帧率越高，用户体验越好，反之卡顿。
对于开发者，可以使用chrome的chrome DevTools中的Performance录制页面渲染进行查看,蓝色表示HTML,紫色表示样式，黄色表示脚本，绿色表示媒体资源，灰色表示其他资源
-
对于 FPS，最优的帧率是 60，即16.5ms 左右渲染一次。
*Frames 为每一帧渲染所花的时间* -
代码层的指标（异常监控）
JS/TS 执行错误 接口报错 页面空白 -
业务层面（数据监控）
PV: 页面浏览量 / 点击量 UV: 访问某个站点的不同ip数量,一天内同个访客多次访问仅计算一个UV 停留时间 用户从哪个入口访问该网页
流程
-
前端埋点 - 数据采集 - 实时数据传输 - 数据传输 - 可视化（用于分析） / 告警
埋点的方案：
手动埋点（代码埋点，人工成本高，不方便审查）:嵌入到代码中进行埋点，如点击事件，曝光事件 无埋点（自动埋点，不是不埋点，而是对所有事件进行全埋点，简单的加载一段已经定义好的SDK代码，给服务器和数据传输带来巨大压力）:前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来，上报数据，由后端来过滤和计算有用的数据
