Tweet
Tweet

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 ご清聴ありがとうございました 🙌