fix(live-codeblock): add error boundary to live code preview (#8015)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

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}>
+            <ErrorBoundaryTryAgainButton onClick={tryAgain} />
-              <Translate
-                id="theme.ErrorPageContent.tryAgain"
-                description="The label of the button to try again when the page crashed">
-                Try again
-              </Translate>
-            </button>
           </div>
         </div>
       </div>

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';

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>
+  );
+}

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx

@@ -12,9 +12,14 @@ 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';
+import type {Props as ErrorProps} from '@theme/Error';
 import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
 import styles from './styles.module.css';
@@ -29,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 (
     <>
@@ -41,14 +72,7 @@ function ResultWithHeader() {
       </Header>
       {/* https://github.com/facebook/docusaurus/issues/5747 */}
       <div className={styles.playgroundPreview}>
-        <BrowserOnly fallback={<LivePreviewLoader />}>
+        <Preview />
-          {() => (
-            <>
-              <LivePreview />
-              <LiveError />
-            </>
-          )}
-        </BrowserOnly>
       </div>
     </>
   );

packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css

@@ -38,3 +38,7 @@
   padding: 1rem;
   background-color: var(--ifm-pre-background);
 }
+
+.errorFallback {
+  padding: 0.55rem;
+}