React 组件名称
了解 Sentry 的 React SDK 如何帮助您监控组件。
Sentry 帮助您捕获 React 组件并解锁应用程序中的更多见解。您可以设置它以使用 React 组件名称而不是选择器。
因此，您可以查看组件名称而不是这样的选择器：
button.en302zp1.app-191aavw.e16hd6vm2[role="button"][data-test-id="common-options"]
您可以确切地看到使用了哪个 React 组件，例如：
CommonOptions
您可以通过 Babel 插件 捕获应用程序中的 React 组件名称，这可以解锁强大的工作流并减少歧义。例如，您可以搜索特定 React 组件被点击的重放。您还可以在 Sentry 的 性能 页面的面包屑和 span 中看到被点击的组件名称。这显著减少了通过查看元素的 CSS 选择器（在压缩后变得更加模糊）来确定哪个元素被交互的歧义。
我们正在努力在未来发布更多利用组件名称捕获的功能，并强烈建议您配置项目以使用它。
请注意，您的 Sentry 浏览器 SDK 必须至少为版本 7.91.0 才能使用这些功能。 只有 .jsx 或 .tsx 文件中的 React 组件可以被跟踪。
您可以通过两种不同的方式在应用程序中设置 React 组件名称捕获：
我们建议使用第一种选项，因为 Sentry 打包插件附带了许多其他有用的功能来丰富您的 Sentry 工作流，包括：自动上传 source map、创建发布版本、自动发现发布名称和发布注入。
使用打包插件设置：
按照您项目使用的打包工具的 npm 页面上的说明进行操作：
请注意，尽管存在 esbuild 的 Sentry 打包插件，但目前不支持 React 组件名称捕获。
按照说明安装打包插件并将其添加到打包工具的配置中后，通过将标志设置为 true 来启用组件名称捕获：
// Example specific to Vite, see documentation for other bundlers
sentryVitePlugin({
// ... other options above
reactComponentAnnotation: { enabled: true }
}),
如果您使用 Rollup 作为打包工具，请确保将 sentryRollupPlugin 放在任何其他转换 JSX 的插件之前。
现在，您将能够在面包屑、span 中看到组件名称，并通过组件名称搜索重放。 有关通过组件名称搜索重放的更多信息，请参阅 此页面。
Babel 插件在构建时解析应用程序的 JSX 源代码，并在其上应用额外的 data 属性。这些属性随后出现在应用程序构建的 HTML 的 DOM 节点上，指示每个节点源自哪个 React 组件和文件。
例如，如果您有一个名为 MyAwesomeComponent 的组件，位于 myAwesomeComponent.jsx 文件中：
function MyAwesomeComponent() {
return <div>This is a really cool and awesome component!</div>;
}
在您的打包工具应用插件并构建项目后，生成的 DOM 节点将如下所示：
<div
data-sentry-component="MyAwesomeComponent"
data-sentry-source-file="myAwesomeComponent.jsx"
>
This is a really cool and awesome component!
</div>
Sentry 浏览器 SDK 将从这些 data 属性中提取值，并在您的组件被交互时收集这些值。