성능 모니터링·프로파일링

EAS Observe Open Beta로 cold/warm launch·TTI·TTR·bundle load를 수집하고, Hermes V1·JSI 경계를 실기기로 검증하며 P95 기준 rollout gate를 두는 프로덕션 성능 운영 체계.

핵심 요약

EAS Observe는 Open Beta 상태의 Expo 공식 프로덕션 모니터링으로 Android·iOS production build에서 cold/warm launch, TTI, TTR, bundle load time을 실사용자 기준으로 수집합니다.
ObserveRoot.wrap과 useObserve().markInteractive()로 계측하며, markInteractive는 첫 호출만 기록되므로 딥링크·로그인·온보딩 등 여러 진입점의 ready 지점에 둡니다.
release 비교는 OTA group·build ID별 P50/P75/P95로 보고, rollout gate는 10% 단계에서 TTI P95가 10% 이상 악화하면 중단합니다.
Hermes V1이 기본 엔진이므로 worklets·Reanimated·MMKV·Skia 같은 JSI 경계는 실기기에서 검증하고, OTA bytecode diff payload size와 bundle load를 함께 관측합니다.
도구는 React Native DevTools(개발), Expo Atlas(번들 분석), EAS Observe(production), Sentry/BugSnag(crash)로 역할을 나누고 custom event에는 PII를 넣지 않습니다.

EAS Observe (Open Beta)

EAS Observe는 Expo 공식 프로덕션 성능 모니터링 서비스입니다. 2026년 5월 기준 Open Beta이며, Android와 iOS production build에서 실제 사용자 startup metric을 수집합니다.

추적 지표

지표	설명
Cold Launch	앱 최초 시작 시간
Warm Launch	백그라운드 복귀 시간
TTI (Time to Interactive)	사용자 인터랙션 가능 시점
TTR (Time to First Render)	첫 화면 렌더링 완료 시점
Bundle Load Time	JS 번들 로드 소요 시간

SDK 56 설치 패턴

import { Stack } from 'expo-router';
import { ObserveRoot, useObserve } from 'expo-observe';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';

SplashScreen.preventAutoHideAsync();

function RootLayout() {
  const [ready, setReady] = useState(false);
  const { markInteractive } = useObserve();

  useEffect(() => {
    bootstrap().finally(() => setReady(true));
  }, []);

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

  return ready ? <Stack /> : null;
}

export default ObserveRoot.wrap(RootLayout);

markInteractive()는 여러 entry screen에서 불러도 첫 호출만 기록됩니다. 딥링크, 로그인, 온보딩처럼 초기 진입점이 여러 개라면 각 ready 지점마다 호출을 넣습니다.

운영 지표 조회

eas observe:versions
eas observe:metrics-summary --platform ios
eas observe:metrics --limit 50
eas observe:events

사용처	권장 기준
Release comparison	OTA group·build ID별 P50/P75/P95 비교
Session investigation	저사양 기기·특정 OS·특정 update group의 outlier 확인
Rollout gate	10% rollout에서 TTI P95 10% 이상 악화 시 중단
개인정보	anonymous install ID 기준. 사용자 식별자나 PII를 custom event에 넣지 않음

Hermes V1 성능 개선

SDK 56은 React Native 0.85 기반으로 Hermes V1을 기본 JS 엔진으로 사용합니다.

startup과 runtime path가 빨라지지만 체감 효과는 앱 구조와 native module 그래프에 따라 달라집니다.
react-native-worklets, Reanimated, MMKV, Skia 같은 JSI 경계는 실제 디바이스에서 검증합니다.
EAS Update bytecode diff가 기본이므로 OTA payload size와 bundle load time을 함께 관측합니다.

개발·번들 분석 도구

도구	역할
React Native DevTools	개발 중 JS/runtime debugging
Expo Atlas	번들 구성과 size 분석
EAS Observe	production startup metric
Sentry/BugSnag	crash reporting. EAS Observe의 crash tracking은 아직 별도 도구 병행 권장

JS 스레드 프레임 드롭율

성능 예산의 기준선을 잡으려면 프레임 드롭율부터 계산합니다.

\text{드롭율(\%)} = \frac{\text{전체 프레임} - \text{정상 프레임(≥ 60 fps)}}{\text{전체 프레임}} \times 100

번들 다운로드 시간

번들 크기 최적화 목표치를 네트워크 속도 기준으로 산정합니다.

