Skip to content

Commit 420e0c1

Browse files
antonisclaude
antonis
and
claude
authored
docs(react-native): Document useProfiler hook and Profiler component (#17348)
## DESCRIBE YOUR PR Document the `useProfiler` hook and `Profiler` component on the React Native component tracking page, alongside the existing `withProfiler` HOC documentation. - Add `useProfiler` hook section with usage example and options (`disabled`, `hasRenderSpan`) - Add `Profiler` component section with `updateProps` example - Update `withProfiler` example to use a function component instead of a class component - Add missing `disabled` option to `withProfiler` docs - Fix incorrect span op-codes (`react.update` → `ui.react.update`) - Add cross-links between sections for discoverability Closes #17304 Closes #7092 ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.): - [ ] Other deadline: - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] Checked Vercel preview for correctness, including links - [ ] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent a0ff8e7 commit 420e0c1

1 file changed

Lines changed: 84 additions & 16 deletions

File tree

‎docs/platforms/react-native/integrations/component-tracking.mdx‎

Lines changed: 84 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,72 @@
11
---
22
title: Component Tracking
3-
description: "Learn how Sentry's React Native SDK allows you to monitor your application's component lifecycle."
3+
description: "Learn how Sentry's React Native SDK allows you to monitor your application's component lifecycle using the useProfiler hook, withProfiler HOC, or Profiler component."
44
sidebar_order: 55
55
---
66

7-
Sentry's React Native SDK offers component tracking, a feature that lets you monitor the performance of your React components. The SDK exports a `withProfiler` higher-order component that attaches React-related spans to the most current active span on the scope. 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.
7+
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.
88

99
## Prerequisites
1010

1111
- To set up component tracking, you need to configure tracing. For details on how to do this, check out our [Tracing documentation](/platforms/react-native/tracing/).
1212

13-
## Add `withProfiler`
13+
## `useProfiler` Hook
1414

15-
In the example below, the `withProfiler` higher-order component is used to instrument an app component.
15+
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.
1616

1717
```javascript
18-
import React from "react";
1918
import * as Sentry from "@sentry/react-native";
2019

21-
class App extends React.Component {
22-
render() {
23-
return (
24-
<FancyComponent>
25-
<NestedComponent someProp={2} />
26-
<AnotherComponent />
27-
</FancyComponent>
28-
);
29-
}
20+
function App() {
21+
Sentry.useProfiler("App");
22+
23+
return (
24+
<FancyComponent>
25+
<NestedComponent someProp={2} />
26+
<AnotherComponent />
27+
</FancyComponent>
28+
);
29+
}
30+
31+
export default App;
32+
```
33+
34+
### Hook Options
35+
36+
The `useProfiler` hook accepts an optional second argument with the following options:
37+
38+
```javascript
39+
Sentry.useProfiler("App", { disabled: false, hasRenderSpan: true });
40+
```
41+
42+
`disabled` (boolean)
43+
44+
If set to `true`, the profiler will not generate any spans. (Set as `false` by default.)
45+
46+
`hasRenderSpan` (boolean)
47+
48+
Option to have a `ui.react.render` span created by the Profiler. (Set as `true` by default.)
49+
50+
<Alert>
51+
52+
The `useProfiler` hook tracks `ui.react.mount` and `ui.react.render` spans. It does not track `ui.react.update` spans. If you need update tracking, use [`withProfiler`](#withprofiler-higher-order-component) or the [`Profiler` component](#profiler-component) instead.
53+
54+
</Alert>
55+
56+
## `withProfiler` Higher-Order Component
57+
58+
The `withProfiler` HOC wraps a component to instrument it. It supports tracking mounts, renders, and updates.
59+
60+
```javascript
61+
import * as Sentry from "@sentry/react-native";
62+
63+
function App() {
64+
return (
65+
<FancyComponent>
66+
<NestedComponent someProp={2} />
67+
<AnotherComponent />
68+
</FancyComponent>
69+
);
3070
}
3171

3272
export default Sentry.withProfiler(App);
@@ -64,13 +104,41 @@ export default Sentry.withProfiler(App, { name: "CustomAppName" });
64104

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

107+
`disabled` (boolean)
108+
109+
If set to `true`, the profiler will not generate any spans. (Set as `false` by default.)
110+
67111
`includeRender` (boolean)
68112

69-
Option to have a `ui.react.render` span created by the Profiler. (Set as true by default.)
113+
Option to have a `ui.react.render` span created by the Profiler. (Set as `true` by default.)
70114

71115
`includeUpdates` (boolean)
72116

73-
Option to have `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.
117+
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.
118+
119+
## `Profiler` Component
120+
121+
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.
122+
123+
```javascript
124+
import * as Sentry from "@sentry/react-native";
125+
126+
function ParentComponent({ data }) {
127+
return (
128+
<Sentry.Profiler name="SomeChild" updateProps={{ data }}>
129+
<SomeChild data={data} />
130+
</Sentry.Profiler>
131+
);
132+
}
133+
```
134+
135+
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.
136+
137+
<Alert>
138+
139+
`withProfiler` handles `updateProps` automatically by forwarding the wrapped component's props. When using the `Profiler` component directly, you need to pass `updateProps` yourself.
140+
141+
</Alert>
74142

75143
## Next Steps:
76144

0 commit comments

Comments
 (0)