跟踪触摸事件
了解如何启用跟踪触摸事件。
使用版本 1.5.0
或更高版本,可以通过 Sentry 的 React Native SDK 跟踪触摸事件。你还需要用 TouchEventBoundary
包裹你的应用程序。
在应用程序的根部,通常是 App.js
,用 Sentry.TouchEventBoundary
包裹应用组件:
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
包裹应用组件:
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
。
const YourCoolComponent = (props) => {
return (
<View sentry-label="CardContainer">
<Text sentry-label="CoolText">You are cool</Text>
</View>
);
};
传递 sentry-label
属性时,你不需要担心 Typescript 错误。Typescript 不会对外部带有 '-' 字符的属性抛出错误。
你可以传递特定的选项来配置边界,方式如下:
<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 中不会看到完整的原始组件名称,而是会看到混淆后的名称。请参阅我们的 生产环境中混淆名称的故障排除指南 文档以解决此问题。