Monitoring user experience  of Flutter apps with SLI/SLO (日本語)

by Takuma Osada

Embed

Start on current slide

Slide 1

Slide 1 text

FlutterNinjas Takuma Osada Lead Mobile App Engineer @ WinTicket, CyberAgent, Inc SLI/SLOを用いて Flutterアプリでユーザー体験の品質を監視する

Slide 2

Slide 2 text

FlutterNinjas 2 自己紹介長田卓馬株式会社サイバーエージェント 21年度新卒入社 WINTICKETのアプリチームでテックリードをしています趣味はワンピースカードです • GitHub ID: ostk 0 0 6 9 • X ID: ostk 0 0 6 9

Slide 3

Slide 3 text

FlutterNinjas 3 本日のゴールユーザー体験を可視化するSLI/SLOを理解し、 Flutterアプリで計測可能なモニタリングの世界を広げる 💪

Slide 4

Slide 4 text

FlutterNinjas 4 本日のゴールユーザー体験を可視化するSLI/SLOを理解し、モバイルアプリで可能なモニタリングの世界を広げる 💪 このセッションはDartやFlutterの世界に深く入り込むものではありません。しかし、品質管理や監視も Flutter開発においての醍醐味の一つだと考えています。 ⚠

Slide 5

Slide 5 text

FlutterNinjas 5 本日のゴールユーザー体験を可視化するSLI/SLOを理解し、モバイルアプリで可能なモニタリングの世界を広げる 💪 そういった側面もあると理解した上で楽しんでもらえると嬉しいです 🙌 ⚠

Slide 6

Slide 6 text

FlutterNinjas 6 AGENDA 1. ユーザー体験を可視化するSLI/SLOとは 2. なぜユーザー体験を可視化するSLI/SLOを作ったのか 3. ユーザー体験を可視化するSLI/SLOを構築する 4. ユーザー体験を可視化するSLI/SLOを実際に運用してみて

Slide 7

Slide 7 text

FlutterNinjas 7 1. ユーザー体験を可視化する SLI/SLOとは 1. 一般的なSLI/SLOとは 2. ユーザー体験を可視化するSLI/SLOとは

Slide 8

Slide 8 text

FlutterNinjas 8 1.1. 一般的なSLI/SLOとは

Slide 9

Slide 9 text

FlutterNinjas 9 1.1. 一般的なSLI/SLOとは「SLI/SLO」という単語を聞いたことがある方はいらっしゃいますか？ 🙋

Slide 10

Slide 10 text

FlutterNinjas 1 0 1.1. 一般的なSLI/SLOとは「SLI/SLO」がなにか分かる方はいらっしゃいますか？ 🙋

Slide 11

Slide 11 text

FlutterNinjas 1 1 1.1. 一般的なSLI/SLOとは SLI（Service Level Indicator）定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 https://cloud.google.com/architecture/framework/reliability/slo-components

Slide 12

Slide 12 text

FlutterNinjas 1 2 1.1. 一般的なSLI/SLOとは SLI（Service Level Indicator）定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO（Service Level Objectives） SLIが達成すべき目標。例えば「99.9%のアップタイム」や「平均レスポンスタイムは○ミリ秒以下」などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components

Slide 13

Slide 13 text

FlutterNinjas 1 3 1.1. 一般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき目標。例えば「99.9%のアップタイム」や「平均レスポンスタイムは○ミリ秒以下」などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components?hl=ja わかるようなわからないような😅

Slide 14

Slide 14 text

FlutterNinjas 1 4 1.1. 一般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき目標。例えば「99.9%のアップタイム」や「平均レスポンスタイムは○ミリ秒以下」などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components?hl=ja Flutter開発で馴染み深いものを例に考えていきます💨

Slide 15

Slide 15 text

FlutterNinjas 1 5 1.1. 一般的なSLI/SLOとはクラッシュフリーユーザー率を例に考える

Slide 16

Slide 16 text

FlutterNinjas 1 6 1.1. 一般的なSLI/SLOとはクラッシュフリーユーザー率とある期間でクラッシュに遭遇しなかったユーザーの割合。セッションで割ったものはクラッシュフリーセッション率も存在する。 https://docs.newrelic.com/docs/mobile-monitoring/mobile-monitoring-ui/mobile-app-pages/release-versions-page/#drill-down

Slide 17

Slide 17 text

FlutterNinjas 1 7 1.1. 一般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき目標。例えば「99.9%のアップタイム」や「平均レスポンスタイムは○ミリ秒以下」などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components

Slide 18

Slide 18 text

FlutterNinjas 1 8 1.1. 一般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき目標。例えば「99.9%のアップタイム」や「平均レスポンスタイムは○ミリ秒以下」などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components クラッシュフリーユーザー率

Slide 19

Slide 19 text

FlutterNinjas 1 9 1.1. 一般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき目標。例えば「99.9%のアップタイム」や「平均レスポンスタイムは○ミリ秒以下」などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components クラッシュフリーユーザー率 24時間単位で99%を維持する

Slide 20

Slide 20 text

FlutterNinjas 2 0 1.1. 一般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満足度の指標。レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき目標。例えば「99.9%のアップタイム」や「平均レスポンスタイムは○ミリ秒以下」などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components クラッシュフリーユーザー率 24時間単位で99%を維持する目標値はチームや事業がどこまで維持したいかで調整可能

Slide 21

Slide 21 text

FlutterNinjas 2 1 1.1. 一般的なSLI/SLOとは SLIはどうやって決めるのか？

Slide 22

Slide 22 text

FlutterNinjas 2 2 1.1. 一般的なSLI/SLOとは ↓ CUJ SLIはどうやって決めるのか？

Slide 23

Slide 23 text

FlutterNinjas 2 3 1.1. 一般的なSLI/SLOとは CUJ（クリティカルユーザージャーニー）ユーザージャーニーとは、人々が目標を達成するために行う一連のタスクを指す。対して、CUJは、多くの目標を達成するために共通するタスクや、非常に重要な目標を達成するために行う一連の流れを指す。 https://sre.google/workbook/implementing-slos/#modeling-user-journeys

Slide 24

Slide 24 text

FlutterNinjas 2 4 1.1. 一般的なSLI/SLOとは CUJ（クリティカルユーザージャーニー）ユーザージャーニーとは、人々が目標を達成するために行う一連のタスクを指す。対して、CUJは、多くの目標を達成するために共通するタスクや、非常に重要な目標を達成するために行う一連の流れを指す。 ECを例に挙げると製品を探す、カートに商品を追加する、購入を完了するあたりがCUJとして挙げられる可能性が高い。 https://sre.google/workbook/implementing-slos/#modeling-user-journeys

Slide 25

Slide 25 text

FlutterNinjas 2 5 1.1. 一般的なSLI/SLOとは CUJ（クリティカルユーザージャーニー）ユーザージャーニーとは、人々が目標を達成するために行う一連のタスクを指す。対して、CUJは、多くの目標を達成するために共通するタスクや、非常に重要な目標を達成するために行う一連の流れを指す。 ECを例に挙げると製品を探す、カートに商品を追加する、購入を完了するあたりがCUJとして挙げられる可能性が高い。 https://sre.google/workbook/implementing-slos/#modeling-user-journeys 最終的に SLO はユーザー体験を向上させることに重点を置く必要がある。したがって、ユーザー中心のアクションの観点から SLO を作成する。

Slide 26

Slide 26 text

FlutterNinjas 2 6 1.2. ユーザー体験を可視化するSLI/SLOとは一般的なSLI/SLOと「ユーザー体験を可視化するSLI/SLO」の違いを見ていく👀

Slide 27

Slide 27 text

FlutterNinjas 2 7 1.2. ユーザー体験を可視化するSLI/SLOとは SLI/SLOについて調べるとAPIリクエスト単位で計測しているものばかり。自分が調べた限りでは明確な背景がわからなかったが、以下が理由であると推測。 • SRE領域がバックエンドやインフラから生まれた技術である • ユーザーの利用プラットフォームに関係なく、網羅的に計測可能である

Slide 28

Slide 28 text

FlutterNinjas 2 8 1.2. ユーザー体験を可視化するSLI/SLOとはユーザー体験を可視化するSLI/SLOとは「機能の開始から完了までの一連のフロー」を計測対象とすることである

Slide 29

Slide 29 text

FlutterNinjas 2 9 1.2. ユーザー体験を可視化するSLI/SLOとは ※ これは開発環境で機能を利用したものです WINTICKETのSMSログイン機能を例に考える → → →

Slide 30

Slide 30 text

FlutterNinjas → → → 3 0 1.2. ユーザー体験を可視化するSLI/SLOとはボタンタップ時に計測開始ログイン完了時に計測終了「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利用したものです

Slide 31

Slide 31 text

FlutterNinjas 3 1 1.2. ユーザー体験を可視化するSLI/SLOとは ※ これは開発環境で機能を利用したものですシステム起因、ユーザー起因問わずでエラーが発生した場合は「エラー」として計測 WINTICKETのSMSログイン機能を例に考える → →

Slide 32

Slide 32 text

FlutterNinjas 3 2 1.2. ユーザー体験を可視化するSLI/SLOとは昨日の利用をキャンセルする場合は「キャンセル」として計測 ※ アプリキルの場合は「中断」として計測 ※ これは開発環境で機能を利用したものです WINTICKETのSMSログイン機能を例に考える → →

