这是我参与「第五届青训营」笔记创作活动的第十二天

什么是前端监控

前端监控就是尽可能地采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费

为什么需要前端监控

• 打开慢——页面某个关键资源渲染太慢。
• 交互卡——页面同步计算任务太重，阻塞渲染。
• 资源加载失败——客户端网络状态差，或上游服务节点异常。
• 页面白屏——页面脚本执行失败、关键资源加载失败、请求失败等。 当我们的网页有了前端监控的能力，前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差的页面进行分析与归因。

前端监控指标

• 性能指标
• 异常事件
• 用户行为

性能指标

传统性能指标主要依赖Navigation Timing或者Navigation Timing2，通过记录一个文档从发起请求到加载完毕的各个阶段的性能好十，以加载速度来衡量性能。

用户体验	指标
发生了吗	FP(first paint)，FCP(first contentful paint
内容有用吗	FMP(first meaningful paint)，SI(speed index)
内容可用吗	TTI(time to interactive)
令人愉悦吗	FID(first input delay)

常见异常

• 静态资源错误 在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上

• 请求异常 HTTP请求状态码分类

  • 100-199-------->信息响应
  • 200-299-------->成功响应
  • 300-399-------->重定向消息
  • 400-499-------->客户端错误响应
  • 500-599-------->服务端错误响应
  • 请求异常=请求响应状态码>=400
  • 对于通过异步请求拉取的静态资源错误也可以选择归纳到请求异常

• JS错误 在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点

• 白屏异常 没有标准化的监听方法，更考验前端监控开发者的功底

总结

这次课让我对前端监控有了了解，对前端的认识又加深了，获益匪浅。