feat(react): type error as unknown in ErrorBoundary (#11819)

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 <[email protected]>

Author: AbhiPrasad

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

dev-packages/e2e-tests/test-applications/create-react-app/src/App.tsx

@@ -9,7 +9,7 @@ function App() {
       fallback={({ error, componentStack, resetError }) => (
         <React.Fragment>
           <div>You have encountered an error</div>
-          <div>{error.toString()}</div>
+          <div>{`${error}`}</div>
           <div>{componentStack}</div>
           <button
             onClick={() => {

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<ErrorBoundaryProps, ErrorBoundarySta
     }
   }
 
-  public componentDidCatch(error: Error & { cause?: Error }, { componentStack }: React.ErrorInfo): void {
+  public componentDidCatch(error: unknown, { componentStack }: React.ErrorInfo): void {
     const { beforeCapture, onError, showDialog, dialogOptions } = this.props;
     withScope(scope => {
       // If on React version >= 17, create stack trace from componentStack param and links
@@ -200,9 +200,9 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
       if (typeof fallback === 'function') {
         element = React.createElement(fallback, {
           error: state.error,
-          componentStack: state.componentStack,
+          componentStack: state.componentStack as string,
           resetError: this.resetErrorBoundary,
-          eventId: state.eventId,
+          eventId: state.eventId as string,
         });
       } else {
         element = fallback;

packages/react/test/errorboundary.test.tsx

@@ -35,7 +35,7 @@ function Bam(): JSX.Element {
   return <Boo title={title} />;
 }
 
-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 (
     <span>
-      EffectSpyFallback {counter} - {error.message}
+      EffectSpyFallback {counter} - {(error as Error).message}
     </span>
   );
 }
@@ -54,7 +54,6 @@ interface TestAppProps extends ErrorBoundaryProps {
 }
 
 const TestApp: React.FC<TestAppProps> = ({ children, errorComp, ...props }) => {
-  // eslint-disable-next-line no-param-reassign
   const customErrorComp = errorComp || <Bam />;
   const [isError, setError] = React.useState(false);
   return (