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

こちらは 2024年6月に https://flutterninjas.dev/ で登壇した資料です。

SLI/SLO is often heard as a SRE word, but it is not familiar to mobile app development. In my product, the failure rate is high, and I needed a mechanism to detect and solve the problems as early as possible. So I adapted the SLI/SLO mechanism to fit mobile apps and created a mechanism to detect poor user experience. This mechanism allows for immediate detection of the following.
- Failure rate (cases where a certain number of users fail to use a feature due to an error or other occurrence)
- Cancellation rate (cases where a certain number of users cancel for some reason when using a feature)
- Suspension rate (cases where a certain number of users kill the app for some reason when using a feature)

Our app has now been embedded in more than 40 features for this monitoring.
In this session, we will discuss the following.
- What is SLI/SLO
- The difference between SLI/SLO in general and SLI/SLO for user experience detection
- How to measure cases where a user stops using a feature or crashes in the middle of a feature
- How to set the sampling rate
- How to create a user experience alerting infrastructure How to combat noise alerts when creating them
- How to embed the measurement infrastructure with as little impact on the main code as possible
- How to involve members of the business in detecting and preventing poor user experience

1. FlutterNinjas Takuma Osada Lead Mobile App Engineer @ WinTicket, CyberAgent, Inc SLI/SLOを 用 いて Flutterアプリで ユーザー体験の品質を監視する
2. FlutterNinjas 2 自 己 紹介 長田 卓 馬 株式会社サイバーエージェント 21年度新卒 入 社 WINTICKETのアプリチームでテックリードをしています 趣味はワンピースカードです • GitHub ID: ostk 0 0 6 9 • X ID: ostk 0 0 6 9
3. FlutterNinjas 3 本 日 のゴール ユーザー体験を可視化するSLI/SLOを理解し、 Flutterアプリで計測可能なモニタリングの世界を広げる 💪
4. FlutterNinjas 4 本 日 のゴール ユーザー体験を可視化するSLI/SLOを理解し、 モバイルアプリで可能なモニタリングの世界を広げる 💪 このセッションはDartやFlutterの世界に 深く 入 り込むものではありません。しかし、品質管理や監視も Flutter開発においての醍醐味の 一 つだと考えています。 ⚠
5. FlutterNinjas 5 本 日 のゴール ユーザー体験を可視化するSLI/SLOを理解し、 モバイルアプリで可能なモニタリングの世界を広げる 💪 そういった側 面 もあると理解した上で 楽しんでもらえると嬉しいです 🙌 ⚠
6. FlutterNinjas 6 AGENDA 1. ユーザー体験を可視化するSLI/SLOとは 2. なぜユーザー体験を可視化するSLI/SLOを作ったのか 3. ユーザー体験を可視化するSLI/SLOを構築する 4. ユーザー体験を可視化するSLI/SLOを実際に運 用 してみて
7. FlutterNinjas 7 1. ユーザー体験を可視化する SLI/SLOとは 1. 一 般的なSLI/SLOとは 2. ユーザー体験を可視化するSLI/SLOとは
8. FlutterNinjas 8 1.1. 一 般的なSLI/SLOとは
9. FlutterNinjas 9 1.1. 一 般的なSLI/SLOとは 「SLI/SLO」という単語を聞いたことが ある 方 はいらっしゃいますか？ 🙋
10. FlutterNinjas 1 0 1.1. 一 般的なSLI/SLOとは 「SLI/SLO」がなにか分かる 方 は いらっしゃいますか？ 🙋
11. FlutterNinjas 1 1 1.1. 一 般的なSLI/SLOとは SLI（Service Level Indicator） 定量的に測定可能なユーザーの満 足 度の指標。 レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 https://cloud.google.com/architecture/framework/reliability/slo-components
12. 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
13. FlutterNinjas 1 3 1.1. 一 般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満 足 度の指標。 レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき 目 標。 例えば「99.9%のアップタイム」や「平均レスポンスタイムは◦ミリ秒以下」 などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components?hl=ja わかるようなわからないような😅
14. FlutterNinjas 1 4 1.1. 一 般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満 足 度の指標。 レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき 目 標。 例えば「99.9%のアップタイム」や「平均レスポンスタイムは◦ミリ秒以下」 などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components?hl=ja Flutter開発で馴染み深いものを 例に考えていきます💨
15. FlutterNinjas 1 5 1.1. 一 般的なSLI/SLOとは クラッシュフリーユーザー率を 例に考える
16. 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
17. FlutterNinjas 1 7 1.1. 一 般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満 足 度の指標。 レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき 目 標。 例えば「99.9%のアップタイム」や「平均レスポンスタイムは◦ミリ秒以下」 などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components
18. FlutterNinjas 1 8 1.1. 一 般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満 足 度の指標。 レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき 目 標。 例えば「99.9%のアップタイム」や「平均レスポンスタイムは◦ミリ秒以下」 などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components クラッシュフリーユーザー率
19. FlutterNinjas 1 9 1.1. 一 般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満 足 度の指標。 レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき 目 標。 例えば「99.9%のアップタイム」や「平均レスポンスタイムは◦ミリ秒以下」 などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components クラッシュフリーユーザー率 24時間単位で99%を維持する
20. FlutterNinjas 2 0 1.1. 一 般的なSLI/SLOとは SLI 定量的に測定可能なユーザーの満 足 度の指標。 レスポンスタイム、エラーレート、ダウンタイムなどが例に挙げられる。 SLO SLIが達成すべき 目 標。 例えば「99.9%のアップタイム」や「平均レスポンスタイムは◦ミリ秒以下」 などと設定される。 https://cloud.google.com/architecture/framework/reliability/slo-components クラッシュフリーユーザー率 24時間単位で99%を維持する 目 標値はチームや事業がどこまで維持したいかで調整可能
21. FlutterNinjas 2 1 1.1. 一 般的なSLI/SLOとは SLIはどうやって決めるのか？
22. FlutterNinjas 2 2 1.1. 一 般的なSLI/SLOとは ↓ CUJ SLIはどうやって決めるのか？
23. FlutterNinjas 2 3 1.1. 一 般的なSLI/SLOとは CUJ（クリティカルユーザージャーニー） ユーザージャーニーとは、 人 々が 目 標を達成するために 行 う 一 連のタスクを指す。 対して、CUJは、多くの 目 標を達成するために共通するタスクや、 非 常に重要な 目 標を達成するために 行 う 一 連の流れを指す。 https://sre.google/workbook/implementing-slos/#modeling-user-journeys
24. FlutterNinjas 2 4 1.1. 一 般的なSLI/SLOとは CUJ（クリティカルユーザージャーニー） ユーザージャーニーとは、 人 々が 目 標を達成するために 行 う 一 連のタスクを指す。 対して、CUJは、多くの 目 標を達成するために共通するタスクや、 非 常に重要な 目 標を達成するために 行 う 一 連の流れを指す。 ECを例に挙げると 製品を探す、カートに商品を追加する、購 入 を完了する あたりがCUJとして挙げられる可能性が 高 い。 https://sre.google/workbook/implementing-slos/#modeling-user-journeys
25. FlutterNinjas 2 5 1.1. 一 般的なSLI/SLOとは CUJ（クリティカルユーザージャーニー） ユーザージャーニーとは、 人 々が 目 標を達成するために 行 う 一 連のタスクを指す。 対して、CUJは、多くの 目 標を達成するために共通するタスクや、 非 常に重要な 目 標を達成するために 行 う 一 連の流れを指す。 ECを例に挙げると 製品を探す、カートに商品を追加する、購 入 を完了する あたりがCUJとして挙げられる可能性が 高 い。 https://sre.google/workbook/implementing-slos/#modeling-user-journeys 最終的に SLO はユーザー体験を向上させることに重点を置く必要がある。 したがって、ユーザー中 心 のアクションの観点から SLO を作成する。
26. FlutterNinjas 2 6 1.2. ユーザー体験を可視化するSLI/SLOとは 一 般的なSLI/SLOと「ユーザー体験を可視化するSLI/SLO」 の違いを 見 ていく👀
27. FlutterNinjas 2 7 1.2. ユーザー体験を可視化するSLI/SLOとは SLI/SLOについて調べるとAPIリクエスト単位で計測しているものばかり。 自 分が調べた限りでは明確な背景がわからなかったが、 以下が理由であると推測。 • SRE領域がバックエンドやインフラから 生 まれた技術である • ユーザーの利 用 プラットフォームに関係なく、網羅的に計測可能である
28. FlutterNinjas 2 8 1.2. ユーザー体験を可視化するSLI/SLOとは ユーザー体験を可視化するSLI/SLOとは 「機能の開始から完了までの 一 連のフロー」 を計測対象とすることである
29. FlutterNinjas 2 9 1.2. ユーザー体験を可視化するSLI/SLOとは ※ これは開発環境で機能を利 用 したものです WINTICKETのSMSログイン機能を例に考える → → →
30. FlutterNinjas → → → 3 0 1.2. ユーザー体験を可視化するSLI/SLOとは ボタンタップ時に計測開始 ログイン完了時に計測終了 「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利 用 したものです
31. FlutterNinjas 3 1 1.2. ユーザー体験を可視化するSLI/SLOとは ※ これは開発環境で機能を利 用 したものです システム起因、ユーザー起因問わずで エラーが発 生 した場合は「エラー」として計測 WINTICKETのSMSログイン機能を例に考える → →
32. FlutterNinjas 3 2 1.2. ユーザー体験を可視化するSLI/SLOとは 昨 日 の利 用 をキャンセルする場合は 「キャンセル」として計測 ※ アプリキルの場合は「中断」として計測 ※ これは開発環境で機能を利 用 したものです WINTICKETのSMSログイン機能を例に考える → →
33. FlutterNinjas 3 3 メリット • キャンセルや中断率など計測する ユーザー体験の範囲を拡張可能 • Flutterの場合はワンソースで 計測処理をiOS/Androidに適 用 できる 1.2. ユーザー体験を可視化するSLI/SLOとは
34. FlutterNinjas 3 4 メリット デメリット • 計測の範囲が広がることで考慮する ケースが増え、複雑になる • ユーザー起因のノイズが発 生 する 1.2. ユーザー体験を可視化するSLI/SLOとは • キャンセルや中断が計測可能で 計測範囲が広い • Flutterの場合はワンソースで 計測処理をiOS/Androidに適 用 できる
35. FlutterNinjas 3 5 1.2. ユーザー体験を可視化するSLI/SLOとは 測定対象 システム起因のエラーを測定対象とするか ユーザー起因のエラーを測定対象とするか ユーザー体験を可視化する SLI/SLO SLI/SLO ❌ ✅ APIのリクエスト 機能の 一 連のフロー ✅ ✅ 領域 バックエンド クライアント 計測の埋め込みの容易さ ✅ ❌ まとめるとそれぞれにメリデメがあることがわかる
36. FlutterNinjas 3 6 2. なぜユーザー体験を可視化する SLI/SLOを作ったのか 1. 可 用 性の向上を 目 指す 2. 平均復旧時間の改善を 目 指す
37. FlutterNinjas 3 7 2.1. 可 用 性の向上を 目 指す なぜユーザー体験を可視化するSLI/SLOを 作った背景を説明していきます
38. FlutterNinjas 3 8 2.1. 可 用 性の向上を 目 指す 可 用 性
39. FlutterNinjas 3 9 2.1. 可 用 性の向上を 目 指す 可 用 性とは... 可 用 性 (%) = 稼働時間 / (停 止 時間 + 稼働時間) 停 止 時間 (h) = 平均修復時間* x 3 6 5 日 x 2 4 時間 / 平均故障間隔* 平均修復時間 = 停 止 時間の合計 / 失敗の回数 平均故障間隔 = 稼働時間の合計 / 失敗の回数
40. FlutterNinjas 4 0 2.1. 可 用 性の向上を 目 指す 2022 年の状況 • 変更障害率: 7.5 % （3/40） • 平均停 止 時間: 4.0 日 • 可 用 性: 96.8 %
41. FlutterNinjas 4 1 2.1. 可 用 性の向上を 目 指す 2022 年の状況 • 変更障害率: 7.5 % （3/40） • 平均停 止 時間: 4.0 日 • 可 用 性: 96.8 % 2023 年の 目 標 • 変更障害率: 5 % • 平均停 止 時間: 3.0 日 • 可 用 性: 98.4 % →
42. FlutterNinjas 4 2 2.1. 可 用 性の向上を 目 指す 目 標を達成するために
43. FlutterNinjas 目 標を達成するために 4 3 2.1. 可 用 性の向上を 目 指す 📈 平均障害率を下げる • リリース前に問題を検知できる体制づくり • 既存のテスト体制の 見 直しを実施する
44. FlutterNinjas 4 4 2.1. 可 用 性の向上を 目 指す 目 標を達成するために 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の 見 直しを実施する • リリース前に問題を検知できる体制づくり • 既存のテスト体制の 見 直しを実施する
45. FlutterNinjas 4 5 2.1. 可 用 性の向上を 目 指す 目 標を達成するために 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の 見 直しを実施する • リリース前に問題を検知できる体制づくり • 既存のテスト体制の 見 直しを実施する 本セッションではこちらはスキップ
46. FlutterNinjas 4 6 2.1. 可 用 性の向上を 目 指す 目 標を達成するために 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の 見 直しを実施する • リリース前に問題を検知できる体制づくり • 既存のテスト体制の 見 直しを実施する 本セッションではこちらはスキップ FlutterKaigi 2 0 2 3 での登壇が YouTubeにアップロードされています （ 日 本語のみになります🙏) https://www.youtube.com/watch?v=VHhZlTDfwIQ&ab_channel=FlutterKaigi
47. FlutterNinjas 4 7 2.2. 平均復旧時間の改善を 目 指す 私のチームでデグレに気づく 手 段は以下になる • エラー監視ツールによる検知（エラー、クラッシュ、ANR） • ユーザーからの問い合わせ • メンバーからの連絡 • SNSでのエゴサーチ
48. FlutterNinjas それぞれの検知 方 法の特性 4 8 2.2. 平均復旧時間の改善を 目 指す 検知速度 検知範囲 エスカレーション 検知領域 ユーザーの問い合わせ Sentry メンバーからの連絡 エゴサーチ 既知の未知 速い 遅い ~ 中 中 すべて 遅い 遅い 中 小 小 ✅ △ ✅ ❌ すべて すべて
49. FlutterNinjas それぞれの検知 方 法の特性 4 9 2.2. 平均復旧時間の改善を 目 指す 検知速度 検知範囲 エスカレーション 検知領域 速い 中 すべて 中 ✅ ✅ ❌ すべて すべて Sentryだと検知が速いが、 「既知の未知」の領域しか拾うことができない ユーザーの問い合わせ Sentry メンバーからの連絡 エゴサーチ 既知の未知 遅い ~ 中 遅い 遅い 小 小 △
50. FlutterNinjas それぞれの検知 方 法の特性 5 0 2.2. 平均復旧時間の改善を 目 指す 検知速度 検知範囲 エスカレーション 検知領域 速い 中 すべて 中 ✅ ✅ ❌ すべて すべて 他の3つは未知の未知にも気づくことができるが、 検知速度が 十 分ではなく、平均修復時間が伸びしてしまう ユーザーの問い合わせ Sentry メンバーからの連絡 エゴサーチ 既知の未知 遅い ~ 中 遅い 遅い 小 小 △
51. FlutterNinjas 5 1 2.2. 平均復旧時間の改善を 目 指す SLI/SLOはこれを検知可能にするのでは🧐
52. FlutterNinjas 5 2 2.2. 平均復旧時間の改善を 目 指す 実際にFlutterアプリでSentryで検知できなかった障害の 一 覧( 一 部抜粋) • ライブ映像が読み込まれず、エラーになってしまう • Android 1 4 でWebView利 用 時にバックグラウンドから復帰すると真っ 白 になる • クレジットカード決済で 一 部のユーザーがエラーになってしまう • SMS認証で 一 部のユーザーがフリーズしてしまう
53. FlutterNinjas 5 3 2.2. 平均復旧時間の改善を 目 指す • ライブ映像が読み込まれず、エラーになってしまう • Android 1 4 でWebView利 用 時にbackground復帰から復帰すると真っ 白 になる • クレジットカードで 一 部のユーザーがエラーになってしまう • SMS認証で 一 部のユーザーがフォームがフリーズしてしまう すべてではないが、SLI/SLOによってこれらの 障害は検知することが可能になる。 実際にFlutterアプリでSentryで検知できなかった障害の 一 覧( 一 部抜粋)
54. FlutterNinjas それぞれの検知 方 法の特性 5 4 2.2. 平均復旧時間の改善を 目 指す 検知速度 検知範囲 エスカレーション 検知領域 ユーザーの問い合わせ Sentry メンバーからの連絡 既知の未知 速い 遅い ~ 中 中 すべて 遅い 遅い 中 小 小 ✅ ✅ ❌ すべて すべて SLI/SLO 速い 中 ✅ すべて ※機能のフロー中に限る SLI/SLOは計測対象の中であれば未知の未知 の問題も検知可能。アラート機能を作成すれば エスカレーションも 自 動で可能になる。 エゴサーチ △
55. FlutterNinjas 5 5 2.2. 平均復旧時間の改善を 目 指す 2つのアプローチで平均修復時間を削減する
56. FlutterNinjas 5 6 🚨アラート機能 2.2. 平均復旧時間の改善を 目 指す • アラート機能を作成することで 平均検出時間(MTTD)を削減する • 最新バージョンに絞ったアラートを作成し、 リリースによるデグレを検知する 2つのアプローチで平均修復時間を削減する
57. FlutterNinjas 5 7 2.2. 平均復旧時間の改善を 目 指す 🚨アラート機能 • アラート機能を作成することで 平均検出時間(MTTD)を削減する • 最新バージョンに絞ったアラートを作成し、 リリースによるデグレを検知する 2つのアプローチで平均修復時間を削減する ⛰ 高 いオブザーバビリティ • 原因分析につながる情報を多く付与することで 平均調査時間(MTTI)を削減する
58. FlutterNinjas 5 8 2.2. 平均復旧時間の改善を 目 指す 具体的な導 入方 法を説明していく🚀
59. FlutterNinjas 5 9 3. ユーザー体験を可視化する SLI/SLOを構築する 1. 知識のインプットをする 2 . CUJを定義し、ビジネスチームとすり合わせる 3. ツールを選定し、計測を埋め込む 4. アラートを作成する 5. 高 いオブザーバビリティを実現する 5 . SLI/SLOをチーム ・ 事業に定着させる
60. 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 /
61. 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 /
62. FlutterNinjas 6 2 3 . 2 . CUJを定義し、ビジネスチームとすり合わせる CUJをビジネスチームと確認し、その中でも優先度を付ける 👤認証 🚴投票 🏦 精算 💰チャージ 🎬 動画 🎬 ライブ映像 📈 分析 🎉 キャンペーン 🎉 予想閲覧 ✉ メッセージ 🔧 設定 📄 履歴確認 🔍 検索 📅 スケジュール
63. FlutterNinjas 6 3 3 . 2 . CUJを定義し、ビジネスチームとすり合わせる CUJをビジネスチームと確認し、その中でも優先度を付ける ユーザーがサービスを利 用 する 目 的は「競輪 ・ オートレースに投票してギャンブルを楽しむこと」であるこ とから以下の機能に絞りました。 👤認証 📅 スケジュール 🚴投票 🏦 精算 💰チャージ 🎬 動画 🎬 ライブ映像 📈 分析 🎉 キャンペーン 🎉 予想閲覧 ✉ メッセージ 🔧 設定 📄 履歴確認 🔍 検索
64. FlutterNinjas 6 4 3.3. ツールを選定し、計測を埋め込む 🧠 Sentry etc … Big Query New Relic DataDog SLI/SLOを計測 ・ アラートするツールはたくさん存在する
65. FlutterNinjas 6 5 3.3. ツールを選定し、計測を埋め込む 🧠 Sentry etc … Big Query New Relic DataDog 私のチームではSentryを採 用 SLI/SLOを計測 ・ アラートするツールはたくさん存在する
66. FlutterNinjas 6 6 3.3. ツールを選定し、計測を埋め込む Sentryを採 用 した理由 ✅ すでにエラーの監視にSentryを利 用 していたので扱いに慣れている ✅ エラーの監視とSLI/SLOの計測を1ツールで完結できる ✅ SDKの開発が 非 常に活発で今後も 高 いメンテナンスが期待できる
67. FlutterNinjas 6 7 3.3. ツールを選定し、計測を埋め込む 計測ツールが決まったら 計測したい箇所への埋め込みが必要⛏
68. FlutterNinjas 6 8 3.3. ツールを選定し、計測を埋め込む 埋め込み時に 工 夫したTips • 仕様が複雑にならない形で中断率の計測の仕組みを実現する • コストカットのためにサンプリングレートを適 用 し、必要最低限の計測を 行 う • 埋め込む際にasync/awaitを使わずに済むようにAsyncMapを使う • DioのInterceptorを使うことでAPIリクエストのパンクズを残す • AutoRouteObserverを使うことで画 面 遷移のパンクズを残す • 端末情報やアプリバージョンなどを付与し、 高 いオブザーバビリティを実現する ※ユーザーのプライバシーポリシーの侵害をしない前提
69. FlutterNinjas 6 9 3.3. ツールを選定し、計測を埋め込む 埋め込み時に 工 夫したTips • 仕様が複雑にならない形で中断率の計測の仕組みを実現する • コストカットのためにサンプリングレートを適 用 し、必要最低限の計測を 行 う • 埋め込む際にasync/awaitを使わずに済むようにAsyncMapを使う • DioのInterceptorを使うことでAPIリクエストのパンクズを残す • AutoRouteObserverを使うことで画 面 遷移のパンクズを残す • 端末情報やアプリバージョンなどを付与し、 高 いオブザーバビリティを実現する ※ユーザーのプライバシーポリシーの侵害をしない前提 時間の都合上、1つのみ紹介します🙇
70. FlutterNinjas 7 0 3.3. ツールを選定し、計測を埋め込む 仕様が複雑にならない形で 中断率の計測の仕組みを実現する
71. FlutterNinjas 7 1 ※ これは開発環境で機能を利 用 したものです WINTICKETのSMSログイン機能を例に考える → → → 3.3. ツールを選定し、計測を埋め込む
72. FlutterNinjas → → → 7 2 ボタンタップ時に計測開始 ログイン完了時に計測終了 「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利 用 したものです 3.3. ツールを選定し、計測を埋め込む
73. FlutterNinjas 7 3 ※ これは開発環境で機能を利 用 したものです システム起因、ユーザー起因問わずで エラーが発 生 した場合は「エラー」として計測 WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む
74. FlutterNinjas 7 4 機能の利 用 をキャンセルする場合は 「キャンセル」として計測 ※ アプリキルの場合は「中断」として計測 ※ これは開発環境で機能を利 用 したものです WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む
75. FlutterNinjas 7 5 昨 日 の利 用 をキャンセルする場合は 「キャンセル」として計測 ※ アプリキルの場合は「中断」として計測 ※ これは開発環境で機能を利 用 したものです WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む 中断率はどのように計測するのがいいか？
76. FlutterNinjas 7 6 3.3. ツールを選定し、計測を埋め込む Flutterのライフサイクルではアプリキル(destoyed) を検知することができない
77. FlutterNinjas 7 7 3.3. ツールを選定し、計測を埋め込む Flutterのライフサイクルではアプリキル(destoyed) を検知することができない 仮に検知できたとしても 画 面 フリーズやメモリーリークによるクラッシュの場合、 ログ送信処理が正常に動いている保証がない
78. FlutterNinjas 7 8 3.3. ツールを選定し、計測を埋め込む Flutterのライフサイクルではアプリキル(destoyed) を検知することができない 仮に検知できたとしても 画 面 フリーズやメモリーリークによるクラッシュの場合、 ログ送信処理が正常に動いている保証がない 中断率はどのように計測するのがいいか？
79. FlutterNinjas 7 9 3.3. ツールを選定し、計測を埋め込む Local Databaseを使 用 して計測する
80. FlutterNinjas → → → 8 0 ボタンタップ時に計測開始 ログイン完了時に計測終了 「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利 用 したものです 3.3. ツールを選定し、計測を埋め込む
81. FlutterNinjas → → → 8 1 ボタンタップ時に計測開始 ログイン完了時に計測終了 「成功」として計測する WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利 用 したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 LocalDatabaseからデータを消去する
82. FlutterNinjas 8 2 ※ これは開発環境で機能を利 用 したものです システム起因、ユーザー起因問わずで エラーが発 生 した場合は「エラー」として計測 WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む LocalDatabaseからデータを消去する
83. FlutterNinjas 8 3 昨 日 の利 用 をキャンセルする場合は 「キャンセル」として計測 ※ これは開発環境で機能を利 用 したものです WINTICKETのSMSログイン機能を例に考える → → 3.3. ツールを選定し、計測を埋め込む LocalDatabaseからデータを消去する
84. FlutterNinjas → → 8 4 ボタンタップ時に計測開始 WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利 用 したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 💣 アプリ クラッシュ → アプリの再起動
85. FlutterNinjas → → 8 5 ボタンタップ時に計測開始 WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利 用 したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 💣 アプリキル / クラッシュ → アプリの再起動 アプリキル / クラッシュの時のみ LocalDatabaseにデータが残っている
86. FlutterNinjas → → 8 6 中断として計測し、LocalDatabaseから消去 WINTICKETのSMSログイン機能を例に考える ※ これは開発環境で機能を利 用 したものです 3.3. ツールを選定し、計測を埋め込む LocalDatabaseに計測開始のデータを保存 💣 アプリキル / クラッシュ → アプリの再起動 アプリキル / クラッシュの時のみ LocalDatabaseにデータが残っている ボタンタップ時に計測開始
87. FlutterNinjas 8 7 3.3. ツールを選定し、計測を埋め込む 懸念点 • アプリを再度 立 ち上げずに離脱したユーザーのデータが送られない • LocalDatabaseを使 用 する
88. FlutterNinjas 8 8 3.3. ツールを選定し、計測を埋め込む 懸念点 • アプリを再度 立 ち上げずに離脱したユーザーのデータが送られない • LocalDatabaseを使 用 する → 障害を検知できれば全てのユーザーのデータを計測する必要はないため、 送信できることが保証できる今回の 方 針で 行 くこととした → Shared PreferenceやSecure Preferenceは単 一 テーブルなので 機能側でもローカルデータを更新したい場合、 コンフリクトが起きる可能性がある
89. FlutterNinjas 8 9 3.4. アラートを作成する 🚨アラートの仕組み
90. FlutterNinjas 9 0 3.4. アラートを作成する SLI/SLOで利 用 するアラートは主に2つあります • エラーバジェットアラート • バーンレートアラート
91. FlutterNinjas 9 1 3.4. アラートを作成する エラーバジェットアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ エラーバジェットアラートは閾値に基づき、SLO のエラーバジェットの 一 定の割合が 消費されなかったときに通知する。たとえば、対象とする期間でエラーバジェットの 75% が消費されたらアラート、50% が消費されたら警告のように設定する。
92. FlutterNinjas 9 2 3.4. アラートを作成する エラーバジェットアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ エラーバジェットアラートは閾値に基づき、SLO のエラーバジェットの 一 定の割合が 消費されなかったときに通知する。たとえば、対象とする期間でエラーバジェットの 75% が消費されたらアラート、50% が消費されたら警告のように設定する。 エラーバジェット？
93. FlutterNinjas 9 3 3.4. アラートを作成する エラーバジェット https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ サービスの信頼性がどの程度損なわれても許容できるかを 示 す指標。 サービスレベル 目 標（SLO）が「99.99%」のリクエスト応答率を維持することである場合、 エラーバジェットは、エラー応答率を「0.01%」以下に抑えることになる。
94. FlutterNinjas 9 4 3.4. アラートを作成する https://docs.datadoghq.com/ja/service_management/service_level_objectives/error_budget/ エラーバジェットアラート 機能名 80%、100%の エラーバジェットを消費したら アラートが鳴る ※ Sentryに備わっているアラート機能ではなく、Sentryの計測データをもとに 自 作したもの
95. FlutterNinjas 9 5 3.4. アラートを作成する バーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ エラーバジェットの消費率が指定した閾値を超え、それが特定の期間継続した場合に 通知される。たとえば、SLO の 7 日 間 目 標に対して、過去 5 分間で過去 1 時間に 16.8 以上のバーンレートが測定された場合にアラートを設定できる。
96. 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
97. FlutterNinjas 9 7 3.4. アラートを作成する バーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ バーンレートアラートによって多くのデグレに気付けることが可能。 しかし、以下の問題がある。 ❌ ユーザー起因のエラーやキャンセルはタイミングによってブレが 大 きい ❌ 深夜や早朝などセッションが下がるタイミングで 一人 のユーザーの 行 動が アラートに 大 きく影響する
98. FlutterNinjas 9 8 3.4. アラートを作成する バーンレートアラート https://docs.datadoghq.com/ja/service_management/service_level_objectives/burn_rate/ バーンレートアラートによって多くのデグレに気付けることが可能。 しかし、以下の問題がある。 ❌ ユーザー起因のエラーやキャンセルはタイミングによってブレが 大 きい → エラーバジェットを上ブレを考慮して調整する ❌ 深夜や早朝などセッションが下がるタイミングで 一人 のユーザーの 行 動が アラートに 大 きく影響する → アラートを鳴らすためにエラーの件数を設定する
99. 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件以上必要
100. FlutterNinjas 1 0 0 3.5. 高 いオブザーバビリティを実現する アラートを検知した後、偽陽性かどうか含め、状況把握できるように プライバシーポリシーに違反しない形で追加する
101. FlutterNinjas 1 0 1 3.5. 高 いオブザーバビリティを実現する アラートを検知した後、偽陽性かどうか含め、状況把握できるように プライバシーポリシーに違反しない形で追加する • ユーザーの端末やOS • 端末の性能(High, Medium, Low) • アプリバージョン • 最後どこの画 面 を表 示 していたか • 通信状態 • etc …
102. FlutterNinjas 1 0 2 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる サービス品質は事業全体にとっても 非 常に 大 事なこと
103. FlutterNinjas 1 0 3 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる エンジニアが品質に取り組んでいることを 事業全体に知ってほしい
104. FlutterNinjas 1 0 4 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる SLI/SLOの仕組みを使ってもっと事業全体で 品質に向き合うことはできないか？
105. FlutterNinjas 1 0 5 DASHBOARD機能の作成 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる
106. FlutterNinjas 1 0 6 DASHBOARD機能 • 目 的: 障害をいつでも誰でも確認できる • 手 段: 身 近にアクセス可能なダッシュボード機能 • 改善軸: 障害の状況把握はまずはここから 始められるようにする 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる
107. FlutterNinjas 1 0 7 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる
108. FlutterNinjas 1 0 8 機能名 時間別の機能の成功率 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる 機能毎の正常を表す、 目 標値
109. FlutterNinjas 1 0 9 3.4. アラートを作成する 緑が成功した成功率、グレーが途中でやめたキャンセル率、 赤 がユーザー体験として理想状態ではない、失敗率を表す
110. FlutterNinjas 1 1 0 3.4. アラートを作成する 📊 ダッシュボード機能 それぞれが10分毎のデータになっている。 25件のうち、24件が成功、1件が失敗している。
111. FlutterNinjas 1 1 1 3.4. アラートを作成する それぞれが10分毎のデータになっている。 こんな感じでエラーが増えていると障害が確認できる
112. FlutterNinjas 1 1 2 📊 ダッシュボード機能 最新バージョンのユーザーで起きている障害かも
113. FlutterNinjas 1 1 3 👍 提供すること ✅ 障害の全体像を把握し、 解消までの初速を上げる ✅ 障害時のダブルチェックのため の情報源になる ✅ 障害の解消を確認する 🙅 提供しないこと 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる
114. FlutterNinjas 1 1 4 👍 提供すること ✅ 障害の全体像を把握し、 解消までの初速を上げる ✅ 障害時のダブルチェックのため の情報源になる ✅ 障害の解消を確認する 🙅 提供しないこと ❌ これ 一 つで完全に障害解消までできる ❌ この情報だけを100%信 用 して ビジネス判断をする ❌ ユーザー単位やバージョン単位などの 詳細なデータ 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる
115. FlutterNinjas 1 1 5 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる
116. FlutterNinjas 1 1 6 3 . 6 . SLI/SLOをチーム ・ 事業に定着させる ビジネスメンバーを中 心 にインシデントの 連絡が来た時に即座にユーザー影響を確認する ツールとして定着！
117. FlutterNinjas 1. 平均復旧時間はどのくらい改善したのか 2. 所感 1 1 7 4. ユーザー体験を可視化するSLI/SLO を実際に運 用 してみて
118. FlutterNinjas 1 1 8 4.1. 平均復旧時間はどのくらい改善したのか 障害には以下のパターンが存在する • 内部コードによるデグレ • 連携している外部サービス(Firebase、決済系 ・ 銀 行 サービス) の障害やメンテナンス
119. FlutterNinjas 1 1 9 4.1. 平均復旧時間はどのくらい改善したのか 障害には以下のパターンが存在する • 内部コードによるデグレ → 2024/2 から運 用 開始後、計測範囲でのデグレなし • 連携している外部サービス(Firebase、決済系 ・ 銀 行 サービス) の障害やメンテナンス → 影響範囲の確認が圧倒的に短縮し、これまで気づかずに スルーしてしまっていた事象を確認できるようになった
120. FlutterNinjas 1 2 0 いかがたったでしょうか。SLI/SLOは 非 常に専 門 知識が求められ、 今回時間の都合上、説明を省略した箇所も多く存在します。 自 分もSLI/SLOについてまだまだわからないことも多く、引き続き学んでいきます。 興味を持たれた 方 はぜひ、後ほどお話しできれると嬉しいです。 4.2. 所感
121. FlutterNinjas 1 2 1 4 . 2 . One more thing … Sample Repository is available.
122. FlutterNinjas 1 2 2 ご清聴ありがとうございました 🙌