AWSを用いたフロント エンドモニタリング入門 ΢ΣϧεφϏגࣜձࣾ ਫഅ ୓໵

自己紹介 ウェルスナビ株式会社 ・水馬 拓也 (みずま たくや) ・全自動資産運用サービス の開発に従事 ・前職 Amazon Web Service Japan / Solutions Architect https://tech.wealtnavi.com Twitter: @mizuma_t [好きな技術] ・AWS Amplify / Serverless 関連 ・React.js / Typescript / Next.js

アジェンダ Ø サーバサイドモニタリング とフロントエンドモニタリングの違い Ø AWSサービスを用いたフロントエンドモニタリング Ø Amplify Libraries を用いた CloudWatch Logs へのログ出力 Ø Amazon CloudWatch RUM を用いたユーザエクスペリエンスモニタリング

サーバサイドモニタリングと フロントエンドモニタリングの違い

サーバサイドモニタリングとフロントエンドモニタリングの違い Ø ユーザ毎にアプリケーションが動作する環境が異なる → 環境ごとにアプリケーションの挙動が異なる可能性について考慮する必要がある → 全てのユーザが最新versionのブラウザや端末を使っているわけではない Ø フロントエンドで発生したエラーやイベント情報を*確実に*運用者に届ける 必要がある → 適切にエラーハンドリングが行われなかった場合、エラーが発生したことをサービス運用者が検 知できない可能性がある Ø フロントエンドに適切な権限を与える必要がある → 仮に Amazon CloudWatch に出力するとして、あらゆるロググループにアクセスさせてはいけない

フロントエンドモニタリングのための AWSサービス

① Amplify Libraries を用いたエラーログ のモニタリング

エラーログのモニタリング Ø エラーログモニタリングの目的 アプリケーション内で発生した異常を運用者が確実に検知できること l ログの出力 → Amazon CloudWatch Logs → Amplify Libraries → 例1) サーバサイドから5xxレスポンスを受け取った → 例2) サードパーティライブラリが意図せぬエラーを出力した Ø 用いるAWSサービスと用途 l 権限の付与 → Amazon Cognito Identity Pool l 運用者への通知 → AWS ChatBot から Slack に通知

エラーログのモニタリング

エラーログのモニタリング ①アプリケーションへのアクセス

エラーログのモニタリング ② Cloudwatch Logs出力のため の権限払い出し

エラーログのモニタリング ③ ログ出力 ERROR! Amplify Libraries

エラーログのモニタリング ④ Slack通知

エラーログの出力処理 ~ ログ設定 ~

エラーログの出力処理 ~ ログ設定 ~ CloudWatch Log Group に関する情報

エラーログの出力処理 ~ ログ設定 ~ Cognito Identity Pool Id に関する情報

エラーログの出力処理 ~ ログ出力 ~

エラーログの出力処理 ~ ログ出力 ~ ログの prefix と ログレベルを指定

エラーログの出力処理 ~ ログ出力 ~ Cloudwatch 拡張機能の追加

エラーログの出力処理 ~ ログ出力 ~ ログメッセージをCloudWatch に出力

CloudWatch Logs からエラーログを確認 指定したロググループ 指定したログストリーム ログレベル / prefix / メッセージ

エラーログの出力処理 ~ 通知~ CloudWatch Alarm AWS Chatbot メトリクスフィルターから特定の文字列でフィルタリング

エラーログの出力処理 ~ 通知~ CloudWatch Alarm AWS Chatbot メトリクスフィルターから特定の文字列でフィルタリングしSlackに通知 “ERROR” という文字列で フィルタリング

② Amazon CloudWatch RUM を用いた ユーザエクスペリエンスのモニタリング

ユーザエクスペリエンスのモニタリング Ø ユーザエクスペリエンスモニタリングの目的 (※ 公式Blogから抜粋) ύϑΥʔϚϯεΛ೺Ѳ͠ɺϢʔβʔʹ࠷దͳΤΫεϖϦΤϯεΛఏڙ͢Δ͜ͱΛ໨ඪͱ͍ͯ͠·͢ɻ ϒϥ΢βͷछྨɺϒϥ΢βͷઃఆɺϢʔβʔͷॴࡏ஍ɺ઀ଓͳͲɺؔ࿈͢Δม਺ͷ਺͕ଟ͍ͨΊɺ ݱࡏ࣮ߦͰ͖Δͷ͸໛ٖςετ·ͰͰ͢ɻϢʔβʔʹͱͬͯຊ౰ʹॏཁͳͷ͸ɺϢʔβʔʹ΋ͨΒ ͞ΕΔΤΫεϖϦΤϯεͰ͢ɻ l エクスペリエンス情報の出力 Ø 用いるAWSサービスと用途 ・ アプリケーションの健全性を示す指標 (Core Web Vitals) ・ アプリケーションでハンドリングできなかったエラーログ ・ ユーザ属性情報の把握 (利用端末、OS、ユーザの位置情報 .. 等) → Amazon CloudWatch Realtime User Monitoring (RUM) 新機能 – Amazon CloudWatch RUM をご紹介 https://aws.amazon.com/jp/blogs/news/cloudwatch-rum/

ユーザエクスペリエンスのモニタリング ~ 利用開始方法 ~ Ø npm から aws-rum-web ライブラリ をインストール Ø マネジメントコンソールから発行さ れるテンプレートのコードをアプリ ケーションに貼り付ける 以上！！ 導入は非常に簡単

ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~ Ø Largest contentful paint (LCP) Ø First Input Delay (FID) Ø Cumulative layout shift (CLS) → 最も有意義なコンテンツの表示時間 → 初回入力ができるまでの時間 → ページ表示時の視覚的な安定性を 示す指標 それぞれ Positive / Tolerable / Frustrating の3段階で評価 Core Web Vitals の各指標を取得可能 https://developers-jp.googleblog.com/2020/05/web-vitals.html Web Vitals の概要: サイトの健全性を示す重要指標

ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~ Ø パフォーマンスのボトルネックを調査することが可能

ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~

ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~ パフォーマンスが悪くなった時間帯 の特定も可能

ユーザエクスペリエンスのモニタリング ~ エラーの把握 ~ アプリケーション内でハンドリン グできなかったエラー数をモニ タリングすることができる

ユーザエクスペリエンスのモニタリング ~ エラーの把握 ~ エラー詳細を調査

ユーザエクスペリエンスのモニタリング ~ エラーの把握 ~ CloudWatch Alarm AWS Chatbot CloudWatchに出力 することも可能 Slack に通知

ユーザエクスペリエンスのモニタリング ~ その他 ~ Ø ユーザの端末情報 Ø アクセス元の位置情報 Ø ユーザのページ遷移情報 etc..

まとめ Ø フロントエンドとサーバサイドでモニタリングの観点が異なることを理解する Ø AWS のサービスを活用することで、従来は難しかったフロントエンドのモニ タリングを容易に実現できる

ご清聴ありがとうございました