Slide 33

Slide 33 text

FlutterNinjas 3 3 メリット • キャンセルや中断率など計測するユーザー体験の範囲を拡張可能 • Flutterの場合はワンソースで計測処理をiOS/Androidに適用できる 1.2. ユーザー体験を可視化するSLI/SLOとは

Slide 34

Slide 34 text

FlutterNinjas 3 4 メリットデメリット • 計測の範囲が広がることで考慮するケースが増え、複雑になる • ユーザー起因のノイズが発生する 1.2. ユーザー体験を可視化するSLI/SLOとは • キャンセルや中断が計測可能で計測範囲が広い • Flutterの場合はワンソースで計測処理をiOS/Androidに適用できる

Slide 35

Slide 35 text

FlutterNinjas 3 5 1.2. ユーザー体験を可視化するSLI/SLOとは測定対象システム起因のエラーを測定対象とするかユーザー起因のエラーを測定対象とするかユーザー体験を可視化する SLI/SLO SLI/SLO ❌ ✅ APIのリクエスト機能の一連のフロー ✅ ✅ 領域バックエンドクライアント計測の埋め込みの容易さ ✅ ❌ まとめるとそれぞれにメリデメがあることがわかる

Slide 36

Slide 36 text

FlutterNinjas 3 6 2. なぜユーザー体験を可視化する SLI/SLOを作ったのか 1. 可用性の向上を目指す 2. 平均復旧時間の改善を目指す

Slide 37

Slide 37 text

FlutterNinjas 3 7 2.1. 可用性の向上を目指すなぜユーザー体験を可視化するSLI/SLOを作った背景を説明していきます

Slide 38

Slide 38 text

FlutterNinjas 3 8 2.1. 可用性の向上を目指す可用性

Slide 39

Slide 39 text

FlutterNinjas 3 9 2.1. 可用性の向上を目指す可用性とは... 可用性 (%) = 稼働時間 / (停止時間 + 稼働時間) 停止時間 (h) = 平均修復時間* x 3 6 5 日 x 2 4 時間 / 平均故障間隔* 平均修復時間 = 停止時間の合計 / 失敗の回数平均故障間隔 = 稼働時間の合計 / 失敗の回数

Slide 40

Slide 40 text

FlutterNinjas 4 0 2.1. 可用性の向上を目指す 2022 年の状況 • 変更障害率: 7.5 % （3/40） • 平均停止時間: 4.0 日 • 可用性: 96.8 %

Slide 41

Slide 41 text

FlutterNinjas 4 1 2.1. 可用性の向上を目指す 2022 年の状況 • 変更障害率: 7.5 % （3/40） • 平均停止時間: 4.0 日 • 可用性: 96.8 % 2023 年の目標 • 変更障害率: 5 % • 平均停止時間: 3.0 日 • 可用性: 98.4 % →

Slide 42

Slide 42 text

FlutterNinjas 4 2 2.1. 可用性の向上を目指す目標を達成するために

Slide 43

Slide 43 text

FlutterNinjas 目標を達成するために 4 3 2.1. 可用性の向上を目指す 📈 平均障害率を下げる • リリース前に問題を検知できる体制づくり • 既存のテスト体制の見直しを実施する

Slide 44

Slide 44 text

FlutterNinjas 4 4 2.1. 可用性の向上を目指す目標を達成するために 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の見直しを実施する • リリース前に問題を検知できる体制づくり • 既存のテスト体制の見直しを実施する

Slide 45

Slide 45 text

FlutterNinjas 4 5 2.1. 可用性の向上を目指す目標を達成するために 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の見直しを実施する • リリース前に問題を検知できる体制づくり • 既存のテスト体制の見直しを実施する本セッションではこちらはスキップ

Slide 46

Slide 46 text

FlutterNinjas 4 6 2.1. 可用性の向上を目指す目標を達成するために 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の見直しを実施する • リリース前に問題を検知できる体制づくり • 既存のテスト体制の見直しを実施する本セッションではこちらはスキップ FlutterKaigi 2 0 2 3 での登壇が YouTubeにアップロードされています（日本語のみになります🙏) https://www.youtube.com/watch?v=VHhZlTDfwIQ&ab_channel=FlutterKaigi

Slide 47

Slide 47 text

FlutterNinjas 4 7 2.2. 平均復旧時間の改善を目指す私のチームでデグレに気づく手段は以下になる • エラー監視ツールによる検知（エラー、クラッシュ、ANR） • ユーザーからの問い合わせ • メンバーからの連絡 • SNSでのエゴサーチ

Slide 48

Slide 48 text

