Support React 19

[AbhiPrasad]

https://react.dev/blog/2024/04/25/react-19

Big thing for us is https://react.dev/reference/react-dom/client/createRoot#parameters

Key thing for us is that we can stop recommending Sentry.ErrorBoundary, and instead tell people to use the hooks in react directly!

Tasks

Beta Give feedback

1. feat(react): Add Sentry.reactErrorHandler #12147
   +0
   
2. Add e2e test
3. feat(react): Document Sentry.reactErrorHandler sentry-docs#10178
   +0
   

[AbhiPrasad]

@rickhanlonii The API we're looking to implement for Sentry error monitoring is:

import { reactErrorHandler } from '@sentry/react';
import { hydrateRoot } from "react-dom/client";

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

The only thing here is that if you set a onUncaughtError option, it overrides the default, which means you lose out on the dev mode logging:

https://github.com/facebook/react/blob/3ac551e855f9bec3161da2fc8787958aa62113db/packages/react-reconciler/src/ReactFiberErrorLogger.js#L36-L51

In this case there is no way for us to replicate the An error occurred in the <${componentName}> component: message (because componentName is private API), so asking users to add Sentry.reactErrorHandler degrades their local development experience.

I guess we can tell users to only set this for production, but Sentry can also be used in development environments via Spotlight (Sentry for Development).

Is there a way we can get access to the original onUncaughtError handler so we can execute that, while sending the error to Sentry at the same time?

[AbhiPrasad]

Released with https://github.com/getsentry/sentry-javascript/releases/tag/8.7.0!