Support React 19
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
- [ ] https://github.com/getsentry/sentry-javascript/pull/12147
- [ ] Add e2e test
- [ ] Update docs
@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?
Released with https://github.com/getsentry/sentry-javascript/releases/tag/8.7.0!