improve tryAgain button integration

facebook · Oct 13, 2022 · fd54f12 · fd54f12
1 parent ce08b83
commit fd54f12
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 33 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
+import {ErrorBoundaryTryAgainButton} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Error';
 
 export default function ErrorPageContent({
@@ -26,13 +27,7 @@ export default function ErrorPageContent({
           </h1>
           <p>{error.message}</p>
           <div>
-            <button type="button" onClick={tryAgain}>
-              <Translate
-                id="theme.ErrorPageContent.tryAgain"
-                description="The label of the button to try again when the page crashed">
-                Try again
-              </Translate>
-            </button>
+            <ErrorBoundaryTryAgainButton onClick={tryAgain} />
           </div>
         </div>
       </div>

diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
@@ -80,3 +80,5 @@ export {usePrismTheme} from './hooks/usePrismTheme';
 export {useDocsPreferredVersion} from './contexts/docsPreferredVersion';
 
 export {processAdmonitionProps} from './utils/admonitionUtils';
+
+export {ErrorBoundaryTryAgainButton} from './utils/errorBoundaryUtils';
diff --git a/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx b/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ComponentProps} from 'react';
+import Translate from '@docusaurus/Translate';
+
+export function ErrorBoundaryTryAgainButton(
+  props: ComponentProps<'button'>,
+): JSX.Element {
+  return (
+    <button type="button" {...props}>
+      <Translate
+        id="theme.ErrorPageContent.tryAgain"
+        description="The label of the button to try again rendering when the React error boundary captures an error">
+        Try again
+      </Translate>
+    </button>
+  );
+}
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -12,7 +12,10 @@ import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import {usePrismTheme} from '@docusaurus/theme-common';
+import {
+  ErrorBoundaryTryAgainButton,
+  usePrismTheme,
+} from '@docusaurus/theme-common';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 
 import type {Props} from '@theme/Playground';
@@ -31,6 +34,32 @@ function LivePreviewLoader() {
   return <div>Loading...</div>;
 }
 
+function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
+  return (
+    <div className={styles.errorFallback}>
+      <p>{error.message}</p>
+      <ErrorBoundaryTryAgainButton onClick={tryAgain} />
+    </div>
+  );
+}
+
+function Preview() {
+  // No SSR for the live preview
+  // See https://github.com/facebook/docusaurus/issues/5747
+  return (
+    <BrowserOnly fallback={<LivePreviewLoader />}>
+      {() => (
+        <>
+          <ErrorBoundary fallback={(params) => <ErrorFallback {...params} />}>
+            <LivePreview />
+          </ErrorBoundary>
+          <LiveError />
+        </>
+      )}
+    </BrowserOnly>
+  );
+}
+
 function ResultWithHeader() {
   return (
     <>
@@ -43,16 +72,7 @@ function ResultWithHeader() {
       </Header>
       {/* https://github.com/facebook/docusaurus/issues/5747 */}
       <div className={styles.playgroundPreview}>
-        <BrowserOnly fallback={<LivePreviewLoader />}>
-          {() => (
-            <>
-              <ErrorBoundary fallback={ErrorFallback}>
-                <LivePreview />
-              </ErrorBoundary>
-              <LiveError />
-            </>
-          )}
-        </BrowserOnly>
+        <Preview />
       </div>
     </>
   );
@@ -85,21 +105,6 @@ function EditorWithHeader() {
   );
 }
 
-function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
-  return (
-    <div className={styles.errorFallback}>
-      <p>{error.message}</p>
-      <button type="button" onClick={tryAgain}>
-        <Translate
-          id="theme.ErrorPageContent.tryAgain"
-          description="The try again label of the error fallback">
-          Try Again!
-        </Translate>
-      </button>
-    </div>
-  );
-}
-
 export default function Playground({
   children,
   transformCode,