前端可观测性：内容与原因

后端可观测性已经发展成熟：日志记录事件，指标跟踪资源使用情况，分布式追踪跟踪请求在微服务之间的流转。Datadog、Prometheus 和 Jaeger 等工具已广泛部署在生产环境的后端系统中。

前端可观测性是一门较新的学科，用于跟踪用户与您的 React 应用交互时的体验。它包括记录用户交互、测量渲染性能、观察网络请求，以及捕获浏览器中的 JavaScript 错误。

您的后端可能看起来完全健康——错误率低、数据库查询速度快——但用户却可能正在经历缓慢、卡顿或损坏的界面。前端可观测性通过测量用户实际经历的情况，而不只是服务器的运行情况，弥合了这一差距。

前端追踪记录由用户操作触发的一连串事件：点击按钮、触发 React 状态更新、从 API 获取数据，以及渲染结果。该追踪将用户意图与执行相关操作的组件及其发出的网络调用关联起来。

后端指标在前端的对应概念是网页核心指标：LCP（最大内容绘制）衡量加载速度，INP（交互到下一次绘制）衡量响应能力，CLS（累积布局偏移）衡量视觉稳定性。这些正是 Google 用于 Core Web Vitals 排名的指标。

前端日志记录浏览器中的错误、警告和信息事件。主要信号包括 console.error 调用、未处理的 JavaScript 异常（window.onerror）、未处理的 Promise 拒绝（window.onunhandledrejection），以及 React 错误边界捕获的错误。

真实用户监控会从生产环境中真实用户的浏览器收集可观测性数据。RUM 会自动为浏览器添加监测功能，在事件发生时捕获性能计时、错误和用户交互。这能为您提供任何合成测试都无法复现的真实世界数据。

合成监控使用自动化工具（Lighthouse CI、Playwright、WebPageTest）在受控环境中模拟用户交互。它具有可预测性，能够在回归问题影响用户之前将其发现，但无法反映真实用户设备、网络和使用模式的多样性。

多种商业工具为 React 提供开箱即用的 RUM：Datadog RUM（与 Datadog APM 集成，提供全栈追踪）、New Relic Browser，以及 Sentry Performance（在一个 SDK 中捕获错误和性能数据）。这些工具集成速度快，但规模扩大后成本较高。

OpenTelemetry 是 CNCF 的一个项目，定义了用于收集追踪、指标和日志的厂商中立 API 与 SDK。通过使用 OpenTelemetry 添加监测功能，您可以拥有自己的数据，并将其发送到任何兼容的后端——Jaeger、Grafana Tempo、Honeycomb、Datadog 或您自己的数据管道。

没有前端可观测性时，缓慢的用户体验对工程团队来说几乎是不可见的。您可能会看到客户支持工单激增或转化率下降，但如果没有来自浏览器的追踪和指标，定位根本原因就只能靠猜测。

真实用户监控（RUM）与合成监控之间的关键区别是什么？

前端可观测性将三大支柱——追踪、指标和日志——应用于浏览器。RUM 捕获真实用户体验，而合成监控能够及早发现回归问题。网页核心指标（LCP、INP、CLS）是关键的前端指标。OpenTelemetry 提供了用于收集和导出这些数据的厂商中立标准，让您可以自由选择可观测性后端。