Web VitalsとJavaScriptエラーの可視化 - フロントエンドにおけるObservabilityとは / visualize-web-vitals-and-javascript-error

Node学園 35時限目 オンライントライアルでの発表資料です。

Webアプリ・サイトの開発におけるObservabilityは、ユーザー体験(UX)の低下がいつどこで発生するかを検出し、開発者が改善にかかる時間を短縮するのに役立つ原因を把握することです。 構築をするには下記の3つのステップに区切ることができます。

ログを集める
ログの詳細を可視化する
ログの詳細から、改善に必要な意味合いだしを行う

最後の意味合だしを行うステップでは、情報を下記の3つのレベルに分類します。

エラー：空白ページの原因
警告：50ミリ秒を超えるハングアウト
その他：デバッグなどの情報

この資料では、上記のステップを元に、AmplifyとQuickSightを活用したフロントエンドにおけるObservability向上の基盤を実装する方法を紹介しています。Observabilityの獲得により、フロントエンド開発者が短い時間でUX改善が行いやすくなる、と結論づけています。

コード例はこちら
https://github.com/watilde/amplify-observability-example

Transcript

1. Daijiro Wachi - @watilde Node学園 35時限⽬ 2020/02/25 Web VitalsとJavaScriptエラーの可視化 フロントエンドにおけるObservabilityとは
2. Daijiro Wachi Social media ▪ Twitter: @watilde ▪ Blog: https://blog.watilde.com Recent activities ▪ OSS: Node.jsのWPTのメンテナンス ▪ お仕事: AWSでAmplifyの改善 – https://docs.amplify.aws/ 発表内容は個⼈の⾒解であって、所属組織を代表するものではありません
3. 開発・分析・ マーケティング ホスティング・ モニタリング ユーザー管理・ データ管理 Libraries CLI Admin UI Admin UI CLI Console 関連サービスと連携 • 認証 • DB • ファイル • API • 分析 • 予測 • Bot • プッシュ通知 • など ホスティング • CI/CDビルドイン • GitHub連携 • PRレビュー • 閲覧パスワード設定 • など モニタリング • 4xx/5xxエラー • TTFB • など New ユーザー管理 • ユーザー権限管理 • グループ設定 • など コンテンツ管理 • CMS的にコンテンツ管理 • DB管理 • など
4. 複雑化するフロントエンドが意図通りに動いているか 把握をするのに2つの監視ポイントを押さえる話 Start Request Response Rendering Works リソースは 意図通りに 読み込まれているか JavaScriptは 意図通りに 動作しているか 1 2
5. Observability(可観測性)の説明例 「システムが提供するデータからシステムの内部状態を理 解すること。データを調べ、何が起こったのか、なぜ起 こったのか、の質問に答えられる状態」 “(re)refine observability” by John Porcaro https://www.humio.com/whats-new/blog/observability-redefined
6. Observability(可観測性)の説明例 フロントエンドにおける意味合い 「システムが提供するデータからシステムの内部状態を理 解すること。データを調べ、何が起こったのか、なぜ起 こったのか、の質問に答えられる状態」 “(re)refine observability” by John Porcaro https://www.humio.com/whats-new/blog/observability-redefined 「複雑化するフロントエンドで可観測性を獲得すると、 データに基づいて何を改善すべきかを推測でき、より良い UXを短時間で提供できる」
7. 計測すべきmetrics例 Source: Syslog severity level — Wikipedia
8. 分類 ユーザー視点で何が起きているか フロントエンドに関連する具 体的な例 Error ウェブサイトが正しく動作していない JavaScriptエラー 4xx, 5xx エラー Warning ウェブサイトの動作が遅い Web Vitals TTFB Info N/A デバッグ情報 計測すべきmetrics例 フロントエンドの場合
9. JavaScriptエラーのlogging イベント名 イベントが発行されるタイミング GlobalEventHandlers.onerror • リソースの読み込みが失敗 • 実⾏時にエラーが発⽣ WindowEventHandlers.onunhandledrejection • catchしていないPromiseでエラーが発 ⽣ WindowEventHandlers.onrejectionhandled • rejectされたPromiseにハンドラーが初 めて追加 WindowEventHandlers.onmessageerror • デシリアライズできないメッセージを BroadcastChannelが受信 Source: Window - Web API | MDN, ECMUnhandled promise rejections, ECMAScript 2020/HostPromiseRejectionTracker, WHATWG/HTML/
10. JavaScriptエラーとWebVitalsの Amplifyを活用したTracing例 データ 整形 データ 送信 データ 管理 データ 分析
11. JavaScriptエラーの整形 データ 整形
12. 整形したJavaScriptエラーに寄せて WebVitalsのデータ構造 データ 整形
13. Amplifyの Analytics(Kinesis Data Streams)に送信 データ 送信
14. 送信されたデータをS3に保存し クエリーで取り出せるようにする データ 管理
15. QuicksightでURL, デバイス, Dateごとの JavaScriptエラー, WebVitalsを可視化 データ 分析
16. 分類 ユーザー視点で何が起きているか フロントエンドに関連する具 体的な例 Error ウェブサイトが正しく動作していない JavaScriptエラー 4XX, 5XX エラー Warning ウェブサイトの動作が遅い Web Vitals TTFB Info N/A デバッグ情報 計測すべきmetrics例 フロントエンドの場合
17. Amplifyに4XX/5XXエラーやTTFBを、ほぼリアルタ イムでモニタリングする機能が追加されました Source: https://aws.amazon.com/jp/about-aws/whats-new/2021/02/aws-amplify-hosting-adds-monitoring-capabilities-with-amazon-cloudwatch-integration/
18. 4xx errors HTTPステータス400-499が発⽣した数 5xx errors HTTPステータス500-599が発⽣した数 TTFB Time to first byteの平均秒数
19. ユーザーはサービスのUX改善を 加速させるcontributor ▪ OSSの世界では「⼗分な⽬ん⽟があれば、全てのバグは洗い出される」という ⾔葉があり、著名なOSSがなぜ⾼い品質を保つことが出来ているかの説明にた まに引⽤されている(参考: リーナスの法則 - wikipedia) ▪ コードを監査する⼈の数に⽐例して、潰されていくバグの数は増える ▪ フロントエンドにおいても同様。 Observabilityを実現することにより、より多 くのユーザーと⼀体となってプロダクション環境の課題発⾒を⾏うことが可能 となる 本発表の関連記事: https://bit.ly/3bAKoxE
20. AWS/Amplifyに興味のある フロントエンドエンジニアのコミュニティ https://aws-amplify-jp.connpass.com/ 定期的にオンラインmeetupを行っているので、ぜひご参加ください！
21. Appendix
23. Acknowledgments Takayuki Shimizu for review - https://twitter.com/shimy_net Koya Kimura for feedback - https://twitter.com/kimyan_udon2/ Daisuke Nagayama for feedback - https://twitter.com/jagaimogmog