FlutterNinjas それぞれの検知方法の特性 4 8 2.2. 平均復旧時間の改善を目指す検知速度検知範囲エスカレーション検知領域ユーザーの問い合わせ Sentry メンバーからの連絡エゴサーチ既知の未知速い遅い ~ 中中すべて遅い遅い中小小 ✅ △ ✅ ❌ すべてすべて

Slide 49

Slide 49 text

FlutterNinjas それぞれの検知方法の特性 4 9 2.2. 平均復旧時間の改善を目指す検知速度検知範囲エスカレーション検知領域速い中すべて中 ✅ ✅ ❌ すべてすべて Sentryだと検知が速いが、「既知の未知」の領域しか拾うことができないユーザーの問い合わせ Sentry メンバーからの連絡エゴサーチ既知の未知遅い ~ 中遅い遅い小小 △

Slide 50

Slide 50 text

FlutterNinjas それぞれの検知方法の特性 5 0 2.2. 平均復旧時間の改善を目指す検知速度検知範囲エスカレーション検知領域速い中すべて中 ✅ ✅ ❌ すべてすべて他の3つは未知の未知にも気づくことができるが、検知速度が十分ではなく、平均修復時間が伸びしてしまうユーザーの問い合わせ Sentry メンバーからの連絡エゴサーチ既知の未知遅い ~ 中遅い遅い小小 △

Slide 51

Slide 51 text

FlutterNinjas 5 1 2.2. 平均復旧時間の改善を目指す SLI/SLOはこれを検知可能にするのでは🧐

Slide 52

Slide 52 text

FlutterNinjas 5 2 2.2. 平均復旧時間の改善を目指す実際にFlutterアプリでSentryで検知できなかった障害の一覧( 一部抜粋) • ライブ映像が読み込まれず、エラーになってしまう • Android 1 4 でWebView利用時にバックグラウンドから復帰すると真っ白になる • クレジットカード決済で一部のユーザーがエラーになってしまう • SMS認証で一部のユーザーがフリーズしてしまう

Slide 53

Slide 53 text

FlutterNinjas 5 3 2.2. 平均復旧時間の改善を目指す • ライブ映像が読み込まれず、エラーになってしまう • Android 1 4 でWebView利用時にbackground復帰から復帰すると真っ白になる • クレジットカードで一部のユーザーがエラーになってしまう • SMS認証で一部のユーザーがフォームがフリーズしてしまうすべてではないが、SLI/SLOによってこれらの障害は検知することが可能になる。実際にFlutterアプリでSentryで検知できなかった障害の一覧( 一部抜粋)

Slide 54

Slide 54 text

FlutterNinjas それぞれの検知方法の特性 5 4 2.2. 平均復旧時間の改善を目指す検知速度検知範囲エスカレーション検知領域ユーザーの問い合わせ Sentry メンバーからの連絡既知の未知速い遅い ~ 中中すべて遅い遅い中小小 ✅ ✅ ❌ すべてすべて SLI/SLO 速い中 ✅ すべて ※機能のフロー中に限る SLI/SLOは計測対象の中であれば未知の未知の問題も検知可能。アラート機能を作成すればエスカレーションも自動で可能になる。エゴサーチ △

Slide 55

Slide 55 text

FlutterNinjas 5 5 2.2. 平均復旧時間の改善を目指す 2つのアプローチで平均修復時間を削減する

Slide 56

Slide 56 text

FlutterNinjas 5 6 🚨アラート機能 2.2. 平均復旧時間の改善を目指す • アラート機能を作成することで平均検出時間(MTTD)を削減する • 最新バージョンに絞ったアラートを作成し、リリースによるデグレを検知する 2つのアプローチで平均修復時間を削減する

Slide 57

Slide 57 text

FlutterNinjas 5 7 2.2. 平均復旧時間の改善を目指す 🚨アラート機能 • アラート機能を作成することで平均検出時間(MTTD)を削減する • 最新バージョンに絞ったアラートを作成し、リリースによるデグレを検知する 2つのアプローチで平均修復時間を削減する ⛰ 高いオブザーバビリティ • 原因分析につながる情報を多く付与することで平均調査時間(MTTI)を削減する

Slide 58

Slide 58 text

FlutterNinjas 5 8 2.2. 平均復旧時間の改善を目指す具体的な導入方法を説明していく🚀

Slide 59

Slide 59 text

FlutterNinjas 5 9 3. ユーザー体験を可視化する SLI/SLOを構築する 1. 知識のインプットをする 2 . CUJを定義し、ビジネスチームとすり合わせる 3. ツールを選定し、計測を埋め込む 4. アラートを作成する 5. 高いオブザーバビリティを実現する 5 . SLI/SLOをチーム・事業に定着させる

Slide 60

Slide 60 text

