使用 Amazon CloudWatch RUM 监控前端性能 - 真实用户监控

只需嵌入 JavaScript 代码片段即可实时收集页面加载时间、Web Vitals、JS 错误和 HTTP 错误。详解通过会话回放和自定义事件可视化前端质量的方法。

CloudWatch RUM 概述

CloudWatch RUM(Real User Monitoring)是实时监控 Web 应用程序前端性能的服务。只需在页面中嵌入 JavaScript 代码片段,即可从实际用户的浏览器自动收集页面加载时间、Web Vitals(LCP、FID、CLS)、JavaScript 错误和 HTTP 错误。与 Synthetics(合成监控)监控预定义路径不同,RUM 收集实际用户的真实体验数据。

Web Vitals 与性能分析

RUM 自动收集 Google 的 Core Web Vitals(LCP: Largest Contentful Paint、FID: First Input Delay、CLS: Cumulative Layout Shift),在仪表板中显示每个页面的性能分数。页面加载的瀑布分析可详细查看 DNS 解析、TCP 连接、TLS 握手、TTFB、内容下载各阶段的耗时,精确定位瓶颈。按设备类型、浏览器、地理位置分段分析,可识别特定环境下的性能问题。 关于前端监控的详细信息,可参考相关书籍 (Amazon)

错误追踪与 X-Ray 集成

自动捕获 JavaScript 错误(未处理的异常、Promise reject)和 HTTP 错误(4xx、5xx 响应),在仪表板中显示错误发生频率、受影响的会话数和堆栈跟踪。启用与 X-Ray 的集成后,可实现从前端请求到后端 API GatewayLambdaDynamoDB 的端到端追踪。前端的慢请求可追溯到后端的哪个服务造成延迟,大幅缩短故障排查时间。

CloudWatch RUM 的费用

CloudWatch RUM 按收集的事件数计费。每 100,000 个事件约 1.00 美元。一个页面浏览会生成多个事件(页面加载、Web Vitals、错误等),以每页面浏览约 5-10 个事件为基准估算成本。降低采样率可减少成本,但需权衡统计精度。100% 采样适合流量较少的站点,大流量站点可设置 10-50% 的采样率。

总结

CloudWatch RUM 是仅通过嵌入 JavaScript 代码片段即可实时监控前端性能和错误的服务。Web Vitals 自动收集、瀑布分析和 X-Ray 集成的端到端追踪可快速定位和解决用户体验问题。