simplify types + make it clear in doc fallback is a render callback

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<ComponentProps<typeof ErrorBoundary>['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;

packages/docusaurus-theme-classic/src/theme/Layout/index.tsx

@@ -45,7 +45,7 @@ export default function Layout(props: Props): JSX.Element {
       <Navbar />
 
       <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
-        <ErrorBoundary fallback={(p) => <ErrorPageContent {...p} />}>
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
           {children}
         </ErrorBoundary>
       </div>

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) => (
+  <ThemeError {...params} />
+);
+
 export default class ErrorBoundary extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -32,14 +40,12 @@ export default class ErrorBoundary extends React.Component<Props, State> {
     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 <DefaultFallback {...fallbackProps} />;
+      const fallback: FallbackFunction = this.props.fallback || DefaultFallback;
+      return fallback(fallbackParams);
     }
 
     // See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647

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/>` {#head}