Daijiro Wachi - @watilde Node学園 35時限⽬ 2020/02/25 Web VitalsとJavaScriptエラーの可視化 フロントエンドにおけるObservabilityとは

Daijiro Wachi Social media ■ Twitter: @watilde ■ Blog: https://blog.watilde.com Recent activities ■ OSS: Node.jsのWPTのメンテナンス ■ お仕事: AWSでAmplifyの改善 – https://docs.amplify.aws/ 発表内容は個⼈の⾒解であって、所属組織を代表するものではありません

開発・分析・ マーケティング ホスティング・ モニタリング ユーザー管理・ データ管理 Libraries CLI Admin UI Admin UI CLI Console 関連サービスと連携 • 認証 • DB • ファイル • API • 分析 • 予測 • Bot • プッシュ通知 • など ホスティング • CI/CDビルドイン • GitHub連携 • PRレビュー • 閲覧パスワード設定 • など モニタリング • 4xx/5xxエラー • TTFB • など New ユーザー管理 • ユーザー権限管理 • グループ設定 • など コンテンツ管理 • CMS的にコンテンツ管理 • DB管理 • など

複雑化するフロントエンドが意図通りに動いているか 把握をするのに2つの監視ポイントを押さえる話 Start Request Response Rendering Works リソースは 意図通りに 読み込まれているか JavaScriptは 意図通りに 動作しているか 1 2

Observability(可観測性)の説明例 「システムが提供するデータからシステムの内部状態を理 解すること。データを調べ、何が起こったのか、なぜ起 こったのか、の質問に答えられる状態」 “(re)refine observability” by John Porcaro https://www.humio.com/whats-new/blog/observability-redefined

Observability(可観測性)の説明例 フロントエンドにおける意味合い 「システムが提供するデータからシステムの内部状態を理 解すること。データを調べ、何が起こったのか、なぜ起 こったのか、の質問に答えられる状態」 “(re)refine observability” by John Porcaro https://www.humio.com/whats-new/blog/observability-redefined 「複雑化するフロントエンドで可観測性を獲得すると、 データに基づいて何を改善すべきかを推測でき、より良い UXを短時間で提供できる」

計測すべきmetrics例 Source: Syslog severity level — Wikipedia

分類 ユーザー視点で何が起きているか フロントエンドに関連する具 体的な例 Error ウェブサイトが正しく動作していない JavaScriptエラー 4xx, 5xx エラー Warning ウェブサイトの動作が遅い Web Vitals TTFB Info N/A デバッグ情報 計測すべきmetrics例 フロントエンドの場合

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/

JavaScriptエラーとWebVitalsの Amplifyを活用したTracing例 データ 整形 データ 送信 データ 管理 データ 分析

JavaScriptエラーの整形 データ 整形

整形したJavaScriptエラーに寄せて WebVitalsのデータ構造 データ 整形

Amplifyの Analytics(Kinesis Data Streams)に送信 データ 送信

送信されたデータをS3に保存し クエリーで取り出せるようにする データ 管理

QuicksightでURL, デバイス, Dateごとの JavaScriptエラー, WebVitalsを可視化 データ 分析

分類 ユーザー視点で何が起きているか フロントエンドに関連する具 体的な例 Error ウェブサイトが正しく動作していない JavaScriptエラー 4XX, 5XX エラー Warning ウェブサイトの動作が遅い Web Vitals TTFB Info N/A デバッグ情報 計測すべきmetrics例 フロントエンドの場合

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/

4xx errors HTTPステータス400-499が発⽣した数 5xx errors HTTPステータス500-599が発⽣した数 TTFB Time to first byteの平均秒数

ユーザーはサービスのUX改善を 加速させるcontributor ■ OSSの世界では「⼗分な⽬ん⽟があれば、全てのバグは洗い出される」という ⾔葉があり、著名なOSSがなぜ⾼い品質を保つことが出来ているかの説明にた まに引⽤されている(参考: リーナスの法則 - wikipedia) ■ コードを監査する⼈の数に⽐例して、潰されていくバグの数は増える ■ フロントエンドにおいても同様。 Observabilityを実現することにより、より多 くのユーザーと⼀体となってプロダクション環境の課題発⾒を⾏うことが可能 となる 本発表の関連記事: https://bit.ly/3bAKoxE

AWS/Amplifyに興味のある フロントエンドエンジニアのコミュニティ https://aws-amplify-jp.connpass.com/ 定期的にオンラインmeetupを行っているので、ぜひご参加ください！

Appendix

No content

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