フロントエンドにおけるObservability

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Copyright © 2023 Bitkey Inc. All right reserved. 3 自己紹介北村順 Jun Kitamura 2015.4 2019.4 2021.7 株式会社フロムスクラッチ（現・株式会社データＸ）に入社 SaaSマーケティングツールの導入エンジニア・インフラエンジニアを担当ビットキーへ参画最初の製品リリースとほぼ同時期に入社カギのプラットフォーム: bitkey platform や顔認証プロダクトの開発に従事 SREチームの立ち上げ。SLO/SLIやインシデントレスポンスなど様々な運用設計、構築、ツール導入を実施し、信頼性向上へ貢献。 2023.06 SREとしてこれまでに、構築してきた様々な施策・仕組みを各事業・プロダクトへと適切に還元していく活動を実施中。

Slide 4

Slide 4 text

ઃཱɹɹɿ2018೥5݄ɹ ڌ఺ɹɹɿ౦ژɾେࡕɾ෱Ԭɾٶ࡚ ࢿຊۚɹɿ14,946,908,300ԁʢ2022೥12݄31೔࣌఺ɹࢿຊ४උؚۚʣ ैۀһ਺ɿ233໊

Slide 5

Slide 5 text

Slide 6

Slide 6 text

6 workhubͷશͯΛͭͳ͛ΔΞϓϩʔν શͯͷεςʔΫϗϧμʔ͕ ࢖͍͍ͨػೳ͕͜͜ʹ ʮIVCʯ͔ͩΒ࣮ͦ͜ݱͰ͖Δ ຊ౰ʹศརͳz৽͍͠ಇ͖ํz ࡉ΍͔ʹઃఆΛબ΂Δ ৺஍Α͍αʔϏεར༻ମݧ …and more ϏϧΞΫηείϯτϩʔϧ ͋ΒΏΔ൶ΛҰݩ؅ཧ ిؾৣ΍ࣗಈυΞɺΤϨ ϕʔλʔ͔Βϑϥούʔ ήʔτ·ͰɺશͯͷηΩϡ ϦςΟΛworkhubʹ࿈ܞɻ ϗςϦϯάɾ"#8 χϡʔϊʔϚϧͳಇ͘৔ॴͷߏங QR΍ϏʔίϯͰҐஔΛ൑ ఆɻ࠲੮ʹՃ͑ɺϩοΧʔ ༧໿΍ෳ਺ڌ఺ରԠ΋Մೳ SEQMBDFԣஅݕࡧ ͙͢ʹݟ͔ͭΔɺΛ࣮ݱ͢Δ஍ਤ γΣΞΦϑΟε΍ݸࣨϒʔεͳͲɺ αʔϏεΛ·͍ͨͰݕࡧɾ༧໿ɻ ݸผʹϩάΠϯͯ͠୳͢खؒ͸΋͏ ඞཁ͋Γ·ͤΜɻ SEQMBDFӡӦࢧԉ ू٬͔ΒӡӦ·ͰΛแׅ؅ཧ ձһɾܖ໿؅ཧ͔Βೖୀࣨɺ ձٞࣨͳͲͷར༻࣮੷ूܭ͔ Βܾࡁ·Ͱɻ؆қͳ্ཱͪ͛ Ͱ༨৒ΤϦΞͷऩӹԽʹ΋ɻ ϑϨΩγϒϧͳೝূํ๏ ༻్ɾਓ෺ʹԠͯ͡࠷దԽ Χʔυ΍QRɺإೝূͳͲΤϦΞɾ ࢪઃ༻్ʹԠͨ͡ೖࣨݖݶΛ࣮ ݱɻࣾһ͚ͩͰͳ͘ɺήετ΍ۀ ऀɺϏϧ؅ཧऀʹ΋ɻ ࠞࡶঢ়گҐஔঢ়گ൑ఆ ີΛճආ͢Δۭؒͮ͘Γ AIΧϝϥͱ࿈ಈ͠ʮਓܕʯ Λݕ஌ɻͦͷΤϦΞͷࠞࡶ ঢ়گΛՄࢹԽ͠ɺີΛආ͚ ΍͍ۭؒ͢Λԋग़ɻ ແਓड෇ձٞࣨ༧໿ ඇର໘͔ͭߴ͍ϗεϐλϦςΟ QRͰͷड෇͔Βձٞࣨ༧ ໿ɾղৣ·Ͱ࿈ಈɻηΩϡ ϦςΟΛҡ࣋ͭͭ͠ɺ҆શ ͳඇର໘ແਓड෇Λ࣮ݱɻ 4BB4ΞυΠϯ࿈ܞ ׳Ε਌͠ΜͩπʔϧͰεϜʔζʹਁಁ ΧϨϯμʔɾνϟοτͳͲ ׳Ε਌͠Μͩπʔϧͱͦͷ ··ܨ͕Γɺࣗવʹਁಁ͠ ͯ࢖ΘΕΔπʔϧʹɻ αʔϏε΋ͭͳ͕ΔεϚʔτϏϧ ϥϯν഑ୡɾਗ਼૟ͳͲ ՄࢹԽɾ෼ੳϓϥοτϑΥʔϜ ར༻࣮੷σʔλΛجʹͨ͠࠷దͳۭؒ׆༻ ϚωδϝϯτμογϡϘʔυ ৘ใΛू໿͠ɺ෼ࢄͨ͠ಇ͖ํΛέΞ ֤ࣄۀͰͷऔΓ૊Έɾ࣮੷ɹʙWorkspace Domainʙ

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright © 2023 Bitkey Inc. All right reserved. 10 1. 話すこと・話さないこと・バックエンドのリファクタリング・バグ修正しても、事象が改善しない！・クエリパフォーマンスチューニングしても、画面が遅い！開かない！・一応、ボトルネック”っぽい”ところをみて改善したつもりのはずなのに。。。こんなこと思ったことないですか？ユーザー視点で考えられているだろうか？

