React SPA example

[TomRadford]

Would be awesome to have an example for a React SPA (ie: no metaframework/ssr) to document the usage of Sentry.reactErrorHandler as per https://docs.sentry.io/platforms/javascript/guides/react/#step-3-capture-react-errors

For this example in particular, would be keen to see how you recommend logging caught and recoverable errors in dev, since the example link above seems to obfuscate these errors, ie is this appropriate or would it re-log errors?

  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((error, errorInfo) => {
    // this is not in above guide
    console.warn("Caught error", error, errorInfo.componentStack);
  }),
  // Callback called when React automatically recovers from errors.
  onRecoverableError: Sentry.reactErrorHandler((error, errorInfo) => {
    // this is not in above guide
    console.warn("Recoverable error", error, errorInfo.componentStack);
  }),

The current react-router example assumes that you're in framework-mode:
https://github.com/getsentry/sentry-javascript-examples/tree/main/apps/react-router
which doesnt seem to be applicable for a SPA?

Keen to clear this up, thanks!

[TomRadford]

Ah! I see https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/ - perhaps you could add an example for library mode in this repo?