sentry-javascript icon indicating copy to clipboard operation
sentry-javascript copied to clipboard

Support React 19

Open AbhiPrasad opened this issue 1 year ago • 1 comments

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

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

image

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

AbhiPrasad avatar Apr 25 '24 21:04 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 avatar May 22 '24 12:05 AbhiPrasad

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

AbhiPrasad avatar May 29 '24 17:05 AbhiPrasad