Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Liza Mock <liza.mock@sentry.io>
  • Loading branch information
krystofwoldrich and lizokm authored Jul 15, 2024
1 parent 0592455 commit 345d976
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 19 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: Component Tracking
description: "Learn how Sentry's React Native SDK allows you to monitor the your application components lifecycle."
description: "Learn how Sentry's React Native SDK allows you to monitor your application's component lifecycle."
sidebar_order: 55
---

Sentry's React Native SDK offers a feature to monitor the performance of your React components: component tracking. The SDK exports a `withProfiler` higher-order component that attaches React related spans to the current active span on the scope. This allows you to get a drilled-down view into how your components are behaving so you can do things like identify slow mounts or frequent updates, which might have an 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 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.

## Prerequisites

Expand Down Expand Up @@ -32,19 +32,19 @@ class App extends React.Component {
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`.
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 how long the profiled component was on a page. This span is only generated if the profiled component mounts and unmounts while a transaction is occurring.
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 updated. This span is only generated if the profiled component has mounted.
The span that represents when the profiled component was updated. This span is only generated if the profiled component has mounted.

<Alert>

Expand All @@ -66,12 +66,12 @@ The name of the component being profiled. By default, the name is taken from the

`includeRender` (boolean)

If a `ui.react.render` span should be 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)

If `react.update` spans should be created by the Profiler. Set as true by default. We recommend setting this prop as false for components that will experience many rerenders, such as text input components, as the resulting spans can be very noisy.
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.

## Next Steps:

- To track time to initial display and time to full display of your React Native application, check out also our [Time to Display guide](/platforms/react-native/tracing/instrumentation/time-to-display/).
- To track your React Native application's time to initial display and time to full display, check out our [Time to Display guide](/platforms/react-native/tracing/instrumentation/time-to-display/).
22 changes: 11 additions & 11 deletions docs/platforms/react-native/integrations/error-boundary.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ description: "Learn how the React Native SDK exports an error boundary component
sidebar_order: 60
---

The React Native SDK exports an error boundary component that leverages [React component APIs](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) to automatically catch and send JavaScript errors from inside a React component tree to Sentry.
The React Native SDK exports an error boundary component that uses [React component APIs](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) to automatically catch and send JavaScript errors from inside a React component tree to Sentry.

## Prerequisites

- To use the Error Boundary component, you need to have the React Native SDK [installed and configured for error monitoring](/platforms/react-native/).
To use the Error Boundary component, you need to have the React Native SDK [installed and configured for error monitoring](/platforms/react-native/).

## Use `Sentry.ErrorBoundary`

Expand All @@ -22,7 +22,7 @@ import * as Sentry from "@sentry/react";
</Sentry.ErrorBoundary>;
```

The Sentry Error Boundary is also available as a higher order component.
The Sentry Error Boundary is also available as a higher-order component.

```javascript
import React from "react";
Expand Down Expand Up @@ -68,23 +68,23 @@ export default App;

<Alert level="warning" title="Note">

By default React [logs all errors to the console](https://github.com/facebook/react/blob/493f72b0a7111b601c16b8ad8bc2649d82c184a0/packages/react-reconciler/src/ReactFiberErrorLogger.js#L85), even if you are using a React error boundary. If you are using the `CaptureConsole` integration this means that Sentry will capture the error through the `CaptureConsole` integration and not through the error boundary.
By default, React [logs all errors to the console](https://github.com/facebook/react/blob/493f72b0a7111b601c16b8ad8bc2649d82c184a0/packages/react-reconciler/src/ReactFiberErrorLogger.js#L85), even if you're using a React error boundary. If you're using the `CaptureConsole` integration, Sentry will capture the error there and not through the error boundary.

</Alert>

## Linked Errors

In [React v17 and above](https://reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks), the SDK will automatically parse the [error boundary](https://react.dev/reference/react/Component#componentdidcatch-parameters) `componentStack` and attach the full stacktrace to the event via `error.cause`. This requires the `nativeLinkedErrorsIntegration` to be enabled (enabled by default). To get the full source context, we recommend setting up [source maps](/platforms/react-native/sourcemaps/) for your project.
In [React v17 and above](https://reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks), the SDK will automatically parse the [error boundary](https://react.dev/reference/react/Component#componentdidcatch-parameters) `componentStack` and attach the full stacktrace to the event via `error.cause`. This requires the `nativeLinkedErrorsIntegration` to be enabled. (It's enabled by default.) To get the full source context, we recommend setting up [source maps](/platforms/react-native/sourcemaps/) for your project.

![React Error Boundary stacktrace](./img/errorboundary-error.png)

## Options

The ErrorBoundary component exposes a variety of props that can be passed in for extra configuration. There are no required options, but we highly recommend that you set a fallback component.
The ErrorBoundary component exposes a variety of props that can be passed in for extra configuration. There aren't any required options, but we highly recommend setting a fallback component.

`fallback` (React.ReactNode or Function)

A React element to render when the error boundary catches an error. Can be an actual React element (i.e. `<Fallback />`), or a function that returns a React element. If you provide a function, Sentry will call it with additional info and helpers (see example below).
A React element to render when the error boundary catches an error. This can be an actual React element (for example, `<Fallback />`), or a function that returns a React element. If you provide a function, Sentry will call it with additional info and helpers (see example below).

`onError` (Function)

Expand All @@ -104,9 +104,9 @@ A function that gets called before an error is sent to Sentry, allowing for extr

## Examples

#### Setting a Fallback Function (Render Props)
### Setting a Fallback Function (Render Props)

Below is an example where a fallback prop, using the [render props approach](https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop), is used to display a fallback UI on error. The fallback UI returns to a standard component state when reset using the `resetError()` API provided by the component through render props.
Below, is an example where a fallback prop, using the [render props approach](https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop), is used to display a fallback UI on error. The fallback UI returns to a standard component state when reset using the `resetError()` API, provided by the component through render props.

```javascript
import React from "react";
Expand Down Expand Up @@ -159,9 +159,9 @@ class MyComponent extends React.Component {
export default MyComponent;
```

#### Using multiple error boundaries
### Using multiple error boundaries

When using multiple error boundaries, we recommend using `beforeCapture` to set tags/context so that you can tell which error boundary the error occurred from. In the example below, we attach tags to errors based on what route they rendered in.
When using multiple error boundaries, we recommend using `beforeCapture` to set tags/context so that you can tell which error boundary the error occurred from. In the example below, we attach tags to errors based on what route they rendered in:

```javascript
import React from "react";
Expand Down

0 comments on commit 345d976

Please sign in to comment.