Slide 11

Slide 11 text

Copyright © 2023 Bitkey Inc. All right reserved. 11 1. 話すこと・話さないこと話すこと・GCP x Datadog を利用したフロントエンドのオブザーバビリティの観点について・Metrics/Logs/Traces + Profiles の 4 つの柱を利用して   　SREs の私（not フロントエンドエンジニア）が、どういうことを考えて、何をしたのか。

Slide 12

Slide 12 text

Copyright © 2023 Bitkey Inc. All right reserved. 12 1. 話すこと・話さないこと話すこと話さないこと・フロントエンド以外のオブザーバビリティ・詳細な設定・改善方法について・GCP x Datadog を利用したフロントエンドのオブザーバビリティの観点について・Metrics/Logs/Traces + Profiles の 4 つの柱を利用して   　SREs の私（not フロントエンドエンジニア）が、どういうことを考えて、何をしたのか。

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright © 2023 Bitkey Inc. All right reserved. 14 API 2. ざっくりアーキテクチャ全体像 Cloud Load  Balancing Cloud Run Cloud  Functions Database AlloyDB Firestore Contents Cloud  Storage frontendʢSPAʣ Firebase hosting Hardware RUM Logs dd-agent Cloud Run APM Logging Error Tracking Monitor

Slide 15

Slide 15 text

Copyright © 2023 Bitkey Inc. All right reserved. 15 API 2. ざっくりアーキテクチャ全体像 Cloud Load  Balancing Cloud Run Cloud  Functions Database AlloyDB Firestore Contents Cloud  Storage Hardware RUM Logs dd-agent Cloud Run APM Logging Error Tracking Monitor frontendʢSPAʣ Firebase hosting

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Copyright © 2023 Bitkey Inc. All right reserved. 17 3. Metrics/Logs/Traces + Profiles for フロントエンド ref. https://learning.oreilly.com/library/view/distributed-systems-observability/9781492033431/ch04.html 1 Metrics 2 Logs 3 Traces 時間の経過とともに発生した個別のイベントの不変のタイムスタンプ付き記録一定の時間間隔で測定されたデータを数値で表現したもの分散システムを介したエンドツーエンドのリクエストフローをエンコードする因果関係のある一連の分散イベントを表現したもの「サービス間」でのボトルネック特定に有効

Slide 18

Slide 18 text

Copyright © 2023 Bitkey Inc. All right reserved. 18 3. Metrics/Logs/Traces + Profiles for フロントエンド ref. https://learning.oreilly.com/library/view/distributed-systems-observability/9781492033431/ch04.html 1 Metrics 2 Logs 3 Traces 分散システムを介したエンドツーエンドのリクエストフローをエンコードする因果関係のある一連の分散イベントを表現したもの「サービス間」でのボトルネック特定に有効 4 Profiles CPU 使用率や関数呼び出しの頻度と時間などプログラムの複雑さをコードレベル、かつ時間ベースでその表現したもの「サービス内」のボトルネック特定に有効時間の経過とともに発生した個別のイベントの不変のタイムスタンプ付き記録一定の時間間隔で測定されたデータを数値で表現したもの

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Copyright © 2023 Bitkey Inc. All right reserved. 20 Metrics ʲಡΈࠐΈͷύϑΥʔϚϯεʳ ϖʔδಡΈࠐΈ։͔࢝Β ϝΠϯίϯςϯπ͕ಡΈࠐ·ΕΔ ·Ͱͷ࣌ؒ 2.5 sec ҎԼ͕Goodʂ ʲࢹ֮తͳ҆ఆੑʳ ϖʔδͷදࣔதʹൃੜͨ͠ ༧ظ͠ͳ͍ϨΠΞ΢τγϑτ ΛఆྔԽͨ͠஋ 0.1 ҎԼ͕Goodʂ ʲಡΈࠐΈͷԠ౴ੑʳ Ϣʔβʔ͕࠷ॳʹ ϖʔδΛૢ࡞ͨ͠ͱ͖͔Β ͦͷૢ࡞ʹԠͯ͡ϒϥ΢βʔ͕ ࣮ࡍʹΠϕϯτ ϋϯυϥʔͷॲཧΛ։࢝͢ Δ·Ͱͷ࣌ؒ 0.1 sec ҎԼ͕Goodʂ https://web.dev/i18n/ja/vitals/

Slide 21

Slide 21 text

Copyright © 2023 Bitkey Inc. All right reserved. 21 Metrics ʲಡΈࠐΈͷύϑΥʔϚϯεʳ ϖʔδಡΈࠐΈ։͔࢝Β ϝΠϯίϯςϯπ͕ಡΈࠐ·ΕΔ ·Ͱͷ࣌ؒ 2.5 sec ҎԼ͕Goodʂ ʲࢹ֮తͳ҆ఆੑʳ ϖʔδͷදࣔதʹൃੜͨ͠ ༧ظ͠ͳ͍ϨΠΞ΢τγϑτ ΛఆྔԽͨ͠஋ 0.1 ҎԼ͕Goodʂ https://web.dev/i18n/ja/vitals/ https://web.dev/inp/ ೥݄͔Β '*%ʢ'JSTU*OQVU%FMBZʣ ͔Β */1ʢ*OUFSBDUJPOUP/FYU1BJOUʣ ʲಡΈࠐΈͷԠ౴ੑʳ

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Copyright © 2023 Bitkey Inc. All right reserved. 23 Metrics - フィールドデータ・ラボデータ - ϑΟʔϧυσʔλ ϥϘσʔλ 一貫性のある管理された環境で、ページの読み込みをシミュレートするためのツールを使用して計測される指標 e.g. CPU や Network の Throttling 実際にページを読み込み、操作しているユーザーについて測定される指標

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Copyright © 2023 Bitkey Inc. All right reserved. 28 Metrics - 計測ツール - 計測ツール（フィールドデータ）の選定 PageSpeed Insights ʢPSIʣ 導入しやすさ認証継続的計測詳細分析備考 Datadog RUM web-vitals ʢlibraryʣ 実環境へのパフォーマンス影響が多少発生してしまうが詳細な分析が可能。自前で分析する仕組みを用意する必要があるサクッと分析するには最適だがサイトにbasic 認証経由でアクセスを許可とかして、頑張ればいける。主にtoC向け。 BigQuery x Looker Studio 認証が必要なサイトはできなさそう Chrome UX Report ʢCrUXʣ

