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

feat(react)!: Update ErrorBoundary componentStack type #14742

Merged
merged 2 commits into from
Jan 14, 2025

Conversation

AbhiPrasad
Copy link
Member

resolves #14310

supercedes #14327 (I have left @kunal-511 a shout out on the changelog for getting this work started!)

The principle thing that drove this change was this todo:

// TODO(v9): Remove this check and type `componentStack` to be React.ErrorInfo['componentStack'].
const passedInComponentStack: string | undefined = componentStack == null ? undefined : componentStack;

Specifically we wanted to remove null as a valid state from componentStack, making sure that all exposed public API see it as string | undefined. React always returns a string componentStack from the error boundary, so this matches our typings more closely to react.

By making this change, we can also clean up the render logic a little. Specifically we can check for state.componentStack === null to determine if a fallback is rendered, and then I went ahead and removed some unnecessary nesting.

@AbhiPrasad AbhiPrasad added this to the 9.0.0 milestone Dec 16, 2024
@AbhiPrasad AbhiPrasad requested a review from a team December 16, 2024 21:42
@AbhiPrasad AbhiPrasad self-assigned this Dec 16, 2024
@AbhiPrasad AbhiPrasad requested review from Lms24 and chargome and removed request for a team December 16, 2024 21:42
Copy link
Contributor

github-actions bot commented Dec 16, 2024

size-limit report 📦

Path Size % Change Change
@sentry/browser 23.01 KB - -
@sentry/browser - with treeshaking flags 21.68 KB - -
@sentry/browser (incl. Tracing) 35.52 KB - -
@sentry/browser (incl. Tracing, Replay) 72.3 KB - -
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 62.82 KB - -
@sentry/browser (incl. Tracing, Replay with Canvas) 76.56 KB - -
@sentry/browser (incl. Tracing, Replay, Feedback) 88.57 KB - -
@sentry/browser (incl. Feedback) 39.23 KB - -
@sentry/browser (incl. sendFeedback) 27.64 KB - -
@sentry/browser (incl. FeedbackAsync) 32.41 KB - -
@sentry/react 25.71 KB -0.01% -1 B 🔽
@sentry/react (incl. Tracing) 38.3 KB +0.01% +2 B 🔺
@sentry/vue 27.11 KB - -
@sentry/vue (incl. Tracing) 37.26 KB - -
@sentry/svelte 23.13 KB - -
CDN Bundle 24.28 KB - -
CDN Bundle (incl. Tracing) 35.83 KB - -
CDN Bundle (incl. Tracing, Replay) 70.47 KB - -
CDN Bundle (incl. Tracing, Replay, Feedback) 75.63 KB - -
CDN Bundle - uncompressed 70.78 KB - -
CDN Bundle (incl. Tracing) - uncompressed 106.06 KB - -
CDN Bundle (incl. Tracing, Replay) - uncompressed 216.88 KB - -
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 229.42 KB - -
@sentry/nextjs (client) 38.41 KB - -
@sentry/sveltekit (client) 36.06 KB - -
@sentry/node 161.46 KB - -
@sentry/node - without tracing 97.26 KB - -
@sentry/aws-serverless 127.12 KB - -

View base workflow run

@@ -70,6 +70,10 @@ Sentry.init({

- When `skipOpenTelemetrySetup: true` is configured, `httpIntegration({ spans: false })` will be configured by default. This means that you no longer have to specify this yourself in this scenario. With this change, no spans are emitted once `skipOpenTelemetrySetup: true` is configured, without any further configuration being needed.

### `@sentry/react`

The `componentStack` field in the `ErrorBoundary` component is now typed as `string | undefined` instead of `string | null | undefined`. This more closely matches the actual behavior of React, which always returns a `string` whenever a component stack is available. `undefined` is only returned if no error has been caught by the error boundary.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

m: Looking at the code, I don't see componentStack being typed as string | undefined but rather string | null. Should we update the migration note accordingly?

Suggested change
The `componentStack` field in the `ErrorBoundary` component is now typed as `string | undefined` instead of `string | null | undefined`. This more closely matches the actual behavior of React, which always returns a `string` whenever a component stack is available. `undefined` is only returned if no error has been caught by the error boundary.
The `componentStack` field in the `ErrorBoundary` component is now typed as `string | null` instead of `string | null | undefined`. This more closely matches the actual behavior of React, which always returns a `string` whenever a component stack is available. `undefined` is only returned if no error has been caught by the error boundary.

i might just also be missing something 😅 - in that case, feel free to disregard!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Internally we keep the componentStack as null, but to the user it should always be defined. There is actually one scenario where things are now null, I extended the changelog to talk about this.

/** Called on componentDidMount() */
onMount?: (() => void) | undefined;
/** Called if resetError() is called from the fallback render props function */
onReset?: ((error: unknown, componentStack: string | null | undefined, eventId: string | null) => void) | undefined;
onReset?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove null here as well?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not exactly, I expanded the migration doc to talk about this.

@AbhiPrasad AbhiPrasad force-pushed the abhi-error-boundary-component-stack branch from 4e80697 to 04f6178 Compare January 14, 2025 03:43
@AbhiPrasad
Copy link
Member Author

sorry for the delay, refactored this a little more, ready for another round!

@AbhiPrasad AbhiPrasad requested review from chargome and Lms24 January 14, 2025 03:44
@AbhiPrasad AbhiPrasad merged commit 463e8da into develop Jan 14, 2025
79 checks passed
@AbhiPrasad AbhiPrasad deleted the abhi-error-boundary-component-stack branch January 14, 2025 15:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[v9] Fix React Error Boundary typing for componentStack
3 participants