前端监控 SDK 开发｜ 青训营笔记

LeslieChueng
53 阅读1分钟

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

课程重点

  1. 引入前端监控的概念
  2. 介绍前端监控的性能指标与异常
  3. 实战:封装用于监听性能指标与前端异常的监听器
  4. 实战:封装一个有完整上报能力的sdk

详细知识点介绍

引入前端监控的概念

image.png

什么是前端监控

image.png

为什么需要前端监控

image.png

image.png

image.png

image.png

前端监控到底发生了什么

image.png

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

image.png

web性能标准的诞生

image.png

传统的性能指标

image.png

image.png

image.png

以用户为中心的性能指标

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

前端常见异常

image.png

image.png

image.png

image.png

image.png

监控前端性能与异常

image.png

image.png

Performance

PerformanceObserver

image.png

性能监控实战演练

image.png

image.png

addEventListener

error

unhandledrejection

js错误监控实战演练

image.png

image.png

静态资源错误监控

image.png

image.png

xhr

fetch

请求错误监控

image.png

image.png

封装一个通用的sdk

image.png

image.png

image.png

image.png

Navigator.sendBeacon()

image.png

按需加载监控能力

image.png

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

image.png

image.png

image.png

image.png

image.png

image.png

image.png

web.dev讲述累积布局偏移（CLS）

image.png

引用参考

前端监控 SDK 开发

avatar
文章
阅读
粉丝