From e28f7416cb04f58799260b307c0d9ce8994d3264 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 15 Apr 2026 15:16:01 +0200 Subject: [PATCH 1/2] docs(react-native): Document useProfiler hook and Profiler component Add useProfiler hook and Profiler component documentation to the React Native component tracking page. Update withProfiler section with function component example, add missing disabled option, and fix incorrect span op-codes. Fixes #17304 Fixes #7092 Co-Authored-By: Claude --- .../integrations/component-tracking.mdx | 100 +++++++++++++++--- 1 file changed, 84 insertions(+), 16 deletions(-) diff --git a/docs/platforms/react-native/integrations/component-tracking.mdx b/docs/platforms/react-native/integrations/component-tracking.mdx index f3837355a6f08..384c72a320e75 100644 --- a/docs/platforms/react-native/integrations/component-tracking.mdx +++ b/docs/platforms/react-native/integrations/component-tracking.mdx @@ -1,32 +1,72 @@ --- title: Component Tracking -description: "Learn how Sentry's React Native SDK allows you to monitor your application's component lifecycle." +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." sidebar_order: 55 --- -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. +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](/platforms/react-native/tracing/). -## Add `withProfiler` +## `useProfiler` Hook -In the example below, the `withProfiler` higher-order component is used to instrument an app component. +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. ```javascript -import React from "react"; import * as Sentry from "@sentry/react-native"; -class App extends React.Component { - render() { - return ( - - - - - ); - } +function App() { + Sentry.useProfiler("App"); + + return ( + + + + + ); +} + +export default App; +``` + +### Hook Options + +The `useProfiler` hook accepts an optional second argument with the following options: + +```javascript +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.) + + + +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. + + + +## `withProfiler` Higher-Order Component + +The `withProfiler` HOC wraps a component to instrument it. It supports tracking mounts, renders, and updates. + +```javascript +import * as Sentry from "@sentry/react-native"; + +function App() { + return ( + + + + + ); } export default Sentry.withProfiler(App); @@ -64,13 +104,41 @@ export default Sentry.withProfiler(App, { name: "CustomAppName" }); 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.) +Option to have a `ui.react.render` span created by the Profiler. (Set as `true` by default.) `includeUpdates` (boolean) -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. +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. + +```javascript +import * as Sentry from "@sentry/react-native"; + +function ParentComponent({ data }) { + return ( + + + + ); +} +``` + +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. + + + +`withProfiler` handles `updateProps` automatically by forwarding the wrapped component's props. When using the `Profiler` component directly, you need to pass `updateProps` yourself. + + ## Next Steps: From cc8206a83197bdd6c9537afd7c3e505fb2f4d2d4 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 15 Apr 2026 15:28:16 +0200 Subject: [PATCH 2/2] fix(react-native): Replace Note with Alert component in component tracking The Note MDX component is not registered, causing the build to fail. Use Alert instead, which is available globally. Co-Authored-By: Claude --- .../react-native/integrations/component-tracking.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/platforms/react-native/integrations/component-tracking.mdx b/docs/platforms/react-native/integrations/component-tracking.mdx index 384c72a320e75..404af21190626 100644 --- a/docs/platforms/react-native/integrations/component-tracking.mdx +++ b/docs/platforms/react-native/integrations/component-tracking.mdx @@ -47,11 +47,11 @@ If set to `true`, the profiler will not generate any spans. (Set as `false` by d Option to have a `ui.react.render` span created by the Profiler. (Set as `true` by default.) - + 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. - + ## `withProfiler` Higher-Order Component @@ -134,11 +134,11 @@ function ParentComponent({ data }) { 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. - + `withProfiler` handles `updateProps` automatically by forwarding the wrapped component's props. When using the `Profiler` component directly, you need to pass `updateProps` yourself. - + ## Next Steps: