$30 off During Our Annual Pro Sale. View Details »

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

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 - @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