FlutterNinjas 6 0 3.1. 知識のインプットをする自分もチームもSLI/SLOには詳しくありませんでした。そのために調査と並行して輪読会の実施を行いました。 https://www.oreilly.com/library/view/observability-engineering/ 9 7 8 1 4 9 2 0 7 6 4 3 8 /

Slide 61

Slide 61 text

FlutterNinjas 6 1 3.1. 知識のインプットをする自分もチームもSLI/SLOには詳しくありませんでした。そのために調査と並行して輪読会の実施を行いました。結果的に輪読会を行う上で、知識をつけるいい機会になったのはもちろんなんですが、「この本に書いてあったアレだよね」「あの本に書いてあった〇〇はいいんだっけ？」みたいなコミュニケーションが取れたのが非常に良かったです。 https://www.oreilly.com/library/view/observability-engineering/ 9 7 8 1 4 9 2 0 7 6 4 3 8 /

Slide 62

Slide 62 text

FlutterNinjas 6 2 3 . 2 . CUJを定義し、ビジネスチームとすり合わせる CUJをビジネスチームと確認し、その中でも優先度を付ける 👤認証 🚴投票 🏦 精算 💰チャージ 🎬 動画 🎬 ライブ映像 📈 分析 🎉 キャンペーン 🎉 予想閲覧 ✉ メッセージ 🔧 設定 📄 履歴確認 🔍 検索 📅 スケジュール

Slide 63

Slide 63 text

FlutterNinjas 6 3 3 . 2 . CUJを定義し、ビジネスチームとすり合わせる CUJをビジネスチームと確認し、その中でも優先度を付けるユーザーがサービスを利用する目的は「競輪・オートレースに投票してギャンブルを楽しむこと」であることから以下の機能に絞りました。 👤認証 📅 スケジュール 🚴投票 🏦 精算 💰チャージ 🎬 動画 🎬 ライブ映像 📈 分析 🎉 キャンペーン 🎉 予想閲覧 ✉ メッセージ 🔧 設定 📄 履歴確認 🔍 検索

Slide 64

Slide 64 text

FlutterNinjas 6 4 3.3. ツールを選定し、計測を埋め込む 🧠 Sentry etc … Big Query New Relic DataDog SLI/SLOを計測・アラートするツールはたくさん存在する

Slide 65

Slide 65 text

FlutterNinjas 6 5 3.3. ツールを選定し、計測を埋め込む 🧠 Sentry etc … Big Query New Relic DataDog 私のチームではSentryを採用 SLI/SLOを計測・アラートするツールはたくさん存在する

Slide 66

Slide 66 text

FlutterNinjas 6 6 3.3. ツールを選定し、計測を埋め込む Sentryを採用した理由 ✅ すでにエラーの監視にSentryを利用していたので扱いに慣れている ✅ エラーの監視とSLI/SLOの計測を1ツールで完結できる ✅ SDKの開発が非常に活発で今後も高いメンテナンスが期待できる

Slide 67

Slide 67 text

FlutterNinjas 6 7 3.3. ツールを選定し、計測を埋め込む計測ツールが決まったら計測したい箇所への埋め込みが必要⛏

Slide 68

Slide 68 text

FlutterNinjas 6 8 3.3. ツールを選定し、計測を埋め込む埋め込み時に工夫したTips • 仕様が複雑にならない形で中断率の計測の仕組みを実現する • コストカットのためにサンプリングレートを適用し、必要最低限の計測を行う • 埋め込む際にasync/awaitを使わずに済むようにAsyncMapを使う • DioのInterceptorを使うことでAPIリクエストのパンクズを残す • AutoRouteObserverを使うことで画面遷移のパンクズを残す • 端末情報やアプリバージョンなどを付与し、高いオブザーバビリティを実現する ※ユーザーのプライバシーポリシーの侵害をしない前提

Slide 69

Slide 69 text

FlutterNinjas 6 9 3.3. ツールを選定し、計測を埋め込む埋め込み時に工夫したTips • 仕様が複雑にならない形で中断率の計測の仕組みを実現する • コストカットのためにサンプリングレートを適用し、必要最低限の計測を行う • 埋め込む際にasync/awaitを使わずに済むようにAsyncMapを使う • DioのInterceptorを使うことでAPIリクエストのパンクズを残す • AutoRouteObserverを使うことで画面遷移のパンクズを残す • 端末情報やアプリバージョンなどを付与し、高いオブザーバビリティを実現する ※ユーザーのプライバシーポリシーの侵害をしない前提時間の都合上、1つのみ紹介します🙇

Slide 70

Slide 70 text

FlutterNinjas 7 0 3.3. ツールを選定し、計測を埋め込む仕様が複雑にならない形で中断率の計測の仕組みを実現する

Slide 71

Slide 71 text

