显示时间
了解如何使用 Sentry React Native SDK 测量显示时间。
Sentry 的 React Native SDK 包含一个跟踪功能，允许您测量应用程序的 显示时间。本指南将展示如何使用 Sentry 的 React Native SDK 在应用程序中测量显示时间。
显示时间由两部分组成：首次显示时间 (TTID) 和完全显示时间 (TTFD)。TTID 测量显示第一个帧所需的时间，而 TTFD 测量显示用户可以交互的完整内容所需的时间。
要自动测量 React Navigation 屏幕的首次显示时间，请在 Sentry.ReactNavigationInstrumentation 实例中启用 enableTimeToInitialDisplay 选项。
import * as Sentry from "@sentry/react-native";
import { NavigationContainer } from "@react-navigation/native";
const navigationIntegration = Sentry.reactNavigationIntegration({
enableTimeToInitialDisplay: true,
});
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [navigationIntegration],
})
function App = () => {
const containerRef = React.useRef();
return (
<NavigationContainer
ref={containerRef}
onReady={() => {
navigationIntegration.registerNavigationContainer(containerRef);
}}>
</NavigationContainer>
);
};
了解更多关于 Sentry 的 React Navigation 集成，请参阅 自动 Instrumentation 页面。
首次显示时间的测量值从 React Navigation 分发导航事件开始，到原生 Screen 组件初始化后的下一帧渲染结束。
如果屏幕有动画效果，首次显示时间的测量值将包括动画完成所需的时间（不包括 iOS 上的 JavaScript 驱动动画）。
首次显示时间仅适用于 React Navigation 版本 5 及以上。
当自动捕获的首次显示时间不符合您的要求时，可以使用 Sentry.TimeToInitialDisplay 组件进行覆盖。
import * as Sentry from "@sentry/react-native";
import * as React from "react";
import { View } from "react-native";
function MyComponent() {
return (
<View>
<Sentry.TimeToInitialDisplay record={true} />
</View>
);
}
要测量屏幕完全显示的时间，可以使用 Sentry.TimeToFullDisplay 组件。
import * as Sentry from "@sentry/react-native";
import { useState, useEffect } from "react";
import { View, Text } from "react-native";
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://example.com/data")
.then((response) => response.json())
.then((data) => setData(data));
}, []);
const shouldRecordFullDisplay = data !== null;
return (
<View>
<Sentry.TimeToFullDisplay record={shouldRecordFullDisplay} />
{data ? <Text>{data}</Text> : <Text>Loading...</Text>}
</View>
);
}
Sentry.TimeToInitialDisplay和Sentry.TimeToFullDisplay组件在包裹其他组件时的行为与<></>相同。在
Sentry.TimeToInitialDisplay和Sentry.TimeToFullDisplay组件之后执行的任何计划动画不会被记录在测量的显示时间值中。本指南假设您使用的是 Sentry React Native SDK 版本 5.20.0 或更高版本。
显示时间目前在 Web 和 React Native 新架构上不可用。
显示时间支持 Expo 应用程序，但不适用于 Expo Go。请构建原生项目以测试此功能。
显示时间需要 Sentry 的原生组件。从旧版本 SDK 升级时，请重新构建原生项目以确保原生组件是最新的。