如何做好前端监控方案

最新推荐文章于 2025-06-10 11:13:35 发布

weixin_43843897

最新推荐文章于 2025-06-10 11:13:35 发布

阅读量1k

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43843897/article/details/145730852

要做好前端监控方案，需要从多个方面入手，确保监控的全面性、准确性和实时性。以下是一个详细的前端监控方案：

一、明确监控目标

前端监控的主要目标包括：

稳定性监控：监控前端应用的稳定性，如JS执行错误、Promise异常、资源加载异常（如JS、CSS资源）、接口请求异常（如AJAX、fetch请求）等。
性能监控：监控前端应用的性能表现，确保用户获得良好的体验。
数据监控：通过埋点统计用户行为数据，如PV（页面浏览量）、UV（独立访客数）、用户停留时间、用户来源、页面操作行为等，为产品决策提供依据。

二、选择监控指标

根据监控目标，确定需要监控的具体指标。这些指标应全面、细粒度、易于量化，并符合业务需求。常见的监控指标包括：

性能指标：
- FP（First Paint）：白屏时间，表示网页上的第一个像素点绘制的时间。
- FCP（First Contentful Paint）：首屏时间，首次内容绘制时间。
- LCP（Largest Contentful Paint）：最大内容绘制时间，主要内容对用户的可见时间。
- FID（First Input Delay）：首次输入延时，用户可在网页输入文字、点击按钮的时间。
- CLS（Cumulative Layout Shift）：累计布局位移，衡量页面视觉稳定性的指标。
- TTI（Time To Interactive）：可交互时间，应用在视觉上都已渲染完成，可以响应用户的输入。
- FPS（Frames Per Second）：每秒帧率，动画相关的指标。
- DCL（DOMContentLoaded）：HTML文档被完全加载和解析完成之后触发的事件时间。
- 首屏加载时间、白屏时间、请求的响应时间、静态资源整体下载时间、页面渲染时间等。

//可以借助浏览器给我们提供的performance API(window.performance)来计算 
const timing = performance.timing // DNS 解析耗时 
timing.domainLookupEnd - timing.domainLookupStart // TCP 连接耗时 
timing.connectEnd - timing.connectStart // SSL 安全连接耗时 
timing.connectEnd - timing.secureConnectionStart // 网络请求耗时
timing.responseStart - timing.requestStart // 数据传输耗时 
timing.responseEnd - timing.responseStart // DOM 解析耗时 
timing.domInteractive - timing.responseEnd // 资源加载耗时 
timing.loadEventStart - timing.domContentLoadedEventEnd /* 关键性能指标 */ // 首包时间 
timing.responseStart - timing.domainLookupStart // 白屏时间
timing.responseStart - timing.navigationStart // 首次可交互时间 
timing.domInteractive - timing.requestStart // HTML 加载完成时间， 即 DOM Ready 时间 
timing.domContentLoadedEventEnd - timing.navigationStart // 页面完全加载时间 
timing.loadEventStart - timing.navigationStart

错误指标：
- JS代码运行错误、语法错误等。
- AJAX请求错误。
- 静态资源加载错误。
- Promise异步函数错误。
业务指标：
- PV：页面浏览量，用户访问页面的次数。
- UV：独立访客数，访问某个站点的不同IP的人数。
- 用户在每个页面的停留时间。
- 用户来源。
- 用户页面操作行为，如点击按钮、跳转链接等。