设置 EAS Observe

编辑页面

了解如何安装 EAS Observe，并开始从你的生产应用中收集性能指标。

EAS Observe 会在生产环境中跟踪你应用的启动性能。本指南将带你完成库的安装、应用设置，以及查看你的第一组指标。

前提条件

Prerequisites

3 requirements

Expo 用户账号

任何拥有 Expo 账号的人都可以使用 EAS Observe。你可以在 expo.dev/signup 注册。

Expo SDK 55 或更高版本

EAS Observe 需要 SDK 55 或更高版本。运行 npx expo-doctor 检查你的 SDK 版本，并运行 npx expo install --fix 更新依赖。

EAS 项目

你的应用必须已关联到一个 EAS 项目。请确保应用配置中的 extra.eas.projectId 包含项目 ID，或者通过运行 eas init 创建一个。

安装库

请确保你使用的是最新版本的 expo，然后安装 expo-observe：

Terminal

- npx expo install --fix

- npx expo install expo-observe

包裹你的根布局

使用 AppMetricsRoot（SDK 55）或 ObserveRoot（SDK 56 及更高版本）包裹你的根布局。这个高阶组件（HOC）会自动为你测量首次渲染时间（TTR）。

app/_layout.tsx

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

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

export default ObserveRoot.wrap(RootLayout);

app/_layout.tsx

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

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

export default AppMetricsRoot.wrap(RootLayout);

标记为可交互

当你的应用完全准备好接受用户交互时，调用 markInteractive()。这应该在闪屏之后的初始化工作全部完成后调用，例如：

检查更新
用户认证
获取初始数据
播放闪屏动画

app/_layout.tsx

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

// 在获取资源期间保持闪屏可见
SplashScreen.preventAutoHideAsync();

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

  useEffect(() => {
    async function prepare() {
      try {
        await authenticateUser();
        await fetchInitialData();
      } catch (e) {
        console.warn(e);
      } finally {
        setIsReady(true);
      }
    }

    prepare();
  }, []);

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

  if (!isReady) {
    return null;
  }

  return <Stack />;
}

export default ObserveRoot.wrap(RootLayout);

app/_layout.tsx

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

// 在获取资源期间保持闪屏可见
SplashScreen.preventAutoHideAsync();

function RootLayout() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        await authenticateUser();
        await fetchInitialData();
      } catch (e) {
        console.warn(e);
      } finally {
        setIsReady(true);
      }
    }

    prepare();
  }, []);

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

  if (!isReady) {
    return null;
  }

  return <Stack />;
}

export default AppMetricsRoot.wrap(RootLayout);

markInteractive() 可以在每个会话中安全地调用多次，但只有第一次调用会记录该指标。如果你的应用有多个入口屏幕（例如引导流程、登录流程或深度链接目标），请在这些屏幕中的每一个上调用 markInteractive。如果你只在其中一个屏幕上调用，当应用通过深度链接打开到另一个屏幕时，可交互时间（TTI）将不会被记录。

创建新构建

在安装 expo-observe 并添加埋点后，请为你的应用创建一个新构建：

Terminal

- eas build

默认情况下，从调试构建收集的指标不会被发送。若要在调试构建中测试集成，请参阅在开发环境中启用指标。

查看你的指标

打开你的项目，并打开 EAS 控制台中的 Observe 选项卡来查看来自你的应用的指标。

有关筛选、版本比较和会话调查的详细信息，请参阅 Dashboard 指南。

你也可以使用 EAS CLI 通过终端查询指标：

eas observe:versions：列出应用版本及其构建 ID、更新组 ID 和发布日期。适用于查找筛选其他命令所需的版本标识符。
eas observe:metrics-summary：按应用版本分组显示汇总的性能指标统计信息（例如中位数、p75 和 p95 值）。可用于比较不同发布版本之间的整体启动性能。
eas observe:metrics：按数值排序显示单个性能指标事件，包括会话和设备元数据。可用于调查特定的缓慢会话或异常值。
eas observe:events：显示应用通过 Observe.logEvent 发送的单个事件。详情请参阅用户定义事件。

使用 --help 运行上述任意命令，以查看可用的标志和参数。