ref #11798

React 19 brings some improvements to error handling with https://react.dev/blog/2024/04/25/react-19#error-handling! This PR exposes a new method, Sentry.reactErrorHandler that helps users interact with these new React 19 error handling hooks.

Background

React Error handling originally relied only on error boundaries, React components that would automatically catch component rendering errors and display fallback UIs.

class ErrorBoundary extends React.Component {
  // ...

  public componentDidCatch(error: any, info: React.ErrorInfo): void {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }
}

We added support for this by exporting our own ErrorBoundary component.

If you notice above, the info parameter passed into componentDidCatch has a componentStack property. componentStack is a synthetic stacktrace that represents the component call-chain that threw the error. Fortunately because this is a synthetic stacktrace, we can parse it as an error in the SDK and attach it to the original exception as a linked exception via error.cause.

Important to note: If a component chain is not wrapped in an error boundary though, we do not get access to the componentStack, as the error bubbles up to the global error handler.

React 19

In React 19 they've two new options, onCaughtError and onUncaughtError to the React DOM public API.

onCaughtError is a callback called when React catches an error in an Error Boundary. This effectively works just like having an ErrorBoundary with componentDidCatch.

onUncaughtError is a callback called when an error is thrown and not caught by an Error Boundary. This means we can add componentStack information to these errors without requiring users to add error boundaries everywhere (useful for 3rd party component libraries and similar).

Given onCaughtError, onUncaughtError and componentDidCatch all have identical APIs

declare function componentDidCatch(error: any, info: React.ErrorInfo): void;

This PR introduces Sentry.reactErrorHandler, which looks like so:

import * as Sentry from '@sentry/react';
import { hydrateRoot } from "react-dom/client";

ReactDOM.hydrateRoot(
  document.getElementById("root"),
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  {
    onUncaughtError: Sentry.reactErrorHandler(),
    onCaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
      // optional callback if users want custom config.
    }),
  }
);

To validate this change, we add a react 19 e2e test.

Next Steps

After we merge this in and update the docs, we can explore automatically instrumenting createRoot from react-dom to add Sentry.reactErrorHandler accordingly, but that is a next step.