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

什么是前端监控

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

为什么需要前端监控

前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析和归因 研究表明,性能不佳会对业务目标产生负面影响,例如,BBC发现他们的网站预加载时间每增加1秒,他们就会失去10%的用户

前端监控到底监控了什么

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

如何分析和调优性能瓶颈

衡量

• Lighthouse

• 阿里云的ARMS

• New Relic

采集过程:以阿里云的ARMS为例,采集通常是由一个JavaScriptSDK来完成的 采集指标

FCP: 首次绘制内容的耗时 TTI: 页面可交互的时间 PageLoad: 页面完全加载的时间 FPS: 前端页面帧率 静态资源及API请求成功率

排查

FCP首次绘制内容的耗时

• Loading图标
• 骨架屏
• SSR服务端渲染

TTI页面可交互的时间

• 核心内容同步加载
• 非核心内容异步加载
• 图片懒加载

PageLoad 页面完全加载的时间

异步加载

FPS 前端页面帧率

• reactwindow
• 渲染优化

静态资源及API请求成功率

• 静态资源能用CDN就用CDN,大幅提高静态资源加载的成功率
• 域名解析时报可以采用静态资源域名自动切换的方案
• HTTPS

收益

通过TP数 TP50,TP90来具体量化技术转化效果

前端常见异常

• 静态资源错误
• 请求异常
• JS错误
• 白屏异常

HTTP 状态码

常用的

• 200 - 请求成功
• 301 - 资源（网页等）被永久转移到其它URL
• 404 - 请求的资源（网页等）不存在
• 500 - 内部服务器错误

分类

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

封装一个通用的SDK流程

• 1.数据采集
• 2.组装上报
• 3.清洗存储
• 4.数据消费