AWSを用いたフロントエンドモニタリング入門

サービスの安定的な提供において、アプリケーションのモニタリングは非常に大切な要素です。 Single Page Application (SPA)やServer Side Rendering (SSR) での開発が一般的になってきた昨今、サーバサイドだけでなくフロントエンドのモニタリングの重要性も増しています。 本セッションでは、弊社(ウェルスナビ株式会社)が取り組んでいるAWSのテクノロジーを用いたフロントエンドのモニタリング手法についてご紹介いたします。

Transcript

1. AWSを用いたフロント エンドモニタリング入門 ΢ΣϧεφϏגࣜձࣾ ਫഅ ୓໵
2. 自己紹介 ウェルスナビ株式会社 ・水馬 拓也 (みずま たくや) ・全自動資産運用サービス の開発に従事 ・前職 Amazon Web Service Japan / Solutions Architect https://tech.wealtnavi.com Twitter: @mizuma_t [好きな技術] ・AWS Amplify / Serverless 関連 ・React.js / Typescript / Next.js
3. アジェンダ Ø サーバサイドモニタリング とフロントエンドモニタリングの違い Ø AWSサービスを用いたフロントエンドモニタリング Ø Amplify Libraries を用いた CloudWatch Logs へのログ出力 Ø Amazon CloudWatch RUM を用いたユーザエクスペリエンスモニタリング
4. サーバサイドモニタリングと フロントエンドモニタリングの違い
5. サーバサイドモニタリングとフロントエンドモニタリングの違い Ø ユーザ毎にアプリケーションが動作する環境が異なる → 環境ごとにアプリケーションの挙動が異なる可能性について考慮する必要がある → 全てのユーザが最新versionのブラウザや端末を使っているわけではない Ø フロントエンドで発生したエラーやイベント情報を*確実に*運用者に届ける 必要がある → 適切にエラーハンドリングが行われなかった場合、エラーが発生したことをサービス運用者が検 知できない可能性がある Ø フロントエンドに適切な権限を与える必要がある → 仮に Amazon CloudWatch に出力するとして、あらゆるロググループにアクセスさせてはいけない
6. フロントエンドモニタリングのための AWSサービス
7. ① Amplify Libraries を用いたエラーログ のモニタリング
8. エラーログのモニタリング Ø エラーログモニタリングの目的 アプリケーション内で発生した異常を運用者が確実に検知できること l ログの出力 → Amazon CloudWatch Logs → Amplify Libraries → 例1) サーバサイドから5xxレスポンスを受け取った → 例2) サードパーティライブラリが意図せぬエラーを出力した Ø 用いるAWSサービスと用途 l 権限の付与 → Amazon Cognito Identity Pool l 運用者への通知 → AWS ChatBot から Slack に通知
9. エラーログのモニタリング
10. エラーログのモニタリング ①アプリケーションへのアクセス
11. エラーログのモニタリング ② Cloudwatch Logs出力のため の権限払い出し
12. エラーログのモニタリング ③ ログ出力 ERROR! Amplify Libraries
13. エラーログのモニタリング ④ Slack通知
14. エラーログの出力処理 ~ ログ設定 ~
15. エラーログの出力処理 ~ ログ設定 ~ CloudWatch Log Group に関する情報
16. エラーログの出力処理 ~ ログ設定 ~ Cognito Identity Pool Id に関する情報
17. エラーログの出力処理 ~ ログ出力 ~
18. エラーログの出力処理 ~ ログ出力 ~ ログの prefix と ログレベルを指定
19. エラーログの出力処理 ~ ログ出力 ~ Cloudwatch 拡張機能の追加
20. エラーログの出力処理 ~ ログ出力 ~ ログメッセージをCloudWatch に出力
21. CloudWatch Logs からエラーログを確認 指定したロググループ 指定したログストリーム ログレベル / prefix / メッセージ
22. エラーログの出力処理 ~ 通知~ CloudWatch Alarm AWS Chatbot メトリクスフィルターから特定の文字列でフィルタリング
23. エラーログの出力処理 ~ 通知~ CloudWatch Alarm AWS Chatbot メトリクスフィルターから特定の文字列でフィルタリングしSlackに通知 “ERROR” という文字列で フィルタリング
24. ② Amazon CloudWatch RUM を用いた ユーザエクスペリエンスのモニタリング
25. ユーザエクスペリエンスのモニタリング Ø ユーザエクスペリエンスモニタリングの目的 (※ 公式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/
26. ユーザエクスペリエンスのモニタリング ~ 利用開始方法 ~ Ø npm から aws-rum-web ライブラリ をインストール Ø マネジメントコンソールから発行さ れるテンプレートのコードをアプリ ケーションに貼り付ける 以上！！ 導入は非常に簡単
27. ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~ Ø 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 の概要: サイトの健全性を示す重要指標
28. ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~ Ø パフォーマンスのボトルネックを調査することが可能
29. ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~
30. ユーザエクスペリエンスのモニタリング ~ サイトの健全性 ~ パフォーマンスが悪くなった時間帯 の特定も可能
31. ユーザエクスペリエンスのモニタリング ~ エラーの把握 ~ アプリケーション内でハンドリン グできなかったエラー数をモニ タリングすることができる
32. ユーザエクスペリエンスのモニタリング ~ エラーの把握 ~ エラー詳細を調査
33. ユーザエクスペリエンスのモニタリング ~ エラーの把握 ~ CloudWatch Alarm AWS Chatbot CloudWatchに出力 することも可能 Slack に通知
34. ユーザエクスペリエンスのモニタリング ~ その他 ~ Ø ユーザの端末情報 Ø アクセス元の位置情報 Ø ユーザのページ遷移情報 etc..
35. まとめ Ø フロントエンドとサーバサイドでモニタリングの観点が異なることを理解する Ø AWS のサービスを活用することで、従来は難しかったフロントエンドのモニ タリングを容易に実現できる
36. ご清聴ありがとうございました