这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天，今天学习的是前端监控SDK开发，将学习的内容记录下来，以便时时巩固记忆。

课程学习内容

• 为什么要学习前端监控
• 前端监控常用性能指标
• 前端常见异常
• 前端监控实战

为什么要学习前端监控

我们日常使用项目时常常会出现打开好慢、交互卡顿、资源加载失败、页面白屏等现象。很多时候都不知道具体的原因，也就没办法针对原因设计相对应的解决办法。前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。

比如：

• 页面打开好慢-----页面某个关键资源渲染太慢
• 交互卡顿-----页面同步计算任务太重，阻塞渲染
• 资源加载失败-----客户端网络状态差，或上游服务节点异常
• 页面白屏-----页面脚本执行失败、关键资源加载失败、请求失败等

前端监控常用性能指标

以用户为中心的性能指标

• 发生了吗？-----FP(首次渲染的时间点)、FCP(首次有内容渲染的时间点)
• 内容有用吗？-----FMP(首次绘制有意义内容的时间点)、SI(衡量页面可视区域加载速度，帮助检测页面的加载体验差异)
• 内容可用吗？-----TTI(测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间)
• 令人愉悦吗？-----FID(测量从用户第一次与页面交互到能够开始处理事件时处理程序所经过的时间)

Http 请求状态码分类

• 100-199-----信息响应
• 200-299-----成功响应
• 300-399-----重定向消息
• 400-499-----客户端错误响应
• 500-599-----服务端错误响应

前端监控流程概述

数据采集-->组转上报-->清洗存储-->数据消费