From 2ad6f4635615854f40bacb2dbe260e94a0fe1292 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 25 May 2022 18:53:25 +0800
Subject: [PATCH] fix(core): always treat error boundary fallback as a callback

---
 packages/docusaurus-module-type-aliases/src/index.d.ts | 10 +++++-----
 .../src/theme/Layout/index.tsx                         |  4 +++-
 packages/docusaurus/src/client/App.tsx                 |  4 +---
 .../docusaurus/src/client/exports/ErrorBoundary.tsx    | 10 ++++++----
 website/docs/docusaurus-core.md                        |  2 +-
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts
index 3a900c907d77..243c06c9c4ed 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<ComponentProps<typeof ErrorBoundary>['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-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index c5503edcaaa2..f6e749c9833d 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -45,7 +45,9 @@ export default function Layout(props: Props): JSX.Element {
       <Navbar />
 
       <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
-        <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
+        <ErrorBoundary fallback={(p) => <ErrorPageContent {...p} />}>
+          {children}
+        </ErrorBoundary>
       </div>
 
       {!noFooter && <Footer />}
diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
index da3a1ef22f0a..8554f5b91aec 100644
--- a/packages/docusaurus/src/client/App.tsx
+++ b/packages/docusaurus/src/client/App.tsx
@@ -23,14 +23,12 @@ import SiteMetadataDefaults from './SiteMetadataDefaults';
 // TODO, quick fix for CSS insertion order
 // eslint-disable-next-line import/order
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-// eslint-disable-next-line import/order
-import Error from '@theme/Error';
 
 export default function App(): JSX.Element {
   const routeElement = renderRoutes(routes);
   const location = useLocation();
   return (
-    <ErrorBoundary fallback={Error}>
+    <ErrorBoundary>
       <DocusaurusContextProvider>
         <BrowserContextProvider>
           <Root>
diff --git a/packages/docusaurus/src/client/exports/ErrorBoundary.tsx b/packages/docusaurus/src/client/exports/ErrorBoundary.tsx
index b8dd78fe1a78..ab1a7caa430d 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<Props, State> {
     const {error} = this.state;
 
     if (error) {
-      const Fallback = this.props.fallback ?? DefaultFallback;
-      return (
-        <Fallback error={error} tryAgain={() => this.setState({error: null})} />
-      );
+      const fallback =
+        this.props.fallback ?? ((props) => <DefaultFallback {...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 782c7a3deb3a..bda35f9f72e1 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. `@theme/Error` is used for the error boundaries wrapping the site, above the layout.
 
 ### `<Head/>` {#head}