diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts index 3a900c907d776..243c06c9c4ed2 100644 --- a/packages/docusaurus-module-type-aliases/src/index.d.ts +++ b/packages/docusaurus-module-type-aliases/src/index.d.ts @@ -80,9 +80,9 @@ declare module '@theme/Error' { import type {ComponentProps} from 'react'; import type ErrorBoundary from '@docusaurus/ErrorBoundary'; - type ErrorProps = ComponentProps< + type ErrorProps = Parameters< NonNullable['fallback']> - >; + >[0]; export interface Props extends ErrorProps {} export default function Error(props: Props): JSX.Element; @@ -125,13 +125,13 @@ declare module '@docusaurus/constants' { } declare module '@docusaurus/ErrorBoundary' { - import type {ReactNode, ComponentType} from 'react'; + import type {ReactNode} from 'react'; export interface Props { - readonly fallback?: ComponentType<{ + readonly fallback?: (props: { readonly error: Error; readonly tryAgain: () => void; - }>; + }) => JSX.Element; readonly children: ReactNode; } export default function ErrorBoundary(props: Props): JSX.Element; diff --git a/packages/docusaurus/src/client/exports/ErrorBoundary.tsx b/packages/docusaurus/src/client/exports/ErrorBoundary.tsx index b8dd78fe1a78d..ab1a7caa430d4 100644 --- a/packages/docusaurus/src/client/exports/ErrorBoundary.tsx +++ b/packages/docusaurus/src/client/exports/ErrorBoundary.tsx @@ -32,10 +32,12 @@ export default class ErrorBoundary extends React.Component { const {error} = this.state; if (error) { - const Fallback = this.props.fallback ?? DefaultFallback; - return ( - this.setState({error: null})} /> - ); + const fallback = + this.props.fallback ?? ((props) => ); + return fallback({ + error, + tryAgain: () => this.setState({error: null}), + }); } // See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647 diff --git a/website/docs/docusaurus-core.md b/website/docs/docusaurus-core.md index 782c7a3deb3aa..9a84bb961ad53 100644 --- a/website/docs/docusaurus-core.md +++ b/website/docs/docusaurus-core.md @@ -55,7 +55,7 @@ This component doesn't catch build-time errors and only protects against client- #### Props {#errorboundary-props} -- `fallback`: a React component. The error boundary will render the component with two props: `error`, the error that was caught, and `tryAgain`, a function (`() => void`) callback to reset the error in the component and try rendering it again. +- `fallback`: an optional callback returning a JSX element. It will receive two props: `error`, the error that was caught, and `tryAgain`, a function (`() => void`) callback to reset the error in the component and try rendering it again. If not present, `@theme/Error` will be rendered instead. ### `` {#head}