diff --git a/MIGRATION.md b/MIGRATION.md index 758b37374c20..25227a752e77 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -369,6 +369,7 @@ To make sure these integrations work properly you'll have to change how you - [AWS Serverless SDK](./MIGRATION.md#aws-serverless-sdk) - [Ember SDK](./MIGRATION.md#ember-sdk) - [Svelte SDK](./MIGRATION.md#svelte-sdk) +- [React SDK](./MIGRATION.md#react-sdk) ### General @@ -1000,6 +1001,26 @@ const config = { export default withSentryConfig(config); ``` +### React SDK + +#### Updated error types to be `unknown` instead of `Error`. + +In v8, we are changing the `ErrorBoundary` error types returned from `onError`, `onReset`, `onUnmount`, and +`beforeCapture`. to be `unknown` instead of `Error`. This more accurately matches behaviour of `componentDidCatch`, the +lifecycle method the Sentry `ErrorBoundary` component uses. + +As per the [React docs on error boundaries](https://react.dev/reference/react/Component#componentdidcatch): + +> error: The `error` that was thrown. In practice, it will usually be an instance of `Error` but this is not guaranteed +> because JavaScript allows to throw any value, including strings or even `null`. + +This means you will have to use `instanceof Error` or similar to explicitly make sure that the error thrown was an +instance of `Error`. + +The Sentry SDK maintainers also went ahead and made a PR to update the +[TypeScript definitions of `componentDidCatch`](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69434) for the +React package - this will be released with React 20. + ### Gatsby SDK #### Removal of Gatsby Initialization via plugin options diff --git a/dev-packages/e2e-tests/test-applications/create-react-app/src/App.tsx b/dev-packages/e2e-tests/test-applications/create-react-app/src/App.tsx index 76b10d9085e2..d832e821824b 100644 --- a/dev-packages/e2e-tests/test-applications/create-react-app/src/App.tsx +++ b/dev-packages/e2e-tests/test-applications/create-react-app/src/App.tsx @@ -9,7 +9,7 @@ function App() { fallback={({ error, componentStack, resetError }) => (
You have encountered an error
-
{error.toString()}
+
{`${error}`}
{componentStack}