運用管理

Amazon CloudWatch RUM でフロントエンドのパフォーマンスを監視 - リアルユーザーモニタリング

JavaScript スニペットを埋め込むだけでページロード時間・Web Vitals・JS エラー・HTTP エラーをリアルタイム収集する。セッションリプレイとカスタムイベントでフロントエンドの品質を可視化する方法を解説します。

約 3 分で読めます

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 との統合で、認証済みユーザーのセッションを識別し、特定ユーザーの体験を詳細に分析することも可能です。 フロントエンド監視の実践についてはAmazon の関連書籍も参考になります。

CloudWatch RUM の料金

CloudWatch RUM の料金は収集したイベント数に基づく従量課金です。100,000 イベントあたり約 1.00 ドルです。1 つのページビューで複数のイベント (ページロード、Web Vitals、エラーなど) が生成されるため、1 ページビューあたり約 5-10 イベントを目安にコストを見積もります。サンプリングレートを下げることでコストを削減できますが、統計的な精度とのトレードオフになります。X-Ray トレースを有効にした場合、X-Ray の料金 (トレースあたり約 0.000005 ドル) が別途発生します。

導入とサンプリング設計

RUM の導入は、計測用のコードをページに埋め込むだけで始められます。アプリの配信に CloudFront を使っている場合も、スニペットを組み込むことで実ユーザーの計測が有効になります。収集するセッションの割合 (サンプリングレート) は、精度とコストのバランスで決めます。トラフィックが多いサイトでは全件収集は費用がかさむため、一定割合に絞っても傾向は十分に把握できます。逆にトラフィックが少ない場合は高めの割合にして、統計的な信頼性を確保します。サイトの規模と分析目的に応じて、適切な収集量を設計します。

アラートと品質目標の設定

RUM で集めた指標は、CloudWatch のアラームと組み合わせて活用します。表示速度や入力応答などの Web Vitals が悪化したら通知する、エラー率が一定を超えたら知らせる、といったアラートを設定すれば、ユーザー体験の劣化に素早く気づけます。重要なページについては品質の目標値を定め、それを下回らないか継続的に監視します。デプロイの前後で指標を比較し、変更が体験に悪影響を与えていないかを確認することも有効です。数値を見える化し、基準を持って運用することで、品質を一定に保てます。

プライバシーへの配慮

実ユーザーのデータを収集する以上、プライバシーへの配慮は欠かせません。収集する情報に個人を特定しうるデータが含まれないよう設計し、必要な範囲にとどめます。地域の規制や自社のポリシーに応じて、計測について利用者の同意を得る仕組みを用意することも検討します。収集したデータの保持期間を定め、不要になったら削除します。何をどの目的で集めているかをプライバシーポリシーで明示し、透明性を保つことが信頼につながります。利便性のための計測が、利用者の権利を損なわないよう注意します。

改善サイクルへの活用

RUM の価値は、集めたデータを実際の改善につなげてこそ発揮されます。どのページのどの指標が悪いかを特定し、影響の大きいものから優先的に手を打ちます。ブラウザや地域、端末ごとの違いを見れば、特定の環境でだけ起きる問題も突き止められます。改修をデプロイしたあとに指標が改善したかを確認し、効果を検証します。エラーの発生箇所をバックエンドのトレースまで辿れば、根本原因にたどり着けます。計測・分析・改善・検証のサイクルを回し続けることが、フロントエンド品質の継続的な向上を支えます。

まとめ

CloudWatch RUM は JavaScript スニペットの埋め込みだけでフロントエンドのパフォーマンスとエラーをリアルタイム監視するサービスです。Web Vitals の自動収集、ウォーターフォール分析、X-Ray 連携によるエンドツーエンドトレースで、ユーザー体験の問題を迅速に特定・解決します。

関連するサービス

Amazon CloudWatch RUMWeb アプリケーションのリアルユーザーモニタリングでクライアント側のパフォーマンスとエラーを収集するサービスAmazon CloudWatchAWS リソースとアプリケーションの監視・ログ管理・アラームを提供するサービスAmazon CloudFront世界中のエッジロケーションからコンテンツを高速配信する CDN サービス

関連する記事