FlutterNinjas 7 1 ※ これは開発環境で機能を利用したものです WINTICKETのSMSログイン機能を例に考える → → → 3.3. ツールを選定し、計測を埋め込む

Slide 72

Slide 72 text

FlutterNinjas → → → 7 2 ボタンタップ時に計測開始ログイン完了時に計測終了「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利用したものです 3.3. ツールを選定し、計測を埋め込む

Slide 73

Slide 73 text

FlutterNinjas 7 3 ※ これは開発環境で機能を利用したものですシステム起因、ユーザー起因問わずでエラーが発生した場合は「エラー」として計測 WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む

Slide 74

Slide 74 text

FlutterNinjas 7 4 機能の利用をキャンセルする場合は「キャンセル」として計測 ※ アプリキルの場合は「中断」として計測 ※ これは開発環境で機能を利用したものです WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む

Slide 75

Slide 75 text

FlutterNinjas 7 5 昨日の利用をキャンセルする場合は「キャンセル」として計測 ※ アプリキルの場合は「中断」として計測 ※ これは開発環境で機能を利用したものです WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む中断率はどのように計測するのがいいか？

Slide 76

Slide 76 text

FlutterNinjas 7 6 3.3. ツールを選定し、計測を埋め込む Flutterのライフサイクルではアプリキル(destoyed) を検知することができない

Slide 77

Slide 77 text

FlutterNinjas 7 7 3.3. ツールを選定し、計測を埋め込む Flutterのライフサイクルではアプリキル(destoyed) を検知することができない仮に検知できたとしても画面フリーズやメモリーリークによるクラッシュの場合、ログ送信処理が正常に動いている保証がない

Slide 78

Slide 78 text

FlutterNinjas 7 8 3.3. ツールを選定し、計測を埋め込む Flutterのライフサイクルではアプリキル(destoyed) を検知することができない仮に検知できたとしても画面フリーズやメモリーリークによるクラッシュの場合、ログ送信処理が正常に動いている保証がない中断率はどのように計測するのがいいか？

Slide 79

Slide 79 text

FlutterNinjas 7 9 3.3. ツールを選定し、計測を埋め込む Local Databaseを使用して計測する

Slide 80

Slide 80 text

FlutterNinjas → → → 8 0 ボタンタップ時に計測開始ログイン完了時に計測終了「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利用したものです 3.3. ツールを選定し、計測を埋め込む

Slide 81

Slide 81 text

FlutterNinjas → → → 8 1 ボタンタップ時に計測開始ログイン完了時に計測終了「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利用したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 LocalDatabaseからデータを消去する

Slide 82

Slide 82 text

FlutterNinjas 8 2 ※ これは開発環境で機能を利用したものですシステム起因、ユーザー起因問わずでエラーが発生した場合は「エラー」として計測 WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む LocalDatabaseからデータを消去する

Slide 83

Slide 83 text

FlutterNinjas 8 3 昨日の利用をキャンセルする場合は「キャンセル」として計測 ※ これは開発環境で機能を利用したものです WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む LocalDatabaseからデータを消去する

Slide 84

Slide 84 text

FlutterNinjas → → 8 4 ボタンタップ時に計測開始 WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利用したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 💣 アプリクラッシュ → アプリの再起動

Slide 85

Slide 85 text

FlutterNinjas → → 8 5 ボタンタップ時に計測開始 WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利用したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 💣 アプリキル / クラッシュ → アプリの再起動アプリキル / クラッシュの時のみ LocalDatabaseにデータが残っている

Slide 86

Slide 86 text

FlutterNinjas → → 8 6 中断として計測し、LocalDatabaseから消去 WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利用したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 💣 アプリキル / クラッシュ → アプリの再起動アプリキル / クラッシュの時のみ LocalDatabaseにデータが残っているボタンタップ時に計測開始

Slide 87

Slide 87 text

FlutterNinjas 8 7 3.3. ツールを選定し、計測を埋め込む懸念点 • アプリを再度立ち上げずに離脱したユーザーのデータが送られない • LocalDatabaseを使用する

Slide 88

Slide 88 text

FlutterNinjas 8 8 3.3. ツールを選定し、計測を埋め込む懸念点 • アプリを再度立ち上げずに離脱したユーザーのデータが送られない • LocalDatabaseを使用する → 障害を検知できれば全てのユーザーのデータを計測する必要はないため、送信できることが保証できる今回の方針で行くこととした → Shared PreferenceやSecure Preferenceは単一テーブルなので機能側でもローカルデータを更新したい場合、コンフリクトが起きる可能性がある

Slide 89

Slide 89 text

FlutterNinjas 8 9 3.4. アラートを作成する 🚨アラートの仕組み

Slide 90

Slide 90 text

FlutterNinjas 9 0 3.4. アラートを作成する SLI/SLOで利用するアラートは主に2つあります • エラーバジェットアラート • バーンレートアラート

