feat(react): Convert non-Error objects to Error instances in ErrorBoundary

examples/vite-react-18-suspense-prerender-siblings-problem/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./vite.config.ts"],"version":"5.8.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./vite.config.ts"],"version":"5.9.2"}

packages/react/src/ErrorBoundary.spec.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { type ComponentRef, createElement, createRef } from 'react'
+import { type ComponentRef, type ReactNode, createElement, createRef } from 'react'
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
 import {
   ErrorBoundary,
@@ -84,6 +84,155 @@ describe('<ErrorBoundary/>', () => {
     expect(onError).toHaveBeenCalledTimes(1)
   })
 
+  it('should convert null to Error instance', () => {
+    const fallbackFn = vi.fn<(props: ErrorBoundaryFallbackProps) => ReactNode>()
+    fallbackFn.mockImplementation(({ error }) => <div>{error.message}</div>)
+
+    render(
+      <ErrorBoundary fallback={fallbackFn}>
+        {createElement(() => {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
+          throw null
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(fallbackFn).toHaveBeenCalled()
+    const error = fallbackFn.mock.calls[0][0].error
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toBe('null')
+  })
+
+  it('should convert string to Error instance', () => {
+    const fallbackFn = vi.fn<(props: ErrorBoundaryFallbackProps) => ReactNode>()
+    fallbackFn.mockImplementation(({ error }) => <div>{error.message}</div>)
+
+    render(
+      <ErrorBoundary fallback={fallbackFn}>
+        {createElement(() => {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
+          throw 'string error'
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(fallbackFn).toHaveBeenCalled()
+    const error = fallbackFn.mock.calls[0][0].error
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toBe('string error')
+  })
+
+  it('should convert number to Error instance', () => {
+    const fallbackFn = vi.fn<(props: ErrorBoundaryFallbackProps) => ReactNode>()
+    fallbackFn.mockImplementation(({ error }) => <div>{error.message}</div>)
+
+    render(
+      <ErrorBoundary fallback={fallbackFn}>
+        {createElement(() => {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
+          throw 42
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(fallbackFn).toHaveBeenCalled()
+    const error = fallbackFn.mock.calls[0][0].error
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toBe('42')
+  })
+
+  it('should convert plain object to Error instance', () => {
+    const fallbackFn = vi.fn<(props: ErrorBoundaryFallbackProps) => ReactNode>()
+    fallbackFn.mockImplementation(({ error }) => <div>{error.message}</div>)
+
+    render(
+      <ErrorBoundary fallback={fallbackFn}>
+        {createElement(() => {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
+          throw { message: 'object error' }
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(fallbackFn).toHaveBeenCalled()
+    const error = fallbackFn.mock.calls[0][0].error
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toBe('[object Object]')
+  })
+
+  it('should keep Error instance as-is when Error is thrown', () => {
+    const fallbackFn = vi.fn<(props: ErrorBoundaryFallbackProps) => ReactNode>()
+    fallbackFn.mockImplementation(({ error }) => <div>{error.message}</div>)
+    const originalError = new Error('original error')
+
+    render(
+      <ErrorBoundary fallback={fallbackFn}>
+        {createElement(() => {
+          throw originalError
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(fallbackFn).toHaveBeenCalled()
+    const error = fallbackFn.mock.calls[0][0].error
+    expect(error).toBeInstanceOf(Error)
+    expect(error).toBe(originalError)
+  })
+
+  it('should pass Error instance to onError callback when null is thrown', () => {
+    const onError = vi.fn()
+
+    render(
+      <ErrorBoundary fallback={<div>fallback</div>} onError={onError}>
+        {createElement(() => {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
+          throw null
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(onError).toHaveBeenCalled()
+    const error = onError.mock.calls[0][0]
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toBe('null')
+  })
+
+  it('should pass Error instance to onError callback when string is thrown', () => {
+    const onError = vi.fn()
+
+    render(
+      <ErrorBoundary fallback={<div>fallback</div>} onError={onError}>
+        {createElement(() => {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
+          throw 'string error'
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(onError).toHaveBeenCalled()
+    const error = onError.mock.calls[0][0]
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toBe('string error')
+  })
+
+  it('should pass Error instance to onError callback when number is thrown', () => {
+    const onError = vi.fn()
+
+    render(
+      <ErrorBoundary fallback={<div>fallback</div>} onError={onError}>
+        {createElement(() => {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
+          throw 42
+        })}
+      </ErrorBoundary>
+    )
+
+    expect(onError).toHaveBeenCalled()
+    const error = onError.mock.calls[0][0]
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toBe('42')
+  })
+
   it('should be reset by items of resetKeys, and call onReset', async () => {
     const onReset = vi.fn()
 

packages/react/src/ErrorBoundary.tsx

@@ -128,12 +128,20 @@ const initialErrorBoundaryState: ErrorBoundaryState = {
   error: null,
 }
 
+// Although `componentDidCatch` and `getDerivedStateFromError` are typed to accept an `Error` object,
+// they can also be invoked with non-error objects. This is why we need to convert them to Error instances.
+// See: https://github.com/getsentry/sentry-javascript/issues/6167
+const convertToError = (error: unknown): Error => {
+  return error instanceof Error ? error : new Error(String(error))
+}
+
 class BaseErrorBoundary<TShouldCatch extends ShouldCatch> extends Component<
   ErrorBoundaryProps<TShouldCatch>,
   ErrorBoundaryState
 > {
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { isError: true, error }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static getDerivedStateFromError(error: any): ErrorBoundaryState {
+    return { isError: true, error: convertToError(error) }
   }
 
   state = initialErrorBoundaryState
@@ -146,8 +154,9 @@ class BaseErrorBoundary<TShouldCatch extends ShouldCatch> extends Component<
     }
   }
 
-  componentDidCatch(error: InferError<TShouldCatch>, info: ErrorInfo) {
-    this.props.onError?.(error, info)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  componentDidCatch(error: any, info: ErrorInfo) {
+    this.props.onError?.(convertToError(error) as InferError<TShouldCatch>, info)
   }
 
   reset = () => {