Skip to content

feat(react): Document Sentry.captureReactException #13108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 24, 2025
Merged
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
2 changes: 1 addition & 1 deletion docs/platforms/javascript/common/usage/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Key terms:
- An _event_ is one instance of sending data to Sentry. Generally, this data is an error or exception.
- An _issue_ is a grouping of similar events.
- The reporting of an event is called _capturing_.
When an event is captured, its sent to Sentry.
When an event is captured, it's sent to Sentry.

</Alert>

Expand Down
18 changes: 18 additions & 0 deletions docs/platforms/javascript/guides/react/features/error-boundary.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,24 @@ function App({ props }) {
export default App;
```

## Manually Capturing Errors

If you don't want to use the Sentry Error Boundary component, you can use the `captureReactException` function to capture errors manually with your own Error Boundary. This will still ensure that the `componentStack` is linked to the error as detailed in the [Linked Errors](#linked-errors) section. The `Sentry.captureReactException` function requires React SDK `v9.8.0` or above.

```javascript
import * as Sentry from "@sentry/react";

class ErrorBoundary extends React.Component {
componentDidCatch(error, info) {
Sentry.captureReactException(error, info);
}

render() {
return this.props.children;
}
}
```

## Next Steps:

- [Return to **Getting Started**](../../)
Expand Down
5 changes: 3 additions & 2 deletions docs/platforms/javascript/guides/react/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ Select which Sentry features you'd like to install in addition to Error Monitori

## Install

<OnboardingOptionButtons options={["error-monitoring", "performance", "session-replay"]} />
<OnboardingOptionButtons
options={["error-monitoring", "performance", "session-replay"]}
/>

Sentry captures data by using an SDK within your application’s runtime.

Expand All @@ -45,7 +47,6 @@ Sentry supports multiple versions of React Router. To learn how to configure the

Sentry should be initialized as early as possible in your application. We recommend putting the Sentry initialization code into its own file and including that file as the first import in your application entry point as shown in the example below:


```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "3-8, 13-21, 24-30", "session-replay": "22, 33-39"}}
import { useEffect } from "react";
import * as Sentry from "@sentry/react";
Expand Down
39 changes: 39 additions & 0 deletions platform-includes/capture-error/javascript.react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,42 @@ 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.

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.

```javascript
import * as Sentry from "@sentry/react";

class ErrorBoundary extends React.Component {
componentDidCatch(error, info) {
Sentry.captureReactException(error, info);
}

render() {
return this.props.children;
}
}
```

Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-dom` will expose error hooks that are used to capture errors automatically. To customize how errors are handled in specific error hooks, use the `Sentry.reactErrorHandler` method. The `Sentry.reactErrorHandler` method requires `v8.6.0` or above.

```javascript
import { createRoot } from "react-dom/client";

const container = document.getElementById(“app”);
const root = createRoot(container, {
// Callback called when an error is thrown and not caught by an ErrorBoundary.
onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
console.warn('Uncaught error', error, errorInfo.componentStack);
}),
// Callback called when React catches an error in an ErrorBoundary.
onCaughtError: Sentry.reactErrorHandler(),
// Callback called when React automatically recovers from errors.
onRecoverableError: Sentry.reactErrorHandler(),
});
root.render();
```

These hooks apply to all React components that are mounted to the container which is passed onto `createRoot`/`hydrateRoot`. For more precise control over error handling, we recommend adding an `ErrorBoundary` component to your application.