Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ The span that represents when the profiled component updated. This span is only

<Alert>

In [React Strict Mode](https://reactjs.org/docs/strict-mode.html), certain component methods will be [invoked twice](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects). This may lead to duplicate `ui.react.mount` spans appearing in a transaction. React Strict Mode only runs in development mode, so this will have no impact on your production traces.
In [React Strict Mode](https://react.dev/reference/react/StrictMode), certain component methods will be [invoked twice](https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development). This may lead to duplicate `ui.react.mount` spans appearing in a transaction. React Strict Mode only runs in development mode, so this will have no impact on your production traces.

</Alert>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: >-
og_image: /og-images/platforms-javascript-guides-react-features-error-boundary.png
---

The React SDK exports an error boundary component that leverages [React component APIs](https://reactjs.org/docs/error-boundaries.html) to automatically catch and send JavaScript errors from inside a React component tree to Sentry.
The React 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.

## Configure

Expand Down Expand Up @@ -72,7 +72,7 @@ By default React [logs all errors to the console](https://github.com/facebook/re

## 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 `componentStack`](https://react.dev/reference/react/Component#componentdidcatch-parameters) and attach the full stacktrace to the event via `error.cause`. This requires the [`LinkedErrors`](../../configuration/integrations/linkederrors/) integration to be enabled (enabled by default). To get the full source context, we recommend setting up [source maps](../../sourcemaps) for your project.
In [React v17 and above](https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks), the SDK will automatically parse the [error boundary `componentStack`](https://react.dev/reference/react/Component#componentdidcatch-parameters) and attach the full stacktrace to the event via `error.cause`. This requires the [`LinkedErrors`](../../configuration/integrations/linkederrors/) integration to be enabled (enabled by default). To get the full source context, we recommend setting up [source maps](../../sourcemaps) for your project.

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

Expand Down Expand Up @@ -114,7 +114,7 @@ A function that gets called before an error is sent to Sentry, allowing for extr

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

Below is an example where a fallback prop, using the [render props approach](https://reactjs.org/docs/render-props.html), 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
2 changes: 1 addition & 1 deletion platform-includes/capture-error/javascript.react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function App() {
}
```

The React SDK exports an error boundary component that leverages [React component APIs](https://reactjs.org/docs/error-boundaries.html) to automatically catch and send JavaScript errors from inside a React component tree to Sentry. See the [React Error Boundary](/platforms/javascript/guides/react/features/error-boundary/) guide for more information.
The React 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. See the [React Error Boundary](/platforms/javascript/guides/react/features/error-boundary/) guide for more information.

If you don't want to use the error boundary component, you can use the `captureReactException` function to capture errors manually. The `Sentry.captureReactException` function requires Sentry React SDK `v9.8.0` or above.

Expand Down