这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天。

本篇笔记是对今天青训营的直播课前端监控SDK开发课程的归纳总结及个人感悟。

一，前端监控

是什么：

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

为什么：

• 从用户的角度：
• 网页打开速度慢
• 网页卡顿
• 图片无法正常展示
• 页面无法正常加载

从开发者角度解答：

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

通过前端监控回溯 → 前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因

监控了什么：

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

二，前端常见异常

• 静态资源错误：在拉取加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
• 请求异常（请求响应状态码>=400）
• JS错误
• 白屏异常（通常通过判断DOM树的结构来初略判断）