Amazon CloudWatchで始める エンドユーザー体験のモニタリング

Transcript

1. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 1 © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. Amazon CloudWatch で始める エンドユーザー体験のモニタリング ⽇平 ⼤樹 アマゾンウェブサービスジャパン合同会社 テクニカルアカウントマネージャー 春 の O b s e r v a b i l i t y 祭 り 2 0 2 5 〜 進 化 す る A m a z o n C l o u d W a t c h 基 礎 か ら 最 新 機 能 ま で 完 全 解 説 〜
2. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 2 ⾃⼰紹介 ⽒名 ⽇平 ⼤樹（ひびら たいき） 役職 エンタープライズサポートをご契約頂いたお客様を⽀援する テクニカルアカウントマネージャー 好きな サービス Amazon CloudWatch Amazon EC2
3. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 3 Unbounce (2019), “Think Fast: The Page Speed Report, Stats & Trends for Marketers,” https://unbounce.com/page-speed-report. Nearly 70% of consumers admit that page speed influences their likeliness to buy.
4. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 4 エンドユーザー体験モニタリングの重要性 サービスやアプリの 健全性をチェックする トラブルの原因を 調査する キャパシティを 分析する アプリケーションを 元の状態に回復する ユーザ⾏動を 分析する
5. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 5 フルスタックのオブザーバビリティ戦略 エンドユーザー にとって快 適か︖ 例えば • 表⽰時間 • アクション応答時間 • 購⼊失敗 • JavaScript エラー バックエンドアプリケー ション がどのような状態に あるか︖ 例えば • スロークエリ • インテグレーションヘルス • コンテナ再起動 • レイテンシー ワークロードの完全な把握には、エンドユーザーの体験を含む、 すべての層を紐付け可視化することが重要 Outside-in Inside-out
6. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 6 ユーザー体験のモニタリング方法 • 実ユーザーアクセスの情報を取得して計測 • 中⻑期のユーザー傾向把握⽤途に好適 Real User Monitoring ※ Passive monitoring の⼀種 Amazon CloudWatch RUM • 定常的に⼀定間隔で計測プログラムが アクセスし、パフォーマンスを計測 • 短期のパフォーマンス計測⽤途に好適 • ⼀般に「外形監視」と訳される Synthetic Monitoring ※ Active monitoring の⼀種 Amazon CloudWatch Synthetics
7. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 7 Amazon CloudWatch RUM（Real User Monitoring) アプリのパフォーマンスに関するクライアントサイドのデータをリアルタイムで取得し、 ユーザー体験を最適化 • リアルユーザーのパフォーマンス、ブラ ウザやデバイスの種類、位置、ネット ワークの接続性の問題などを把握可能 • ページの読み込み順序や JavaScript / HTTP レスポンスのエラーなど、パ フォーマンス問題に関する情報を可視化 • 同じ問題の影響下にあるユーザーセッ ション数から優先順位を付けることも容 易 • CloudWatch Logs や X-Ray と連携も 可能
8. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 8 アプリケーションモニター Amazon CloudWatch RUM の動作イメージ CloudWatch RUM Webブラウザ アプリ アプリケーションモニター ドメイン名 Cookie設定 サンプル率 … … JSコードスニペット （RUM Webクライアント） 「アプリケーションモニター」毎に提供 + ナビゲーション イベント JavaScriptエラー /HTTPエラー パフォーマンス テレメトリ モニター毎にON/OFF可 移動、DOMイベント、… ↓モニター毎にON/OFF可 CloudWatch Logs CloudWatch Metrics CloudWatch Alarm アプリのパフォーマンステレメトリ をログとして出⼒可能 X-Ray 名前空間︓「AWS/RUM」 8
9. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 9 Amazon CloudWatch RUM の導入 • 導⼊はアプリケーションモニターを 作成し、コードスニペットをアプリ ケーションに挿⼊するだけ • コードスニペット には TypeScript、JavaScript、 HTML のサンプルコードが⽤意されている • (注) CloudWatch RUM が⽣成するトレース をサーバー側トレースと紐付ける場合は ウェブクライアント の addXRayTraceIdHeader オプション で true を設定 してください。
10. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 10 Amazon CloudWatch Synthetics 実際のユーザートラフィックがなくてもエンドポイントを継続的にテスト • CloudWatch Synthetics は、Web ア プリケーションと API を簡単に監視 できるようにするサービス • 実際のユーザートラフィックがなくて もエンドポイントを継続的にテストが 可能 • 設定したしきい値に基づいてエラーが あればアラート • X-Ray との連携も可能
11. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 11 Amazon CloudWatch Synthetics Canary 全体構成イメージ CloudWatch Logs ロググループ 実⾏ログ S3バケット (同⼀リージョン or 別リージョン) 実⾏ログ (txt) スクリーンショット (png) HAR ファイル (html) Canary 設定 Lambda 関数の ハンドラー & スクリプト (開発⾔語:Node.js/Python) スケジュール (⼀度きり/継続的に実⾏/cron) データストレージ VPC 設定 (オプション) アクセス許可 Headless Chrome (Chromium) 対象サイト・Webアプリ・API (エンドポイントを指定) HTTP or HTTPS CloudWatch Alarms Amazon EventBridge AWS X-Ray メトリクス トレース イベント 実⾏時出⼒ 実⾏時⽣成 実⾏時⽣成 実⾏時⽣成 データ保持期間
12. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 12 Amazon CloudWatch Synthetics Canary 作成 • Blueprint が⽤意されており、 基本的なユースケースにおいては、ノーコード でテストを作成可能 • ハートビートのモニタリング • API Canary • リンク切れチェッカー • Canary レコーダー • GUI ワークフロービルダー • ビジュアルモニタリング • 独⾃のスクリプトを利⽤することもできるた め、既存のテスト資産も利⽤可能
13. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 13 ユースケース • チームではリリースのテスト効率を上げる ために、CloudWatch Synthetics Canary を利⽤し、ユーザーの擬似操作テストを⾃ 動化しています。 • また、実際のユーザーの体験を把握するた めに CloudWatch RUM を導⼊しています。 • 今回、新しい機能をリリースしたところ、 CloudWatch RUM で Javascript エラーが 検知されました。また、CloudWatch Synthetics Canary の失敗を検知したため 調査を開始しました。 AWS Cloud CloudFront ECS Fargate Aurora MySQL S3 ALB VPC End-User Bedrock CloudWatch Synthetics サービス アーキテクチャ CloudWatch RUM
14. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 14 今回、フロントは Nuxt で作成したシングルページアプリケーションです。 RUM Client 導⼊は Package に “aws-rum-web” を追加し、 マネジメントコンソールで表⽰された TypeScript コードスニペットのファイルを plugins 以下に作成するだけです。 Amazon CloudWatch RUM の導⼊ RUM イベントのセッションにユーザーを識別できるように ログイン情報から User ID (uid) をRUM セッション属性に追加しました。
15. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 15 Amazon CloudWatch RUM（Errors） 「uid」を記録しているため、エラーが起きたセッションのメタデータを確認する と、どのユーザーでエラーが起きているかを把握できる
16. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 16 Amazon CloudWatch RUM（Errors） "unminifiedStack": ” TypeError: Cannot read properties of undefined (reading 'idʼ) at (../../../../pages/index.vue:172:0) at Object.r (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:692:15) at Proxy.<anonymous> (../../../../node_modules/vuetify/lib/components/VGrid/VCol.mjs:125:7) at Xo (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6502:15) at renderComponentRoot (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm- bundler.js:5397:25) at Pi.run (../../../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:225:18) at oe (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5258:17) at updateComponent (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5193:22) at n1 (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4701:12) at n1 (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5598:10)" 2025年3⽉18⽇にリリースされたソースマップ対応を利⽤することで、圧縮前 のスタックトレースを確認可能 実際のソースコードと⾒⽐べることで、エラー発⽣箇所を素早く把握できる # pages/index.vue より抜粋 <v-col v-for="(picture, index) in pictures" :key="index”> <v-card link :to="`/pictures/${picture.id}`"> … </v-card> </v-col> picture がundefined なため エラーになって いると分かった
17. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 17 Amazon CloudWatch RUM（Http requests） Http requests タブより、APIサーバーとの通信でエラーが発⽣していることを把握 Http request には トレースID が付与されており、X-Ray から詳細を確認できる
18. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 18 Amazon CloudWatch RUM × AWS X-Ray CloudWatch RUM の トレースID で検索すると、 CloudWatch RUM を含む、リクエストの流れを把握できる
19. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 19 Amazon CloudWatch Synthetics Synthetics Canary テストの失敗を検知 「Traces」タブの「GO to trace map」からエラーリクエストの X-Ray を 確認することが可能
20. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 20 東京リージョンに対し、 「us.anthropic.claude-3-7- sonnet-20250219-v1:0」を 利⽤していることが原因と判明 AWS X-Ray で Dive Deep 指定したモデルが誤っている エラーが発⽣
21. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 21 Application Signals との統合 CloudWatch Synthetics と CloudWatch RUM は Application Signalsと 統合 これにより、サービスの状況を１つのダッシュ ボードですぐに確認が可能
22. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 22 まとめ • このセッションではユーザー体験モニタリングの重要性と CloudWatch を利 ⽤したユーザー体験モニタリングを説明 • Application CloudWatch Synthetics や Application CloudWatch RUM と X-Ray を利⽤した調査を紹介 CloudWatch を利⽤して ユーザー体験を向上しましょう︕
23. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 23 Thank you! © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. Taiki Hibira www.linkedin.com/in/taiki-hibira
24. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 24 [Appendix] 注意 ① CloudWatch Synthetics canary は実際のエンドユーザーの操作ではないため、 CloudWatch RUM は CloudWatch Synthetics canary の操作を記録しません。 ただし、CloudWatch Synthetics canary で利⽤するヘッドレスブラウザの User-Agent を 変更する事で、CloudWatch RUM で記録することが可能です。 今回のユースケースでは Synthetics クラスの async addUserAgent(page, userAgentString) を使⽤し、 CloudWatch Synthetics canary のユーザー操作を CloudWatch RUM に記録しました。 let page = await synthetics.getPage(options); await synthetics.addUserAgent(page, "myuseragent");
25. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 25 [Appendix] 注意 ② • このデモでは フロントエンドに Nuxt を利 ⽤していますが、RUM Client の問題により Http Request のヘッダーにトレース ID が 正しく反映されません。 • 現在、GitHub に PR を提出し、レビュー待 ちです。 • Nuxt をご利⽤の場合はご注意ください。
26. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 26 [Appendix] 注意 ③ "unminifiedStack": ” TypeError: Cannot read properties of undefined (reading 'id’) at (../../../../pages/index.vue:172:0) UnminifyLineFailure: Source map file 0cec3b1/[as default] /_nuxt/DCLV2syQ.js.map not found at xxx-sorcemap for accountId XXX. at Proxy.<anonymous> (../../../../node_modules/vuetify/lib/components/VGrid/VCol.mjs:125:7) at Xo (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6502:15) UnminifyLineFailure: Source map file 0cec3b1/[as fn] /_nuxt/DCLV2syQ.js.map not found at xxx-sorcemap for accountId XXX. at Pi.run (../../../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:225:18) at oe (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5258:17) at updateComponent (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5193:22) at n1 (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4701:12) at n1 (../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5598:10)" } • スタックトレースの内容によって、Unminified が正しく動作しない場合があります。 • この問題はすでにサービスチームにも共有し、対応を予定しています。 • もし問題を発⾒された場合は、ぜひ貴社担当のアカウントチームやサポートへご連絡ください。
27. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 27 [Appendix] 2024 年 〜 2025 年 のアップデート • Amazon CloudWatch Synthetics のアップデート • Amazon CloudWatch Synthetics が canary 実⾏に関する 30 ⽇間の履歴データのサポートを開始 (Mar 15, 2024) • Amazon CloudWatch Synthetics が、関連する AWS Lambda リソースへの Canary タグのレプリケーションのサ ポートを開始 (2024年9⽉19⽇) • Amazon CloudWatch Synthetics が NodeJS で Canary を作成するための Playwright ランタイムをサポート (2024 年11⽉21⽇) • Amazon CloudWatch Synthetics で Canary に関連付けられた Lambda リソースが⾃動的に削除されるように (2024年11⽉21⽇) • Amazon CloudWatch Synthetics が IPv6 サポートを追加 (2025年1⽉30⽇) • Amazon CloudWatch RUM のアップデート • CloudWatch RUM PutRumEvents API が AWS CloudTrail のデータイベントロギングのサポートを開始 (2024年7⽉25 ⽇) • CloudWatch RUM が、パーセンタイル集計と、ウェブバイタルメトリクスによる簡単なトラブルシューティングの サポートを開始 (2024年11⽉19⽇) • Amazon CloudWatch RUM がデータインジェストアクセスに関するリソースベースポリシーのサポートを導⼊(2025年 3⽉3⽇) • CloudWatch RUM が、エラーのデバッグを容易にする JavaScript ソースマップのサポートを開始 (2025年3⽉18⽇) • Amazon CloudWatch RUM が単⼀のアプリケーションモニタによる複数ドメインのモニタリングのサポートを開始 (2025年3⽉18⽇)