From 25ed451eae574e8f694982d048175362dd56b39e Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Fri, 26 Apr 2024 12:31:05 -0400 Subject: [PATCH 1/3] feat(react): type error as unknown in ErrorBoundary --- MIGRATION.md | 16 ++++++++++++++++ packages/react/src/errorboundary.tsx | 18 +++++++++--------- packages/react/test/errorboundary.test.tsx | 5 ++--- 3 files changed, 27 insertions(+), 12 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 758b37374c20..c8cbafe624dd 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -369,6 +369,8 @@ 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 +1002,20 @@ 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/packages/react/src/errorboundary.tsx b/packages/react/src/errorboundary.tsx index 109e53116f25..59f599d2a22b 100644 --- a/packages/react/src/errorboundary.tsx +++ b/packages/react/src/errorboundary.tsx @@ -15,7 +15,7 @@ export function isAtLeastReact17(version: string): boolean { export const UNKNOWN_COMPONENT = 'unknown'; export type FallbackRender = (errorData: { - error: Error; + error: unknown; componentStack: string; eventId: string; resetError(): void; @@ -40,15 +40,15 @@ export type ErrorBoundaryProps = { */ fallback?: React.ReactElement | FallbackRender | undefined; /** Called when the error boundary encounters an error */ - onError?: ((error: Error, componentStack: string, eventId: string) => void) | undefined; + onError?: ((error: unknown, componentStack: string, eventId: string) => void) | undefined; /** Called on componentDidMount() */ onMount?: (() => void) | undefined; /** Called if resetError() is called from the fallback render props function */ - onReset?: ((error: Error | null, componentStack: string | null, eventId: string | null) => void) | undefined; + onReset?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined; /** Called on componentWillUnmount() */ - onUnmount?: ((error: Error | null, componentStack: string | null, eventId: string | null) => void) | undefined; + onUnmount?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined; /** Called before the error is captured by Sentry, allows for you to add tags or context using the scope */ - beforeCapture?: ((scope: Scope, error: Error | null, componentStack: string | null) => void) | undefined; + beforeCapture?: ((scope: Scope, error: unknown, componentStack: string | undefined) => void) | undefined; }; type ErrorBoundaryState = @@ -59,7 +59,7 @@ type ErrorBoundaryState = } | { componentStack: React.ErrorInfo['componentStack']; - error: Error; + error: unknown; eventId: string; }; @@ -118,7 +118,7 @@ class ErrorBoundary extends React.Component { // If on React version >= 17, create stack trace from componentStack param and links @@ -200,9 +200,9 @@ class ErrorBoundary extends React.Component; } -function EffectSpyFallback({ error }: { error: Error }): JSX.Element { +function EffectSpyFallback({ error }: { error: unknown }): JSX.Element { const [counter, setCounter] = useState(0); React.useEffect(() => { @@ -44,7 +44,7 @@ function EffectSpyFallback({ error }: { error: Error }): JSX.Element { return ( - EffectSpyFallback {counter} - {error.message} + EffectSpyFallback {counter} - {(error as Error).message} ); } @@ -54,7 +54,6 @@ interface TestAppProps extends ErrorBoundaryProps { } const TestApp: React.FC = ({ children, errorComp, ...props }) => { - // eslint-disable-next-line no-param-reassign const customErrorComp = errorComp || ; const [isError, setError] = React.useState(false); return ( From a6ee6bab2d77e69ee5a2448b246b2ae2c2b6b138 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Fri, 26 Apr 2024 12:40:16 -0400 Subject: [PATCH 2/3] lint --- MIGRATION.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index c8cbafe624dd..25227a752e77 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -371,7 +371,6 @@ To make sure these integrations work properly you'll have to change how you - [Svelte SDK](./MIGRATION.md#svelte-sdk) - [React SDK](./MIGRATION.md#react-sdk) - ### General Removed top-level exports: `tracingOrigins`, `MetricsAggregator`, `metricsAggregatorIntegration`, `Severity`, @@ -1006,15 +1005,21 @@ export default withSentryConfig(config); #### 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. +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`. +> 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`. +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. +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 From 3709f9631db3bf58ed2d48ab9b6ad534de7558d6 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Mon, 29 Apr 2024 10:53:39 +0200 Subject: [PATCH 3/3] fix test? --- .../e2e-tests/test-applications/create-react-app/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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}