用户交互 Instrumentation
了解可以捕获哪些用户交互
UI instrumentation 捕获事务并为触摸交互添加面包屑。使用 React Native Gesture Handler 的手势支持也可以通过 sentryTraceGesture 包装器实现。
事务名称由显示的屏幕名称（例如，LoginScreen）和用户交互的元素标签（例如，login_button）的组合而成。
要捕获 UI 事务，您必须首先设置 路由 instrumentation。
UI instrumentation 跟踪默认是禁用的，但您可以通过将 enableUserInteractionTracing 选项设置为 true 并包装根组件来启用它：
Copied
import * as Sentry from "@sentry/react-native";
const navigationIntegration = Sentry.reactNavigationIntegration(); // Or any other navigation integration
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
enableUserInteractionTracing: true,
tracesSampleRate: 1.0,
integrations: [navigationIntegration],
});
const App = () => <View>Your App</View>;
export default Sentry.wrap(App);
UI 元素的标识标签由 Sentry.wrap 中的 labelName 选项设置。如果没有提供值，则使用 sentry-label。如果无法识别元素，则不会捕获事务。
Copied
export default Sentry.wrap(App, {
touchEventBoundaryProps: { labelName: "my-label" },
});
如果 UI 事务处于空闲状态但没有任何子跨度，它将被丢弃。
因为事务会自动绑定到作用域，您可以使用 自定义 instrumentation 创建子跨度。请注意，运行中的 UI 事务的 idleTimeout 默认为 1000 毫秒（一秒）。
要从 React Native Gesture Handler 创建 UI 事务，您需要使用 sentryTraceGesture 包装单个手势。这也会自动创建面包屑。包装器 sentryTraceGesture(label, gesture) 接受唯一标识屏幕中手势的 string 标签以及要包装的手势对象。
仅支持 RNGH API v2。
Copied
import React from "react";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { sentryTraceGesture } from "@sentry/react-native";
export const GesturesTracingScreen = () => {
const pinch = Gesture.Pinch();
const longPress = Gesture.LongPress();
const gesture = Gesture.Race(
sentryTraceGesture("pinch-to-zoom", pinch),
sentryTraceGesture("long-press-to-cancel", longPress),
);
return <GestureDetector gesture={gesture}>// ...</GestureDetector>;
};