グローバルに展開する SaaS 企業が、React 製のシングルページアプリケーション（SPA）を CloudFront + S3 でホスティングしています。バックエンド API は API Gateway + Lamb

Question

グローバルに展開する SaaS 企業が、React 製のシングルページアプリケーション（SPA）を CloudFront + S3 でホスティングしています。バックエンド API は API Gateway + Lambda で構成されています。
ユーザーから「ページロードが遅い」という苦情がありますが、CloudWatch Synthetics カナリア（合成監視テスト）は問題を検出していません。
実際のユーザーブラウザでの以下のデータを収集し、バックエンドトレースと相関させるために最も適切なソリューションはどれですか？
・Core Web Vitals（LCP・FID・CLS などのページ表示速度指標）
・JavaScript エラー
・HTTP リクエストの失敗

Accepted Answer

正解: CloudWatch RUM を SPA に組み込み、実際のユーザーセッションデータを収集して X-Ray トレースと相関させる。CloudWatch RUM は実際のユーザーブラウザからパフォーマンスデータを収集し、Core Web Vitals（LCP・FID・CLS などのページ表示速度指標）、JavaScript エラー、リソースロード時間を測定します。X-Ray との統合によりフロントエンドからバックエンドまでのエンドツーエンド分析が可能です。

選択肢A の CloudWatch Synthetics カナリアは合成テストであり、実際のユーザーの地域差・ブラウザ差異といった体験を反映しません。

選択肢B の CloudFront アクセスログはサーバー側データのみで、ブラウザ側の Core Web Vitals や JavaScript エラーは把握できません。

選択肢D の Lambda@Edge はリクエスト/レスポンスのサーバー側タイミング計測には利用できますが、ブラウザ上の JavaScript エラーや Core Web Vitals の収集は不可能であり、実ユーザーのフロントエンド体験を把握する手段として不適切です。

Answer

CloudWatch Synthetics Canary のスクリプトをより詳細なユーザー動作シナリオを反映するよう更新し、合成テストの精度を高める — CloudWatch Synthetics カナリアは合成テストであり、実際のユーザーの地域差・ブラウザ差異といった体験を反映しません。

Answer

CloudFront のアクセスログを CloudWatch Logs Insights でクエリ・分析し、レイテンシーパターンを特定する — CloudFront アクセスログはサーバー側データのみで、ブラウザ側の Core Web Vitals や JavaScript エラーは把握できません。

Answer

Lambda@Edge を使用してリクエスト・レスポンスのタイミングをキャプチャし、カスタムメトリクスとして CloudWatch に発行する — Lambda@Edge はリクエスト/レスポンスのサーバー側タイミング計測には利用できますが、ブラウザ上の JavaScript エラーや Core Web Vitals の収集は不可能であり、実ユーザーのフロントエンド体験を把握する手段として不適切です。

解説

解説