Slide 91

Slide 91 text

FlutterNinjas 9 1 3.4. アラートを作成するエラーバジェットアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ エラーバジェットアラートは閾値に基づき、SLO のエラーバジェットの一定の割合が消費されなかったときに通知する。たとえば、対象とする期間でエラーバジェットの 75% が消費されたらアラート、50% が消費されたら警告のように設定する。

Slide 92

Slide 92 text

FlutterNinjas 9 2 3.4. アラートを作成するエラーバジェットアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ エラーバジェットアラートは閾値に基づき、SLO のエラーバジェットの一定の割合が消費されなかったときに通知する。たとえば、対象とする期間でエラーバジェットの 75% が消費されたらアラート、50% が消費されたら警告のように設定する。エラーバジェット？

Slide 93

Slide 93 text

FlutterNinjas 9 3 3.4. アラートを作成するエラーバジェット https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ サービスの信頼性がどの程度損なわれても許容できるかを示す指標。サービスレベル目標（SLO）が「99.99%」のリクエスト応答率を維持することである場合、エラーバジェットは、エラー応答率を「0.01%」以下に抑えることになる。

Slide 94

Slide 94 text

FlutterNinjas 9 4 3.4. アラートを作成する https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ エラーバジェットアラート機能名 80%、100%のエラーバジェットを消費したらアラートが鳴る ※ Sentryに備わっているアラート機能ではなく、Sentryの計測データをもとに自作したもの

Slide 95

Slide 95 text

FlutterNinjas 9 5 3.4. アラートを作成するバーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ エラーバジェットの消費率が指定した閾値を超え、それが特定の期間継続した場合に通知される。たとえば、SLO の 7 日間目標に対して、過去 5 分間で過去 1 時間に 16.8 以上のバーンレートが測定された場合にアラートを設定できる。

Slide 96

Slide 96 text

FlutterNinjas 9 6 3.4. アラートを作成するバーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ エラーバジェットの消費率が指定した閾値を超え、それが特定の期間継続した場合に通知される。たとえば、SLO の 7 日間目標に対して、過去 5 分間で過去 1 時間に 16.8 以上のバーンレートが測定された場合にアラートを設定できる。 = 1時間*100% 7 日 *24時間*10%消費したエラーバジェット = 7 * 2 4 * 0 . 1 1 1 6 . 8

Slide 97

Slide 97 text

FlutterNinjas 9 7 3.4. アラートを作成するバーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ バーンレートアラートによって多くのデグレに気付けることが可能。しかし、以下の問題がある。 ❌ ユーザー起因のエラーやキャンセルはタイミングによってブレが大きい ❌ 深夜や早朝などセッションが下がるタイミングで一人のユーザーの行動がアラートに大きく影響する

Slide 98

Slide 98 text

FlutterNinjas 9 8 3.4. アラートを作成するバーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ バーンレートアラートによって多くのデグレに気付けることが可能。しかし、以下の問題がある。 ❌ ユーザー起因のエラーやキャンセルはタイミングによってブレが大きい → エラーバジェットを上ブレを考慮して調整する ❌ 深夜や早朝などセッションが下がるタイミングで一人のユーザーの行動がアラートに大きく影響する → アラートを鳴らすためにエラーの件数を設定する

Slide 99

Slide 99 text

FlutterNinjas 9 9 3.4. アラートを作成するバーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ 機能名 1時間単位で20%、30% 超えたら ※ Sentryに備わっているアラート機能ではなく、Sentryの計測データをもとに自作したもの Warningのアラートは10件、 Criticalのアラートは15件以上必要

Slide 100

Slide 100 text

FlutterNinjas 1 0 0 3.5. 高いオブザーバビリティを実現するアラートを検知した後、偽陽性かどうか含め、状況把握できるようにプライバシーポリシーに違反しない形で追加する

Slide 101

Slide 101 text

FlutterNinjas 1 0 1 3.5. 高いオブザーバビリティを実現するアラートを検知した後、偽陽性かどうか含め、状況把握できるようにプライバシーポリシーに違反しない形で追加する • ユーザーの端末やOS • 端末の性能(High, Medium, Low) • アプリバージョン • 最後どこの画面を表示していたか • 通信状態 • etc …

Slide 102

Slide 102 text

FlutterNinjas 1 0 2 3 . 6 . SLI/SLOをチーム・事業に定着させるサービス品質は事業全体にとっても非常に大事なこと

Slide 103

Slide 103 text

FlutterNinjas 1 0 3 3 . 6 . SLI/SLOをチーム・事業に定着させるエンジニアが品質に取り組んでいることを事業全体に知ってほしい

Slide 104

Slide 104 text

