React ErrorBoundary component is not type safe

[RobinClowers]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.111.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

  Sentry.init({
    dsn: config.sentryDsn,
    enabled: config.sentryEnabled,
    environment: config.sentryEnvironment,
    release: config.sentryRelease,
    beforeSend: (event) => {
      if (config.sentryEnabled) return event;

      // If sentry is disabled, log events to the console
      if (event.exception?.values) {
        for (const e of event.exception.values) {
          console.error(e);
        }
      } else {
        console.debug("Sentry event", event);
      }

      return event;
    },
    beforeSendTransaction: (txEvent) => {
      // If an e2e user, do not log any transactions. We've seen our e2e tests
      // spam Sentry, bleeding quota.
      if (
        isInternalEmail(txEvent.user?.email) &&
        txEvent.user?.email?.startsWith("infra+cloud-integration-tests")
      ) {
        return null;
      }
      return txEvent;
    },
    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
          React.useEffect,
          useLocation,
          useNavigationType,
          createRoutesFromChildren,
          matchRoutes,
        ),
      }),
    ],
    normalizeDepth: 8,
    tracesSampler: (samplingContext) => {
      if (samplingContext.polled) {
        return 0.01;
      } else {
        return 0.3;
      }
    },
  });

Steps to Reproduce

1. Wrap a component in Sentry.ErrorBoundary
2. Reject a promise from that component, or `throw "some string"

Expected Result

The type of the error object should be unknown, since you can throw any object in javascript.

Actual Result

The error object is typed as Error, which can lead to runtime errors.

[AbhiPrasad]

The react types says that only errors are passed into componentDidCatch - I guess the types themselves are wrong? https://github.com/DefinitelyTyped/DefinitelyTyped/blob/91f5d3ae829281a501fe1d9ff5a6e052468ddf99/types/react/index.d.ts#L1345-L1349

You're right though that we need to handle this case.

[RobinClowers]

@AbhiPrasad wow yeah, the react types are definitely wrong in that case :(

[AbhiPrasad]

merging in the PR to react types first, then will fix the types here! https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69434

[RobinClowers]

🙇 Thank you!

[AbhiPrasad]

Seems like they'll only update the types for React 20 😭 - so I ended up closing my PR (it's on the TODO now though https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69436)

Busy with releasing Node 22 support, but I'll make the SDK fix afterwards. Thanks for your patience in the meantime @RobinClowers!

[RobinClowers]

No problem, thanks for being so responsive! We already mitigated it in our app, so no worries.