前端可观测性：Web Vitals、RUM 与错误监控

前端可观测性：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 可构建完整的用户体验度量体系，配合错误监控实现快速定位与持续改进。