diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts index 243c06c9c4ed..c8f2c995f012 100644 --- a/packages/docusaurus-module-type-aliases/src/index.d.ts +++ b/packages/docusaurus-module-type-aliases/src/index.d.ts @@ -77,14 +77,9 @@ declare module '@theme-original/*'; declare module '@theme-init/*'; declare module '@theme/Error' { - import type {ComponentProps} from 'react'; - import type ErrorBoundary from '@docusaurus/ErrorBoundary'; + import type {FallbackParams} from '@docusaurus/ErrorBoundary'; - type ErrorProps = Parameters< - NonNullable['fallback']> - >[0]; - - export interface Props extends ErrorProps {} + export interface Props extends FallbackParams {} export default function Error(props: Props): JSX.Element; } @@ -127,11 +122,15 @@ declare module '@docusaurus/constants' { declare module '@docusaurus/ErrorBoundary' { import type {ReactNode} from 'react'; + export type FallbackParams = { + readonly error: Error; + readonly tryAgain: () => void; + }; + + export type FallbackFunction = (params: FallbackParams) => JSX.Element; + export interface Props { - readonly fallback?: (props: { - readonly error: Error; - readonly tryAgain: () => void; - }) => JSX.Element; + readonly fallback?: FallbackFunction; readonly children: ReactNode; } export default function ErrorBoundary(props: Props): JSX.Element; diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx index f6e749c9833d..7f58712af95c 100644 --- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx @@ -45,7 +45,7 @@ export default function Layout(props: Props): JSX.Element {
- }> + }> {children}
diff --git a/packages/docusaurus/src/client/exports/ErrorBoundary.tsx b/packages/docusaurus/src/client/exports/ErrorBoundary.tsx index 8a2e13473e68..6cad5ad0bde2 100644 --- a/packages/docusaurus/src/client/exports/ErrorBoundary.tsx +++ b/packages/docusaurus/src/client/exports/ErrorBoundary.tsx @@ -7,13 +7,21 @@ import React, {type ReactNode} from 'react'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; -import DefaultFallback from '@theme/Error'; -import type {Props} from '@docusaurus/ErrorBoundary'; +import ThemeError from '@theme/Error'; +import type { + FallbackFunction, + FallbackParams, + Props, +} from '@docusaurus/ErrorBoundary'; type State = { error: Error | null; }; +const DefaultFallback: FallbackFunction = (params) => ( + +); + export default class ErrorBoundary extends React.Component { constructor(props: Props) { super(props); @@ -32,14 +40,12 @@ export default class ErrorBoundary extends React.Component { const {error} = this.state; if (error) { - const fallbackProps = { + const fallbackParams: FallbackParams = { error, tryAgain: () => this.setState({error: null}), }; - if (this.props.fallback) { - return this.props.fallback(fallbackProps); - } - return ; + const fallback: FallbackFunction = this.props.fallback || DefaultFallback; + return fallback(fallbackParams); } // 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 bda35f9f72e1..c43d22c061e0 100644 --- a/website/docs/docusaurus-core.md +++ b/website/docs/docusaurus-core.md @@ -55,7 +55,13 @@ This component doesn't catch build-time errors and only protects against client- #### Props {#errorboundary-props} -- `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. `@theme/Error` is used for the error boundaries wrapping the site, above the layout. +- `fallback`: an optional render callback returning a JSX element. It will receive an object with 2 attributes: `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. `@theme/Error` is used for the error boundaries wrapping the site, above the layout. + +:::caution + +The `fallback` prop is a callback, and **not a React functional component**. You can't use React hooks inside this callback. + +::: ### `` {#head}