前端性能监控体系搭建：从 RUM 到可观测性

性能优化不能靠「感觉」，需要数据支撑。本文介绍如何搭建一套前端可观测性体系，从真实用户监控（RUM）起步。

为什么要 RUM

实验室测试（Lighthouse）只能反映理想环境，真实用户的网络、设备千差万别。RUM 从真实用户浏览器采集数据，反映真实体验。

采集哪些指标

核心指标分三类：

性能指标：LCP、INP、CLS，以及首字节、DOM 就绪等自定义指标；
错误指标：JS 异常、资源加载失败、接口错误；
业务指标：页面跳失率、关键操作耗时、转化漏斗。

用 Web Vitals 库快速接入

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP((metric) => report('lcp', metric.value));
onINP((metric) => report('inp', metric.value));
onCLS((metric) => report('cls', metric.value));

配合 PerformanceObserver 采集长任务、资源耗时等更多细节。

上报与存储

数据通过 navigator.sendBeacon 或定时批量上报，避免阻塞。后端可选择自建（时序数据库 + 看板）或使用成熟的 APM 平台（如 Sentry、Datadog）。

让数据可行动

采集只是开始，关键是基于数据行动：

设置阈值告警，指标劣化及时通知；
按版本对比，定位是哪次发布引入的性能回退；
结合构建信息，把指标关联到具体代码。

结语

可观测性的价值不在于「有数据」，而在于「数据能驱动决策」。从核心指标开始，逐步扩展，别让监控本身成为负担。