Slide 29

Slide 29 text

Copyright © 2023 Bitkey Inc. All right reserved. 29 Metrics - 計測ツール - 計測ツール（フィールドデータ）の選定 PageSpeed Insights ʢPSIʣ Chrome UX Report ʢCrUXʣ 導入しやすさ認証継続的計測詳細分析備考 Datadog RUM 実環境へのパフォーマンス影響が多少発生してしまうが詳細な分析が可能。主にtoC向け。 BigQuery x Looker Studio 認証が必要なサイトはできなさそうサクッと分析するには最適だがサイトにbasic 認証経由でアクセスを許可とかして、頑張ればいける。自前で分析する仕組みを用意する必要がある web-vitals ʢlibraryʣ

Slide 30

Slide 30 text

Copyright © 2023 Bitkey Inc. All right reserved. 30 Metrics - 計測ツール - 計測ツール（ラボデータ）の選定 PageSpeed Insights ʢPSIʣ Chrome DevTool ʢLighthouseʣ 導入しやすさ認証継続的計測詳細分析備考 Lighthouse CI ローカル環境で簡単かつ詳細に分析ができる。サクッと分析するには最適だがサイトにbasic 認証経由でアクセスを許可とかして、頑張ればいける。環境整備が少し手間だがより再現性の高く継続的な計測が実現可能。

Slide 31

Slide 31 text

Copyright © 2023 Bitkey Inc. All right reserved. 31 Metrics - 計測ツール - 計測ツール（ラボデータ）の選定 PageSpeed Insights ʢPSIʣ Chrome DevTool ʢLighthouseʣ 導入しやすさ認証継続的計測詳細分析備考 Lighthouse CI 環境整備が少し手間だがより再現性の高く継続的な計測が実現可能。ローカル環境で簡単かつ詳細に分析ができる。サクッと分析するには最適だがサイトにbasic 認証経由でアクセスを許可とかして、頑張ればいける。

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Copyright © 2023 Bitkey Inc. All right reserved. 33 Metrics - Datadog RUM（フィールドデータ） - フィールドデータ ɾDatadog RUM ͷઃఆ͸ɺdatadogRum.init Λ࠷ ॳʹಡΈࠐΉ͚ͩͰ؆୯ɻ ɾpackage.json ͷ version Λऔಘͯ͠ɺversion Λ ࢦఆ͢Δͱɺversion ຖͷ web vitals ΍ error rate ͱ͔΋ΈΕΔΑ͏ʹͳΔɻ ref. https://docs.datadoghq.com/ja/real_user_monitoring/browser/

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Copyright © 2023 Bitkey Inc. All right reserved. 36 Lighthouse CI Metrics - Lighthouse CI（ラボデータ） - Lighthouse CI Server Cloud Load  Balancing Cloud Run PostgreSQL Cloud SQL Backend Service Backend Service Identity- Aware Proxy upload Developers frontendʢSPAʣ Firebase hosting 監査 (参考)ヤフー全社横断「Webパフォーマンス改善」の取り組み (Core Web Vitalsスコアの向上) https://techblog.yahoo.co.jp/entry/2022090530337093/ lighthouse CI を使うことで簡単に、Lighthouse による監査をコマンドラインで実施することができます。また、Lighthouse CI Sever で Web UI による可視化。

Slide 37

Slide 37 text

