组件跟踪

Sentry 的 React Native SDK 提供了组件跟踪功能，使你可以监控 React 组件的性能。SDK 导出了一个 withProfiler 高阶组件，该组件将与 React 相关的跨度附加到作用域上当前最活跃的跨度。这使你可以深入了解组件的行为，从而识别缓慢的挂载或频繁的更新，这些可能会对应用程序的性能产生负面影响。

先决条件

• 要设置组件跟踪，你需要配置追踪。有关如何操作的详细信息，请参阅我们的 追踪文档。

添加 withProfiler

在下面的示例中，withProfiler 高阶组件用于 instrument 一个应用组件。

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

class App extends React.Component {
  render() {
    return (
      <FancyComponent>
        <NestedComponent someProp={2} />
        <AnotherComponent />
      </FancyComponent>
    );
  }
}

export default Sentry.withProfiler(App);

React Profiler 当前生成具有三种不同操作码的跨度：ui.react.mount、ui.react.render 和 ui.react.update，定义如下：

ui.react.mount

表示被分析组件挂载所需的时间的跨度。

ui.react.render

表示被分析组件在页面上停留的时间的跨度。此跨度仅在被分析组件在事务发生期间挂载和卸载时生成。

ui.react.update

表示被分析组件更新的时间的跨度。此跨度仅在被分析组件已挂载时生成。

分析器选项

withProfiler 高阶组件有多种选项用于进一步自定义。这些选项可以作为 withProfiler 函数的第二个参数传递。

export default Sentry.withProfiler(App, { name: "CustomAppName" });

name (string)

被分析组件的名称。默认情况下，名称从组件的 displayName 属性或组件的 name 属性获取。

includeRender (boolean)

选项，用于让分析器创建 ui.react.render 跨度。（默认设置为 true。）

includeUpdates (boolean)

选项，用于让分析器创建 react.update 跨度。（默认设置为 true。）我们建议将此属性设置为 false 对于经常重新渲染的组件，例如文本输入组件。生成的跨度可能会非常杂乱。

下一步：

• 要跟踪你的 React Native 应用程序的首次显示时间和完全显示时间，请参阅我们的 显示时间指南。