Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React ErrorBoundary component is not type safe #11728

Closed
3 tasks done
RobinClowers opened this issue Apr 22, 2024 · 6 comments · Fixed by #11819
Closed
3 tasks done

React ErrorBoundary component is not type safe #11728

RobinClowers opened this issue Apr 22, 2024 · 6 comments · Fixed by #11819

Comments

@RobinClowers
Copy link

Is there an existing issue for this?

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
Copy link
Member

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
Copy link
Author

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

@AbhiPrasad
Copy link
Member

merging in the PR to react types first, then will fix the types here! DefinitelyTyped/DefinitelyTyped#69434

@RobinClowers
Copy link
Author

🙇 Thank you!

@AbhiPrasad
Copy link
Member

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 DefinitelyTyped/DefinitelyTyped#69436)

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

@RobinClowers
Copy link
Author

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

@AbhiPrasad AbhiPrasad removed their assignment Apr 26, 2024
mydea added a commit that referenced this issue Apr 29, 2024
Fixes #11728

As reporting in the above issue, it is not typesafe to type the error
thrown by react components as `Error`, it can actually be any JS
object/primitive that was thrown. This means we have to type everything
as `unknown`.

This change only will happen for `8.x` because it's a breaking change.

Related: 
- https://react.dev/reference/react/Component#componentdidcatch
- DefinitelyTyped/DefinitelyTyped#69434

---------

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants