From 78c9d085c0b940c120b479beaac05f4097ef6ae6 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Tue, 28 May 2024 09:55:49 -0400 Subject: [PATCH 1/2] feat(react): Document `Sentry.reactErrorHandler` --- .../javascript.react.mdx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/platform-includes/getting-started-config/javascript.react.mdx b/platform-includes/getting-started-config/javascript.react.mdx index 2287d39519c65..debf3403ab5a6 100644 --- a/platform-includes/getting-started-config/javascript.react.mdx +++ b/platform-includes/getting-started-config/javascript.react.mdx @@ -56,6 +56,29 @@ root.render(); Once this is done, all unhandled exceptions are automatically captured by Sentry. +### React 19 Error Reporting + +Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-dom` expose error hooks that can be used to capture errors automatically. Use the `Sentry.reactErrorHandler` function to capture errors in the error hooks you are interested in. + +```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 component mounted to the container passed onto `createRoot`/`hydrateRoot`. If you want more finely grained control over error handling, we recommend adding an `ErrorBoundary` component to your application. + ### Add Error Boundary If you're using React 16 or above, you can use the [Error Boundary](features/error-boundary/) component to automatically send Javascript errors from inside a component tree to Sentry, and set a fallback UI. From 5b6f4fa5e406b15ca11f28fe992c0c0cbc8e2c8c Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 29 May 2024 13:30:07 -0400 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- platform-includes/getting-started-config/javascript.react.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform-includes/getting-started-config/javascript.react.mdx b/platform-includes/getting-started-config/javascript.react.mdx index debf3403ab5a6..b2dccc52f9d74 100644 --- a/platform-includes/getting-started-config/javascript.react.mdx +++ b/platform-includes/getting-started-config/javascript.react.mdx @@ -58,7 +58,7 @@ Once this is done, all unhandled exceptions are automatically captured by Sentry ### React 19 Error Reporting -Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-dom` expose error hooks that can be used to capture errors automatically. Use the `Sentry.reactErrorHandler` function to capture errors in the error hooks you are interested in. +Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-dom` expose error hooks that are used to capture errors automatically. If you want to customize how errors are handled in specific error hooks, you can use the `Sentry.reactErrorHandler` function. ```javascript import { createRoot } from "react-dom/client"; @@ -77,7 +77,7 @@ const root = createRoot(container, { root.render(); ``` -These hooks apply to all React component mounted to the container passed onto `createRoot`/`hydrateRoot`. If you want more finely grained control over error handling, we recommend adding an `ErrorBoundary` component to your application. +These hooks apply to all React components mounted to the container passed onto `createRoot`/`hydrateRoot`. If you want more finely grained control over error handling, we recommend adding an `ErrorBoundary` component to your application. ### Add Error Boundary