Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web VitalsとJavaScriptエラーの可視化 - フロントエンドにおけるObser...

Daijiro Wachi
February 25, 2021

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

Daijiro Wachi

February 25, 2021
Tweet

More Decks by Daijiro Wachi

Other Decks in Programming

Transcript

  1. Daijiro Wachi Social media ▪ Twitter: @watilde ▪ Blog: https://blog.watilde.com

    Recent activities ▪ OSS: Node.jsのWPTのメンテナンス ▪ お仕事: AWSでAmplifyの改善 – https://docs.amplify.aws/ 発表内容は個⼈の⾒解であって、所属組織を代表するものではありません
  2. 開発・分析・ マーケティング ホスティング・ モニタリング ユーザー管理・ データ管理 Libraries CLI Admin UI

    Admin UI CLI Console 関連サービスと連携 • 認証 • DB • ファイル • API • 分析 • 予測 • Bot • プッシュ通知 • など ホスティング • CI/CDビルドイン • GitHub連携 • PRレビュー • 閲覧パスワード設定 • など モニタリング • 4xx/5xxエラー • TTFB • など New ユーザー管理 • ユーザー権限管理 • グループ設定 • など コンテンツ管理 • CMS的にコンテンツ管理 • DB管理 • など
  3. Observability(可観測性)の説明例 フロントエンドにおける意味合い 「システムが提供するデータからシステムの内部状態を理 解すること。データを調べ、何が起こったのか、なぜ起 こったのか、の質問に答えられる状態」 “(re)refine observability” by John Porcaro

    https://www.humio.com/whats-new/blog/observability-redefined 「複雑化するフロントエンドで可観測性を獲得すると、 データに基づいて何を改善すべきかを推測でき、より良い UXを短時間で提供できる」
  4. 分類 ユーザー視点で何が起きているか フロントエンドに関連する具 体的な例 Error ウェブサイトが正しく動作していない JavaScriptエラー 4xx, 5xx エラー

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

    Warning ウェブサイトの動作が遅い Web Vitals TTFB Info N/A デバッグ情報 計測すべきmetrics例 フロントエンドの場合
  7. ユーザーはサービスのUX改善を 加速させるcontributor ▪ OSSの世界では「⼗分な⽬ん⽟があれば、全てのバグは洗い出される」という ⾔葉があり、著名なOSSがなぜ⾼い品質を保つことが出来ているかの説明にた まに引⽤されている(参考: リーナスの法則 - wikipedia) ▪

    コードを監査する⼈の数に⽐例して、潰されていくバグの数は増える ▪ フロントエンドにおいても同様。 Observabilityを実現することにより、より多 くのユーザーと⼀体となってプロダクション環境の課題発⾒を⾏うことが可能 となる 本発表の関連記事: https://bit.ly/3bAKoxE
  8. 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