FlutterNinjas 1 0 4 3 . 6 . SLI/SLOをチーム・事業に定着させる SLI/SLOの仕組みを使ってもっと事業全体で品質に向き合うことはできないか？

Slide 105

Slide 105 text

FlutterNinjas 1 0 5 DASHBOARD機能の作成 3 . 6 . SLI/SLOをチーム・事業に定着させる

Slide 106

Slide 106 text

FlutterNinjas 1 0 6 DASHBOARD機能 • 目的: 障害をいつでも誰でも確認できる • 手段: 身近にアクセス可能なダッシュボード機能 • 改善軸: 障害の状況把握はまずはここから始められるようにする 3 . 6 . SLI/SLOをチーム・事業に定着させる

Slide 107

Slide 107 text

FlutterNinjas 1 0 7 3 . 6 . SLI/SLOをチーム・事業に定着させる

Slide 108

Slide 108 text

FlutterNinjas 1 0 8 機能名時間別の機能の成功率 3 . 6 . SLI/SLOをチーム・事業に定着させる機能毎の正常を表す、目標値

Slide 109

Slide 109 text

FlutterNinjas 1 0 9 3.4. アラートを作成する緑が成功した成功率、グレーが途中でやめたキャンセル率、赤がユーザー体験として理想状態ではない、失敗率を表す

Slide 110

Slide 110 text

FlutterNinjas 1 1 0 3.4. アラートを作成する 📊 ダッシュボード機能それぞれが10分毎のデータになっている。 25件のうち、24件が成功、1件が失敗している。

Slide 111

Slide 111 text

FlutterNinjas 1 1 1 3.4. アラートを作成するそれぞれが10分毎のデータになっている。こんな感じでエラーが増えていると障害が確認できる

Slide 112

Slide 112 text

FlutterNinjas 1 1 2 📊 ダッシュボード機能最新バージョンのユーザーで起きている障害かも

Slide 113

Slide 113 text

FlutterNinjas 1 1 3 👍 提供すること ✅ 障害の全体像を把握し、解消までの初速を上げる ✅ 障害時のダブルチェックのための情報源になる ✅ 障害の解消を確認する 🙅 提供しないこと 3 . 6 . SLI/SLOをチーム・事業に定着させる

Slide 114

Slide 114 text

FlutterNinjas 1 1 4 👍 提供すること ✅ 障害の全体像を把握し、解消までの初速を上げる ✅ 障害時のダブルチェックのための情報源になる ✅ 障害の解消を確認する 🙅 提供しないこと ❌ これ一つで完全に障害解消までできる ❌ この情報だけを100%信用してビジネス判断をする ❌ ユーザー単位やバージョン単位などの詳細なデータ 3 . 6 . SLI/SLOをチーム・事業に定着させる

Slide 115

Slide 115 text

FlutterNinjas 1 1 5 3 . 6 . SLI/SLOをチーム・事業に定着させる

Slide 116

Slide 116 text

FlutterNinjas 1 1 6 3 . 6 . SLI/SLOをチーム・事業に定着させるビジネスメンバーを中心にインシデントの連絡が来た時に即座にユーザー影響を確認するツールとして定着！

Slide 117

Slide 117 text

FlutterNinjas 1. 平均復旧時間はどのくらい改善したのか 2. 所感 1 1 7 4. ユーザー体験を可視化するSLI/SLO を実際に運用してみて

Slide 118

Slide 118 text

FlutterNinjas 1 1 8 4.1. 平均復旧時間はどのくらい改善したのか障害には以下のパターンが存在する • 内部コードによるデグレ • 連携している外部サービス(Firebase、決済系・銀行サービス) の障害やメンテナンス

Slide 119

Slide 119 text

FlutterNinjas 1 1 9 4.1. 平均復旧時間はどのくらい改善したのか障害には以下のパターンが存在する • 内部コードによるデグレ → 2024/2 から運用開始後、計測範囲でのデグレなし • 連携している外部サービス(Firebase、決済系・銀行サービス) の障害やメンテナンス → 影響範囲の確認が圧倒的に短縮し、これまで気づかずにスルーしてしまっていた事象を確認できるようになった

Slide 120

Slide 120 text

FlutterNinjas 1 2 0 いかがたったでしょうか。SLI/SLOは非常に専門知識が求められ、今回時間の都合上、説明を省略した箇所も多く存在します。自分もSLI/SLOについてまだまだわからないことも多く、引き続き学んでいきます。興味を持たれた方はぜひ、後ほどお話しできれると嬉しいです。 4.2. 所感

Slide 121

Slide 121 text

FlutterNinjas 1 2 1 4 . 2 . One more thing … Sample Repository is available.

Slide 122

Slide 122 text

FlutterNinjas 1 2 2 ご清聴ありがとうございました 🙌