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とは
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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/
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Appendix
    

    View Slide

22. View Slide

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
    

    View Slide