OpenAIExpoJun 16, 2026, 3:30 PM

Introducing Observe: Performance monitoring for Expo apps

A condensed section focused on the key takeaways first.

Original Post

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

Introducing Observe: Performance monitoring for Expo apps

Key Points

  • Real-user startup & TTI metrics with device/context breakdowns
  • Per-screen navigation metrics and OTA update download timing
  • Free open beta (10k MAUs); post-beta free tier up to 1k MAUs

Summary

Observe (EAS Observe) is a production performance monitoring tool for Expo / React Native apps that collects real-user metrics across devices, networks, and conditions. It captures startup timings (cold/warm launches, time to first render, time to interactive), bundle load, per-screen navigation metrics, OTA update download times, and custom events, and surfaces distributions (median, P90/P99) with full device and environment context to make regressions actionable.

Key Points

  • Built-in metrics: cold launch, warm launch, time to first render, time to interactive (TTI), bundle load; reported with median, avg, min, max, P90/P99 and device/context metadata.
  • Per-screen navigation: opt-in integrations for Expo Router and React Navigation; supports initial vs subsequent renders and screen-level TTI via markInteractive.
  • OTA update metrics: automatic download counts and median/P90 download times per published update.
  • Custom events & session drill-down: emit events with logEvent() and inspect full session timelines with device context.
  • Quick integration: works on Expo SDK 56+. Wrap your root with ObserveRoot and call markInteractive() once the app is ready. Example:
import { ObserveRoot, useObserve } from 'expo-observe';
// wrap root
export default ObserveRoot.wrap(RootLayout);
// mark interactive when ready
const { markInteractive } = useObserve();
useEffect(() => { if (isReady) { SplashScreen.hide(); markInteractive(); } }, [isReady]);
  • CLI & automation: query metrics from the terminal with EAS CLI commands (observe:metrics, observe:metrics-summary, observe:routes, observe:events, observe:versions) — all support --json output.
  • Agent support: the expo-observe skill can install/configure Observe and run agentic analyses (e.g., "which routes are slowest and why?").
  • Pricing & beta: free while in open beta (includes first 10,000 MAUs). After beta, paid plans scale with MAUs and a free tier will remain (up to 1,000 MAUs with all five built-in metrics). Users receive at least 60 days' notice before pricing changes.

Roadmap / Next

  • Dashboard improvements for clearer build/version/update comparisons and regression highlights.
  • Crash collection for iOS/Android to factor into release health.
  • Request timing to surface external API latency per request.
  • Alerting via Email/Slack for performance regressions.

Getting started

  1. Ensure Expo SDK 56+ and link project to EAS (if not already).
  2. Install expo-observe and wrap your root with ObserveRoot.wrap(...).
  3. Mark app readiness with markInteractive() after auth/data loading and hiding the splash screen.
  4. Make a production build and monitor metrics in the dashboard or via EAS CLI.

For details and configuration (sampling, environments, integrations) see the Observe docs and join #expo-observe on Discord to give feedback.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

Observe の紹介:Expoアプリ向けパフォーマンス監視

観測ツール EAS Observe とは

EAS Observe は React Native 向けの本番パフォーマンス監視ツールです。実際のユーザーの手に渡ったときの、実機・実ネットワーク・実条件下でのアプリの挙動を教えてくれるので、どこが遅いのか、リリースで何が変わったのかを把握して、ユーザーに影響が出る前に修正できます。

Observe はオープンベータ期間中は無料で、最初の 10,000 月間アクティブユーザー(MAU)までは無料です。ベータ終了後は MAU に応じてスケールする有料プランを導入しつつ、小規模アプリ向けに全5つの組み込みメトリクスを含む最大 1,000 MAU の無料ティアを維持します。料金適用前には全員に少なくとも 60 日前の通知を行います。


なぜ React Native アプリに対するオブザーバビリティを作ったのか

React Native のエコシステムには、開発中の理解に役立つツール(React Native DevTools、Expo Atlas、Radon IDE)や、障害時に役立つツール(Sentry、Bugsnag)があります。しかし、その中間に穴がありました。クラッシュもしないし壊れてもいないが「単に遅い」アプリに対して、冷たい起動から実際にインタラクティブになるまでの時間は?無害に見えた依存関係のアップデートが起動時間を 400ms 増やしたのか?どの画面が最も遅く、どのユーザー層で起きているのか? これらに答えるには推測か独自テレメトリの構築が必要でした。

Observe はその答えを箱から出してすぐ得られるように設計されています。


Observe で得られるもの

実際のセッションから得られる本当の起動メトリクス

Observe はアプリの体感速度を定義するメトリクスを自動で追跡します:

  • Cold launch - 完全な新規起動。最も遅く、最も重要なパス。
  • Warm launch - OS がメモリに保持していたアプリへの復帰。
  • Time to first render - スプラッシュ以外の何かが初めて表示されるまでの時間。
  • Time to interactive (TTI) - ユーザーが実際にタップやスクロールなど操作できるようになる時間。ユーザーが体感する主要な数値です。
  • Bundle load - JavaScript の読み込みと評価にかかる時間。

これらは本番セッションから取得されるため、単一の「成功例」だけでなく分布全体を確認できます。Observe は median、average、min、max、P90/P99 を報告します。遅い上位 10% の体験に離脱(churn)が隠れていることが多いためです。

