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

12. 前端监控 SDK 开发

12.1 开篇：为什么我们要聊前端监控

什么是前端监控？

为什么需要前端监控？

前端监控到底监控了什么？

1. 性能指标
2. 异常事件
3. 用户行为

12.2 概述：前端监控之常用性能指标

传统的性能指标

以用户为中心的性能指标

12.3 概述：前端监控端之前常见异常

静态资源错误

请求异常

JS错误

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

白屏异常

12.4 小试牛刀：监控前端性能与异常

developer.mozilla.org/zh-CN/docs/…

性能指标监控

码上掘金，实战

code.juejin.cn/pen/7173286…

JS错误监控

developer.mozilla.org/zh-CN/docs/…

码上掘金，实战

code.juejin.cn/pen/7173303…

静态资源错误监控

developer.mozilla.org/zh-CN/docs/…

码上掘金，实战

code.juejin.cn/pen/7173310…

请求异常监控

developer.mozilla.org/zh-CN/docs/…

码上掘金，实战

code.juejin.cn/pen/7173328…

12.5 渐入佳境：封装一个通用的sdk

临门一脚：数据上报

专为前端监控打造的请求函数

developer.mozilla.org/zh-CN/docs/…

按需加载监控能力

code.juejin.cn/pen/7173343…

12.6 课后探索：让你的sdk更健壮

更多性能指标计算算法

请试着实现FMP,CLS,TTL等性能指标的计算方法

关注请求性能

FMP

CLS

关于如何CLS的计算细节和原理可以查看web.dev/cls/

TTL