前端可观测性:Web Vitals、RUM 与错误监控核心指标`LCP`:最大内容绘制`INP`:交互到下一次绘制(替代 FID)`CLS`:累积布局偏移采集示例import { onLCP, onINP, onCLS } from 'web-vitals'; function send(name, value) { const payload = JSON.stringify({ name, value, ts: Date.now() }); navigator.sendBeacon('/rum', payload); } onLCP(({ value }) => send('LCP', value)); onINP(({ value }) => send('INP', value)); onCLS(({ value }) => send('CLS', value)); 错误监控window.onerror = function (message, source, lineno, colno, error) { navigator.sendBeacon('/error', JSON.stringify({ message, source, lineno, colno })); }; window.addEventListener('unhandledrejection', e => { navigator.sendBeacon('/error', JSON.stringify({ reason: String(e.reason) })); }); 采样与隐私对高频上报实施采样,减少噪音与成本对可能涉及隐私的数据进行脱敏或不采集总结结合 Web Vitals 与 RUM 可构建完整的用户体验度量体系,配合错误监控实现快速定位与持续改进。

发表评论 取消回复