跟踪触摸事件

了解如何启用跟踪触摸事件。

使用版本 1.5.0 或更高版本,可以通过 Sentry 的 React Native SDK 跟踪触摸事件。你还需要用 TouchEventBoundary 包裹你的应用程序。

在应用程序的根部,通常是 App.js,用 Sentry.TouchEventBoundary 包裹应用组件:

Copied
import * as Sentry from "@sentry/react-native";

const App = () => {
  return (
    <Sentry.TouchEventBoundary>
      <RestOfTheApp />
    </Sentry.TouchEventBoundary>
  );
};

export default AppRegistry.registerComponent(
  "Your Amazing App",
  () => App,
);

在应用程序的根部,通常是 App.js,用 Sentry.withTouchEventBoundary 包裹应用组件:

Copied
import * as Sentry from "@sentry/react-native";

const App = () => {
  return <RestOfTheApp />;
};

export default AppRegistry.registerComponent("Your Amazing App", () =>
  Sentry.withTouchEventBoundary(App),
);

每个触摸事件会自动记录为一个 breadcrumb,并在事件发生时显示在仪表板上,同时显示触摸事件发生的组件树。此组件树使用组件的 name 属性进行记录。默认情况下,React Native 会自动为组件设置此属性。

你可以通过传递 sentry-label 属性来告知 Sentry 需要特别跟踪哪些组件。如果 Sentry 在触摸事件的组件树中检测到带有 sentry-label 的组件,它将记录在仪表板上并显示为发生在该组件中。如果 Sentry 找不到带有标签的组件,Sentry 将回退到指定的 labelName 属性,或者使用 displayName

Copied
const YourCoolComponent = (props) => {
  return (
    <View sentry-label="CardContainer">
      <Text sentry-label="CoolText">You are cool</Text>
    </View>
  );
};

传递 sentry-label 属性时,你不需要担心 Typescript 错误。Typescript 不会对外部带有 '-' 字符的属性抛出错误

你可以传递特定的选项来配置边界,方式如下:

Copied
<Sentry.TouchEventBoundary
  ignoreNames={["BadComponent", /^Connect\(/, /^LibraryComponent$/]}
  labelName="testLabel"
>
  <RestOfTheApp />
</Sentry.TouchEventBoundary>;

breadcrumbCategory

String。分配给触摸事件记录的 breadcrumb 的类别。

breadcrumbType

String。分配给触摸事件记录的 breadcrumb 的类型。

maxComponentTreeSize

number, default: 20。记录触摸事件的组件树时显示的最大组件数量/深度。

ignoreNames

Array<string | RegExp>,接受字符串和正则表达式。在记录触摸事件时忽略的组件名称。这可以防止无用的日志,例如 "Touch event within element: View",在这种情况下你仍然无法确定具体的 View 是哪个。

labelName

String。确定组件标签时查找的属性名称。如果未找到该属性,Sentry 将回退到组件的 displayName

在为生产环境打包时,React Native 会将类和函数名称进行混淆以减少包的大小。这意味着 你在触摸事件的 breadcrumb 中不会看到完整的原始组件名称,而是会看到混淆后的名称。请参阅我们的 生产环境中混淆名称的故障排除指南 文档以解决此问题。