Amazon Managed Grafana で構築する統合オブザーバビリティダッシュボードCloudWatch・Prometheus・OpenSearch のデータソースを統合し、マルチソースのオブザーバビリティダッシュボードを構築する手法を紹介します。AWS Certificate Manager で自動化する SSL/TLS 証明書管理 - 発行からローテーションまでACM によるパブリック証明書の無料発行、DNS 検証、自動更新、ALB ・ CloudFront へのデプロイを解説します。AWS Amplify で始めるフルスタック Web アプリ開発 - Git 連携デプロイとバックエンド構築GitHub 連携でブランチごとの自動デプロイ環境を構築し、Backend Gen 2 で認証・API・ストレージを TypeScript で定義する。Next.js の SSR にも対応します。

同じテーマの記事

AWS の内部時刻同期の仕組み - Amazon Time Sync Service とうるう秒スミアリングの設計AWS が独自に運用する Amazon Time Sync Service の仕組み、GPS と原子時計による高精度時刻源、うるう秒をスミアリングで吸収する設計判断、分散システムにおける時刻同期の重要性を解説します。AWS AppFabric で SaaS 監査ログを集約 - OCSF 標準化と Security Lake 統合AppFabric による SaaS アプリケーションの監査ログ収集、OCSF 形式への標準化、分析パイプラインの構築を解説します。AWS AppConfig で実装するフィーチャーフラグ - 安全な設定デプロイとロールバックコードデプロイとは独立した設定変更を、Linear・Exponential 戦略で段階的にロールアウトする。CloudWatch アラーム連動の自動ロールバックで安全性を確保します。アーキテクチャレビュー - AWS Well-Architected Tool でワークロードを体系的に評価するAWS Well-Architected Tool を使ったワークロードのアーキテクチャレビューを解説。6 つの柱に基づく評価、改善計画の策定、カスタムレンズの活用を紹介します。監査ログの設計と運用 - CloudTrail による API アクティビティの完全記録AWS CloudTrail を活用した監査ログの設計手法を解説し、API アクティビティの記録、S3 への長期保存、Config との連携によるコンプライアンス対応を紹介します。AWS の障害報告書 (COE) から学ぶ分散システムの教訓 - 過去の大規模障害が変えた設計原則AWS が公開した Correction of Errors (COE) と障害報告書から、S3 障害、us-east-1 の DNS 障害、Kinesis 障害など過去の大規模インシデントの根本原因と、それが AWS の設計原則をどう変えたかを解説します。タグの設計が運用を決める - AWS リソースタグ戦略の雑学と実践的な命名規則AWS リソースタグが単なるラベルではなくコスト配分、アクセス制御、自動化の基盤である理由、タグキーの命名規則、タグの上限 50 個の使い方、タグポリシーによるガバナンスを解説します。AWS のサービスクォータはなぜ存在するのか - 共有インフラを守るマルチテナント設計AWS のサービスクォータ (旧サービス制限) が単なる制約ではなく、マルチテナント環境で他の顧客を守るための設計であることを、ノイジーネイバー問題、ソフトリミットとハードリミットの違い、引き上げ申請の裏側から解説します。

内容が近い記事・サービス

AWS X-Ray で実現する分散トレーシング - マイクロサービスのパフォーマンス分析マイクロサービスのリクエスト全経路をサービスマップで可視化し、フィルター式で問題トレースを絞り込む。OpenTelemetry との統合パターンも紹介します。AWS X-Ray分散アプリケーションのリクエストをエンドツーエンドで追跡・可視化するトレーシングサービスで、マイクロサービス間のレイテンシやエラーのボトルネックを特定するAmazon CloudWatch Internet Monitor でインターネットパフォーマンスを監視 - 可用性とレイテンシの可視化Internet Monitor によるインターネット経由のアプリケーションパフォーマンス監視、ISP 別の可用性分析、ヘルスイベントの検出を解説します。Amazon CloudWatch Internet Monitor - ISP 障害を即座に検出しユーザー影響を可視化するCloudWatch Internet Monitor は、インターネット経由でアプリケーションにアクセスするエンドユーザーの可用性とパフォーマンスを、ISP・都市・ASN 単位で継続的に監視するサービスである。AWS のグローバルネットワーク観測データを活用し、パフォーマンス劣化の検出から DNS ルーティング切り替えの判断支援までを一貫して提供する。