運用管理

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

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

約 2 分で読めます

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 ドル) が別途発生します。

まとめ

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分散アプリケーションのリクエストをエンドツーエンドで追跡・可視化するトレーシングサービスで、マイクロサービス間のレイテンシやエラーのボトルネックを特定するAWS X-Ray で実現する分散トレーシング - マイクロサービスのパフォーマンス分析マイクロサービスのリクエスト全経路をサービスマップで可視化し、フィルター式で問題トレースを絞り込む。OpenTelemetry との統合パターンも紹介します。AWS X-Ray分散アプリケーションのリクエストをトレースし、パフォーマンスのボトルネックを特定するサービスAmazon CloudWatch Internet Monitor でインターネットパフォーマンスを監視 - 可用性とレイテンシの可視化Internet Monitor によるインターネット経由のアプリケーションパフォーマンス監視、ISP 別の可用性分析、ヘルスイベントの検出を解説します。