视图层次结构
了解在错误发生时如何调试视图层次结构。Sentry 将视图层次结构的表示与原始事件配对，为您提供更多问题的洞察。
Sentry 可以渲染错误的视图层次结构的 JSON 表示，并将其作为 附件 包含在内。
此功能仅适用于具有用户界面的 SDK，例如移动和桌面应用程序的 SDK。在某些环境中（如原生 iOS），渲染视图层次结构需要 UI 线程，而在崩溃时该线程可能不可用。另一个例子是，如果事件发生在屏幕加载之前，则视图层次结构可能不可用。因此，此功能本质上是一个尽力而为的解决方案。
视图层次结构的去混淆功能在原生 SDK 和 React Native 中完全支持，但目前不支持 Flutter。
视图层次结构调试是一个选择性启用的功能。你可以按照以下方法启用它：
import * as Sentry from "@sentry/react-native";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
attachViewHierarchy: true,
});
视图层次结构会出现在“附件”选项卡中，你可以在其中查看所有附件以及相关事件。点击事件 ID 以打开该特定事件的 问题详情 页面。
在 问题详情 页面中，你可以在一个名为“视图层次结构”的部分中与视图层次结构附件进行交互。该部分表示应用程序在错误事件发生时的状态。有三种显示方式：树形视图、线框图和选定节点的详细视图。你可以在树或线框图中选择节点以查看 SDK 收集的属性。SDK 会报告每个节点的以下键：alpha、visible、x、y、width、height、type 和 identifier（如果适用），但也可能有特定于 SDK 的其他值。此功能可以用作探索性工具来调试布局问题、可视化不必要的渲染内容或更好地理解视图之间的关系。
由 SDK 捕获的视图层次结构表示基于 React Native 组件结构生成的原生用户界面。通常，每个 React 元素映射到一个原生组件，但存在例外情况，例如 React Native 文档中描述的 View Flattening。
React Native 创建的包装应用程序的原生组件是视图层次结构的另一部分。
下面的代码片段展示了 React Native 和原生 UIKit 组件在视图层次结构中的表示方式。
// UIWindow
// RCTRootContentView
// ...
function MyComponent() {
return (
<View testID="id">
{" "}
// RTCView - id
<Text>Hello World!</Text> // RCTTextView
</View>
);
}
下面的代码片段展示了 React Native 和原生 Android 组件在视图层次结构中的表示方式。
// com.android.internal.policy.DecorView
// android.widget.LinearLayout
// ...
// com.facebook.react.ReactRootView
function MyComponent() {
return (
<View>
{" "}
// com.facebook.react.views.view.ReactViewGroup
<Text>Hello World!</Text> //
com.facebook.react.views.text.ReactTextView
</View>
);
}
// android.view.View - navigationBarBackground
// android.view.View - statusBarBackground