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

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

CloudWatch RUM 概述

CloudWatch RUM(Real User Monitoring)是实时监控 Web 应用程序前端性能的服务。只需在页面中嵌入 JavaScript 代码片段,即可从实际用户的浏览器自动收集页面加载时间、Web Vitals(LCP、FID、CLS)、JavaScript 错误和 HTTP 错误。Synthetic Monitoring(CloudWatch Synthetics)是通过脚本定期进行的合成测试,而 RUM 的不同之处在于收集实际用户会话的数据。可以设置采样率来控制数据收集量,既可以收集全部会话的 100%,也可以为了削减成本只收集 10%。

Web Vitals 与性能分析

RUM 自动收集 Google 的 Core Web Vitals(LCP: Largest Contentful Paint、FID: First Input Delay、CLS: Cumulative Layout Shift),并在仪表板中显示每个页面的性能分数。通过页面加载的瀑布分析,可视化 DNS 解析、TCP 连接、TLS 握手、TTFB(Time to First Byte)、内容下载各阶段的耗时。通过按浏览器、按 OS、按地区对比性能,可以识别仅在特定环境中发生的性能问题。还可以发送自定义事件,追踪按钮点击、表单提交、页面跳转等用户操作。

错误追踪与 X-Ray 集成

自动捕获 JavaScript 错误(未处理的异常、Promise 的 reject)和 HTTP 错误(4xx、5xx 响应),并在仪表板中显示错误的发生频率、受影响的会话数和堆栈跟踪。启用与 X-Ray 的集成后,可以获取从前端请求到后端 API Gateway、Lambda、DynamoDB 的端到端追踪。可以在单一追踪中追溯用户浏览器中发生的错误源自后端的哪个服务,从而大幅提高定位问题根本原因的效率。通过与 Cognito 的集成,还可以识别已认证用户的会话,详细分析特定用户的体验。

CloudWatch RUM 的费用

CloudWatch RUM 的费用是基于收集的事件数的按量计费。每 100,000 个事件约 1.00 美元(截至 2026 年 8 月)。由于 1 次页面浏览会生成多个事件(页面加载、Web Vitals、错误等),因此需以每次页面浏览约 5-10 个事件为基准估算成本。降低采样率可以削减成本,但会与统计精度形成权衡。启用 X-Ray 追踪时,会另外产生 X-Ray 的费用(每条追踪约 0.000005 美元)。

导入与采样设计

只需在页面中嵌入用于测量的代码,即可开始使用 RUM。即使应用程序通过 CloudFront 分发,嵌入代码片段后也能启用对实际用户的测量。应在精度与成本之间取得平衡来决定收集会话的比例(采样率)。对于流量大的网站,全量收集费用高昂,因此即使将收集限定在一定比例,也能充分把握趋势。反之,流量少时需设置较高的比例,以确保统计上的可信度。需根据网站规模和分析目的,设计合适的收集量。

告警与质量目标的设置

需将 RUM 收集的指标与 CloudWatch 的警报结合使用。如果设置告警,例如在显示速度、输入响应等 Web Vitals 恶化时发出通知,或在错误率超过一定水平时发出提醒,就能迅速察觉用户体验的下降。对于重要页面,需设定质量目标值,并持续监控质量是否低于该目标值。在部署前后对比指标,确认变更没有对体验造成不良影响,也是有效的做法。将数值可视化,并依据明确的基准进行运维,就能保持稳定的质量。

隐私方面的考虑

既然要收集实际用户的数据,对隐私的考虑就不可或缺。需在设计上确保收集的信息不包含可识别个人的数据,并将其限制在必要的范围内。还需根据地区的法规和本公司的政策,考虑提供就测量征得用户同意的机制。需规定所收集数据的保留期限,不再需要时予以删除。在隐私政策中明确说明收集什么、出于什么目的并保持透明,有助于赢得信任。需注意不要让出于便利的测量损害用户的权利。

在改进循环中的运用

只有将收集的数据转化为实际的改进,RUM 的价值才能得到发挥。需找出哪个页面的哪项指标较差,并从影响大的指标开始优先采取措施。如果按浏览器、地区和设备查看差异,也能查明仅在特定环境中出现的问题。部署改进后,需确认指标是否有所改善,以验证效果。如果将错误的发生位置一直追溯到后端的追踪,就能找到根本原因。持续运转测量、分析、改进、验证的循环,支撑着前端质量的持续提升。

总结

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

参考资料(AWS 官方)

本页的第一手信息来源是 AWS 官方网站及官方文档。最新的规格与价格请以下列官方页面为准。

如本页内容与官方文档不一致,请以官方文档为准。

分享