Component Tracking

Sentry's React Native SDK offers component tracking, a feature that lets you monitor the performance of your React components. The SDK provides multiple ways to attach React-related spans to the most current active span on the scope: the withProfiler higher-order component, the useProfiler hook, and the Profiler component. This allows you to get a drilled-down view into how your components are behaving so you can identify slow mounts or frequent updates, which might be having a negative impact on your app's performance.

Prerequisites

• To set up component tracking, you need to configure tracing. For details on how to do this, check out our Tracing documentation.

useProfiler Hook

The useProfiler hook is a lightweight way to track a function component's lifecycle. Call it at the top of your component body with the component name as the first argument — no need to wrap your export.

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

function App() {
  Sentry.useProfiler("App");

  return (
    <FancyComponent>
      <NestedComponent someProp={2} />
      <AnotherComponent />
    </FancyComponent>
  );
}

export default App;

Hook Options

The useProfiler hook accepts an optional second argument with the following options:

Sentry.useProfiler("App", { disabled: false, hasRenderSpan: true });

disabled (boolean)

If set to true, the profiler will not generate any spans. (Set as false by default.)

hasRenderSpan (boolean)

Option to have a ui.react.render span created by the Profiler. (Set as true by default.)

withProfiler Higher-Order Component

The withProfiler HOC wraps a component to instrument it. It supports tracking mounts, renders, and updates.

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

function App() {
  return (
    <FancyComponent>
      <NestedComponent someProp={2} />
      <AnotherComponent />
    </FancyComponent>
  );
}

export default Sentry.withProfiler(App);

The React Profiler currently generates spans with three different kinds of op-codes: ui.react.mount, ui.react.render, and ui.react.update, as defined below:

ui.react.mount

The span that represents how long it took for the profiled component to mount.

ui.react.render

The span that represents the amount of time the profiled component stays on a page. This span is only generated if the profiled component mounts and unmounts while a transaction is occurring.

ui.react.update

The span that represents when the profiled component was updated. This span is only generated if the profiled component has mounted.

Profiler Options

The withProfiler higher-order component has a variety of options for further customization. They can be passed in as the second argument to the withProfiler function.

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

name (string)

The name of the component being profiled. By default, the name is taken from the component displayName property or the component name property.

disabled (boolean)

If set to true, the profiler will not generate any spans. (Set as false by default.)

includeRender (boolean)

Option to have a ui.react.render span created by the Profiler. (Set as true by default.)

includeUpdates (boolean)

Option to have ui.react.update spans created by the Profiler. (Set as true by default.) We recommend setting this prop as false for components that will be rerendered often, such as text input components. The resulting spans can be very noisy.

Profiler Component

The Profiler component can be used as a parent wrapper to profile a child component. This is useful when you want to profile a component without modifying its export.

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

function ParentComponent({ data }) {
  return (
    <Sentry.Profiler name="SomeChild" updateProps={{ data }}>
      <SomeChild data={data} />
    </Sentry.Profiler>
  );
}

The Profiler component accepts the following props: name, disabled, includeRender, includeUpdates, and updateProps. Pass updateProps to enable ui.react.update span tracking — when the values in updateProps change between renders, the Profiler will generate update spans. This is the main advantage of using Profiler over useProfiler, which does not track updates.

Next Steps:

• To track your React Native application's time to initial display and time to full display, check out our Time to Display guide.