From 4dc0b7dc0a12956dd34b6d73d50624d35b545048 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sat, 7 May 2022 22:10:07 +0800
Subject: [PATCH] fix(core): make error boundary fallback a component instead
 of a callback

---
 .../src/index.d.ts                            | 20 ++++++++++++-------
 .../src/client/exports/ErrorBoundary.tsx      | 16 ++++++---------
 website/docs/docusaurus-core.md               |  2 +-
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts
index 29602072a49e..f1e4a003e097 100644
--- a/packages/docusaurus-module-type-aliases/src/index.d.ts
+++ b/packages/docusaurus-module-type-aliases/src/index.d.ts
@@ -75,10 +75,14 @@ declare module '@theme-original/*';
 declare module '@theme-init/*';
 
 declare module '@theme/Error' {
-  export interface Props {
-    readonly error: Error;
-    readonly tryAgain: () => void;
-  }
+  import type {ComponentProps} from 'react';
+  import type ErrorBoundary from '@docusaurus/ErrorBoundary';
+
+  type ErrorProps = ComponentProps<
+    NonNullable<ComponentProps<typeof ErrorBoundary>['fallback']>
+  >;
+
+  export interface Props extends ErrorProps {}
   export default function Error(props: Props): JSX.Element;
 }
 
@@ -119,11 +123,13 @@ declare module '@docusaurus/constants' {
 }
 
 declare module '@docusaurus/ErrorBoundary' {
-  import type {ReactNode} from 'react';
-  import type ErrorComponent from '@theme/Error';
+  import type {ReactNode, ComponentType} from 'react';
 
   export interface Props {
-    readonly fallback?: typeof ErrorComponent;
+    readonly fallback?: ComponentType<{
+      readonly error: Error;
+      readonly tryAgain: () => void;
+    }>;
     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 5fc50be15dbd..11880aa67f70 100644
--- a/packages/docusaurus/src/client/exports/ErrorBoundary.tsx
+++ b/packages/docusaurus/src/client/exports/ErrorBoundary.tsx
@@ -33,17 +33,13 @@ export default class ErrorBoundary extends React.Component<Props, State> {
     const {error} = this.state;
 
     if (error) {
-      const fallback = this.props.fallback ?? DefaultFallback;
-      return fallback({
-        error,
-        tryAgain: () => this.setState({error: null}),
-      });
+      const Fallback = this.props.fallback ?? DefaultFallback;
+      return (
+        <Fallback error={error} tryAgain={() => this.setState({error: null})} />
+      );
     }
 
-    return (
-      children ??
-      // See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647
-      null
-    );
+    // See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647
+    return children ?? null;
   }
 }
diff --git a/website/docs/docusaurus-core.md b/website/docs/docusaurus-core.md
index 372c1a001fe9..782c7a3deb3a 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`: 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.
+- `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.
 
 ### `<Head/>` {#head}