From b62430218d31887350a238bac1acc70f7ff039f0 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Mon, 24 Mar 2025 11:14:51 -0400 Subject: [PATCH 1/2] feat(react): Document `Sentry.captureReactException` --- .../javascript/common/usage/index.mdx | 2 +- .../guides/react/features/error-boundary.mdx | 18 +++++++++ .../javascript/guides/react/index.mdx | 5 ++- .../capture-error/javascript.react.mdx | 39 +++++++++++++++++++ 4 files changed, 61 insertions(+), 3 deletions(-) diff --git a/docs/platforms/javascript/common/usage/index.mdx b/docs/platforms/javascript/common/usage/index.mdx index eb64e6e57ff1a7..d402ccad46bb83 100644 --- a/docs/platforms/javascript/common/usage/index.mdx +++ b/docs/platforms/javascript/common/usage/index.mdx @@ -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, it’s sent to Sentry. + When an event is captured, it's sent to Sentry. diff --git a/docs/platforms/javascript/guides/react/features/error-boundary.mdx b/docs/platforms/javascript/guides/react/features/error-boundary.mdx index 505ee935a73d3e..7d14b98b7c2d6f 100644 --- a/docs/platforms/javascript/guides/react/features/error-boundary.mdx +++ b/docs/platforms/javascript/guides/react/features/error-boundary.mdx @@ -199,6 +199,24 @@ function App({ props }) { export default App; ``` +## Manual Error Capturing + +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**](../../) diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx index d0d0400a0429db..02fe363a240cea 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -23,7 +23,9 @@ Select which Sentry features you'd like to install in addition to Error Monitori ## Install - + Sentry captures data by using an SDK within your application’s runtime. @@ -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"; diff --git a/platform-includes/capture-error/javascript.react.mdx b/platform-includes/capture-error/javascript.react.mdx index a8ba6c1803a6f9..6e3f0fe475643c 100644 --- a/platform-includes/capture-error/javascript.react.mdx +++ b/platform-includes/capture-error/javascript.react.mdx @@ -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. From 5663cd35eed296fda2c3f3f938e63d81d027febc Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Mon, 24 Mar 2025 14:52:07 -0400 Subject: [PATCH 2/2] Update docs/platforms/javascript/guides/react/features/error-boundary.mdx Co-authored-by: Alex Krawiec --- .../javascript/guides/react/features/error-boundary.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/react/features/error-boundary.mdx b/docs/platforms/javascript/guides/react/features/error-boundary.mdx index 7d14b98b7c2d6f..3557fbdeb5afde 100644 --- a/docs/platforms/javascript/guides/react/features/error-boundary.mdx +++ b/docs/platforms/javascript/guides/react/features/error-boundary.mdx @@ -199,7 +199,7 @@ function App({ props }) { export default App; ``` -## Manual Error Capturing +## 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.