\text{다운로드 시간(초)} = \frac{\text{번들 크기(MB)} \times 8}{\text{네트워크 속도(Mbps)}}

핵심 요약

EAS Observe는 Open Beta 상태의 Expo 공식 프로덕션 모니터링으로 Android·iOS production build에서 cold/warm launch, TTI, TTR, bundle load time을 실사용자 기준으로 수집합니다.
ObserveRoot.wrap과 useObserve().markInteractive()로 계측하며, markInteractive는 첫 호출만 기록되므로 딥링크·로그인·온보딩 등 여러 진입점의 ready 지점에 둡니다.
release 비교는 OTA group·build ID별 P50/P75/P95로 보고, rollout gate는 10% 단계에서 TTI P95가 10% 이상 악화하면 중단합니다.
Hermes V1이 기본 엔진이므로 worklets·Reanimated·MMKV·Skia 같은 JSI 경계는 실기기에서 검증하고, OTA bytecode diff payload size와 bundle load를 함께 관측합니다.
도구는 React Native DevTools(개발), Expo Atlas(번들 분석), EAS Observe(production), Sentry/BugSnag(crash)로 역할을 나누고 custom event에는 PII를 넣지 않습니다.

EAS Observe (Open Beta)

추적 지표

지표	설명
Cold Launch	앱 최초 시작 시간
Warm Launch	백그라운드 복귀 시간
TTI (Time to Interactive)	사용자 인터랙션 가능 시점
TTR (Time to First Render)	첫 화면 렌더링 완료 시점
Bundle Load Time	JS 번들 로드 소요 시간

SDK 56 설치 패턴

import { Stack } from 'expo-router';
import { ObserveRoot, useObserve } from 'expo-observe';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';

SplashScreen.preventAutoHideAsync();

function RootLayout() {
  const [ready, setReady] = useState(false);
  const { markInteractive } = useObserve();

  useEffect(() => {
    bootstrap().finally(() => setReady(true));
  }, []);

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

  return ready ? <Stack /> : null;
}

export default ObserveRoot.wrap(RootLayout);

운영 지표 조회

eas observe:versions
eas observe:metrics-summary --platform ios
eas observe:metrics --limit 50
eas observe:events

사용처	권장 기준
Release comparison	OTA group·build ID별 P50/P75/P95 비교
Session investigation	저사양 기기·특정 OS·특정 update group의 outlier 확인
Rollout gate	10% rollout에서 TTI P95 10% 이상 악화 시 중단
개인정보	anonymous install ID 기준. 사용자 식별자나 PII를 custom event에 넣지 않음

Hermes V1 성능 개선

SDK 56은 React Native 0.85 기반으로 Hermes V1을 기본 JS 엔진으로 사용합니다.

startup과 runtime path가 빨라지지만 체감 효과는 앱 구조와 native module 그래프에 따라 달라집니다.
react-native-worklets, Reanimated, MMKV, Skia 같은 JSI 경계는 실제 디바이스에서 검증합니다.
EAS Update bytecode diff가 기본이므로 OTA payload size와 bundle load time을 함께 관측합니다.

개발·번들 분석 도구

도구	역할
React Native DevTools	개발 중 JS/runtime debugging
Expo Atlas	번들 구성과 size 분석
EAS Observe	production startup metric
Sentry/BugSnag	crash reporting. EAS Observe의 crash tracking은 아직 별도 도구 병행 권장

JS 스레드 프레임 드롭율

성능 예산의 기준선을 잡으려면 프레임 드롭율부터 계산합니다.

\text{드롭율(\%)} = \frac{\text{전체 프레임} - \text{정상 프레임(≥ 60 fps)}}{\text{전체 프레임}} \times 100

번들 다운로드 시간

번들 크기 최적화 목표치를 네트워크 속도 기준으로 산정합니다.

\text{다운로드 시간(초)} = \frac{\text{번들 크기(MB)} \times 8}{\text{네트워크 속도(Mbps)}}

EAS Observe (Open Beta)

추적 지표

SDK 56 설치 패턴

운영 지표 조회

Hermes V1 성능 개선

개발·번들 분석 도구

JS 스레드 프레임 드롭율

번들 다운로드 시간

목차

성능 모니터링·프로파일링

EAS Observe (Open Beta)

추적 지표

SDK 56 설치 패턴

운영 지표 조회

Hermes V1 성능 개선

개발·번들 분석 도구

JS 스레드 프레임 드롭율

번들 다운로드 시간

목차