Repository navigation
React ErrorBoundary component is not type safe #11728
Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- 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
- Wrap a component in
Sentry.ErrorBoundary - 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.
Activity
AbhiPrasad commentedon Apr 22, 2024
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-L1349You're right though that we need to handle this case.
RobinClowers commentedon Apr 24, 2024
@AbhiPrasad wow yeah, the react types are definitely wrong in that case :(
AbhiPrasad commentedon Apr 24, 2024
merging in the PR to react types first, then will fix the types here! DefinitelyTyped/DefinitelyTyped#69434
RobinClowers commentedon Apr 24, 2024
🙇 Thank you!
AbhiPrasad commentedon Apr 24, 2024
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 commentedon Apr 24, 2024
No problem, thanks for being so responsive! We already mitigated it in our app, so no worries.
feat(react): type error as unknown in ErrorBoundary (#11819)