各データポイントには説明に必要なコンテキストが付与されます:device model、OS version、app version と build、region、network type、さらには thermal state や low-power mode など。したがって「起動が遅い」という曖昧な指摘は「古い Android デバイスのセルラー環境で起動が遅い」にまで具体化され、実際に対処可能な問題になります。

リリースで何が変わったかを正確に見る

多くのパフォーマンス回帰は「問題なさそうに見えた」リリースと共に配布されます。Observe はタイムライン上にビルドやアップデートをオーバーレイ表示するので、回帰は謎ではなく指を差せる縦線になります。バージョン間やビルド間、さらに埋め込み JavaScript と OTA アップデートの比較まででき、アプリバージョンから特定のビルド番号やアップデート、EAS ビルドへドリルダウンしてどこで数値が動いたかを特定できます。

画面ごとのナビゲーションメトリクス

Observe は Expo Router と React Navigation の両方に対する画面単位のナビゲーションメトリクスをサポートします。この連携はオプトインで、config オブジェクト内で該当する integration を有効にする必要があります。有効化すると Observe は画面のレンダリングメトリクスを自動で追跡します。

レンダリングは「initial」と「subsequent」に区別されます。subsequent render は、ナビゲート時点でその画面が既にスタック内でレンダリング済みであったことを意味します(例:モーダルを開いて閉じた後に前の画面に戻るなど)。さらに各画面に対して markInteractive 呼び出しを追加すると、画面単位の time to interactive も取得できます。

アップデートのダウンロード時間

OTA Updates を使用している場合、Observe はフィールドでのアップデートのダウンロードにかかる時間を自動的に追跡します。追加設定は不要で、公開された各アップデートごとのダウンロード回数と median/P90 ダウンロード時間が得られるため、大きなアップデートがユーザーに素早く届いているかを確認できます。

カスタムイベントとセッションのドリルダウン

組み込みメトリクスに加え、logEvent() でアプリが重要視する任意のイベントを送出できます。個々のユーザーセッションにドリルダウンすると、発生順に並んだタイムラインとすべてのデバイスコンテキストを確認できます。


約5分で始められます

Observe は SDK 56+ の任意の Expo アプリで動作します。プロジェクトがまだ EAS に紐づいていない場合は、まず eas init を実行してください(無料・数秒で終わります)。

Expo SDK 56 以降では、パッケージをインストールしたらルートレイアウト(Expo Router を使っていない場合は app)をラップします:

import { Stack } from 'expo-router';
import { ObserveRoot } from 'expo-observe';

function RootLayout() {
  return <Stack />;
}

export default ObserveRoot.wrap(RootLayout);

次に、認証・データロード・スプラッシュ画面の非表示などユーザーが実際に使える状態になった瞬間をマークして、Observe に time to interactive を測定させます:

const { markInteractive } = useObserve();
useEffect(() => {
  if (isReady) {
    SplashScreen.hide();
    markInteractive();
  }
}, [isReady, markInteractive]);

プロダクションビルドを作成して配布すれば、メトリクスがダッシュボードに流れ始めます。これが統合の全てです。設定オプション、サンプリング、環境、Expo Router / React Navigation 連携についてはドキュメントに詳細があります。

Prefer to skip setup? With the expo-observe skill, just tell your agent "set up Observe on this project" and it'll handle the install and linking for you.


EAS CLI との統合

ダッシュボードが Observe のホームですが、それだけが入り口ではありません。すべてのメトリクスは端末から EAS CLI でクエリ可能です。現在は observe:metricsobserve:metrics-summaryobserve:routesobserve:eventsobserve:versions といったコマンドを用意しており、いずれも --json 出力を含みます。


エージェントと一緒に使う

Observe は agentic 分析を念頭に設計されています。expo-observe スキルには次のようなエージェント向け手順が含まれます:

  • Observe をプロジェクトにインストールして設定する方法
  • 各メトリクスが何を意味するか、望ましい範囲はどこかの理解
  • メトリクスのクエリと分析方法

これにより "please set up Observe on this project" のような自然言語でのセットアップや、"which routes are the slowest and why?" といった分析が可能になります。


次に取り組んでいること

Observe は現在も積極的に改善・反復中です。現時点で予定している主な内容:

  • ダッシュボードの改善 - 柔軟性を重視して agentic 分析を念頭にサービスを開始しましたが、ダッシュボードでのプロジェクト全体の俯瞰も強化したいと考えています。どのメトリクスや変化がより影響が大きいかを学び、ビルド/バージョン/アップデートの比較や回帰のハイライトをより明確にする UI を作っています。
  • クラッシュ - Observe の主目的はクラッシュレポートではありませんが、リリースの健全性を評価する上で重要な指標です。iOS と Android のクラッシュ情報の収集と送信に取り組んでいます。
  • Request Timing - 外部 API への各リクエストにかかる時間を確認できる機能。起動や個別画面のパフォーマンスボトルネックのデバッグに役立ちます。
  • アラート - メールや Slack 経由でパフォーマンス低下を通知するアラートの作成・管理機能。

フィードバックをください!

機能要望がありますか?Discord の #expo-observe チャンネルでお知らせください!

  • Read the Observe docs
  • Get started in five minutes
  • Join the conversation in Discord