组件跟踪

Sentry 的 React SDK 提供了一个功能来监控 React 组件的性能：组件跟踪。SDK 导出一个 withProfiler 高阶组件，该组件将 React 相关的 span 附加到当前作用域中的活动事务。这使您可以深入了解组件的行为，从而识别慢速挂载或频繁更新等问题，这些问题可能会影响应用程序的性能。

在下面的示例中，withProfiler 高阶组件用于监控一个应用程序组件。

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

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

export default Sentry.withProfiler(App);

React Profiler 当前生成三种不同操作码的 span：ui.react.mount、ui.react.render 和 ui.react.update。

ui.react.mount

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

ui.react.render

表示被分析的组件在页面上停留的时间的 span。只有在被分析的组件在事务期间挂载和卸载时才会生成此 span。

ui.react.update

表示被分析的组件更新的时间的 span。只有在被分析的组件已挂载时才会生成此 span。

Profiler 选项

withProfiler 高阶组件提供了多种选项以进行进一步的自定义。这些选项可以作为第二个参数传递给 withProfiler 函数。

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

name (string)

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

includeRender (boolean)

是否应由 Profiler 创建 ui.react.render span。默认设置为 true。

includeUpdates (boolean)

是否应由 Profiler 创建 react.update span。默认设置为 true。我们建议对于会经历许多重新渲染的组件（例如文本输入组件），将此属性设置为 false，因为生成的 span 可能会非常嘈杂。

下一步：

• 返回 入门
• 返回 React 功能