Copyright © 2023 Bitkey Inc. All right reserved. 37 Metrics - Lighthouse CI（ラボデータ） - lighthouserc.js puppeteer-script.js 認証が必要な url においては、puppeteerScript を利用して、監査前に都度実行するスクリプトの中で、ログインを実施するように puppeteer のスクリプトを実行してあげればok

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Copyright © 2023 Bitkey Inc. All right reserved. 41 ■ Datadog RUM ・datadogRum.addError すると、対象のRUM session に対して、発生したエラーを紐づけて送信し、分析することができます。・その際、任意の context も付与することもできます。 ■ Datadog Logs ・datadogLogs.logger.xxx すると、Datadog Logs へ指定したログを送信することができます。・当然 error だけではなく、debug・info も送信できるので、実際のユーザーの任意の操作をログで確認することもできます。・Firebase Analytics（Google Analytics）でも似たようなことができるが、導入のしやすさ、リアルタイム性等の点において、 Datadog Logs の方が使いやすいなと感じています。 Logs フロントエンドにおける Logs

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Copyright © 2023 Bitkey Inc. All right reserved. 50 Profiles https://blog.sentry.io/profiling-101-what-is-profiling/ そもそも Profiles を取得するための手法（Profiling）にはどういったものがあるのかフロントエンドバックエンド？？ Cloud Profiler v8-profiler （Sentry…?）

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Copyright © 2023 Bitkey Inc. All right reserved. 53 ■ Metrics（Lighthouse）・不要なコンポーネント削除・link タグに、preconnect・dns-prefetch 付与・適宜、Dynamic Importへ変更・webpack bundle analyzer 導入、webpack v4 -> v5 へ version up 　・Tree Shaking、splitChunks 最適化　・ついでに、CICD速度改善・Firebase Storage Region 移行（Storage Transfer Service利用・Cloud CDN導入・画像リサイズ（Firebase Resize Images   　・ref. https://extensions.dev/extensions/firebase/storage-resize-images 4. 実施した改善とその結果 frontendʢSPAʣ Firebase hosting Contents Cloud  Storage 3-5s 速度改善 End Users Cloud Load  Balancing 100-200s 速度改善 preconnect dns-prefetch

Slide 54

Slide 54 text

Copyright © 2023 Bitkey Inc. All right reserved. 54 ■ Logs（ブラウザエラー監視）・リリース直後に、発生した新しいエラーを通知することで、すぐにブラウザでのエラーを検知し、修正・リリースする流れを構築することができた。 4. 実施した改善とその結果 Developers End Users ■ Profiles（Chrome DevTools）・コードレベルで、ボトルネック特定し、不要な処理の削除、及び、メモ化等のリファクタリング・フロントエンドの重複した処理を、バックエンドに寄せるように API 追加・修正　etc... frontendʢSPAʣ Firebase hosting Developers frontendʢSPAʣ Firebase hosting エラー発生！新しいエラーのみ Profiling

Slide 55

Slide 55 text

Copyright © 2023 Bitkey Inc. All right reserved. 55 ■ 結果・Lighthouse のスコアは若干上がったけど、全然上がらん。。。！？　・主要な URL をいくつか監査したが、全体平均5ポイント程度しか改善しなかった。・逆にがっつりリファクタリングしたコンポーネントを含む URL とかは、25 -> 55 と 30 ポイントくらい改善しているので、ちまちま改善するより、書き直した方がいい場合もあるなーという感想。（もはやフロントエンド関係ない　・傾向として、TBT が大きい（メインスレッドを占有している）コンポーネントとかは、その傾向が高いかも？・（ここまで言っておいてなんだが）Lighthouse のスコアやDatadogの指標を改善することは　結果論であって、目的ではない。　・そもそも SEO とか関係ないプロダクトはそこまで意識する必要はないかも？という前提がある。　・かつ、改善したいのは、「スコア」ではなく、「ユーザー体験」ということを忘れてはならない。　　・ステークホルダーと「ユーザー体験に基づいた指標（SLI）とスコアの基準（SLO）」を、合意することが大切。 4. 実施した改善とその結果

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Copyright © 2023 Bitkey Inc. All right reserved. 58 ・「ユーザー視点」によるオブザーバビリティの構築・運用　・フロントエンド ~ ハードウェア一気通貫したオブザーバビリティの実現へ・「ユーザー視点」によるSLO/SLIの構築・運用　・ハードウェアを絡めた解錠体験等に対する SLO・SLI の実装、運用へ・「ユーザー視点」による運用体制構築　・アラート ~ サポート対応までのシームレスな体制へさいごに

Slide 59

Slide 59 text