From 79b3f65a1707a201c9cfd33ae66ef17c4f76d187 Mon Sep 17 00:00:00 2001
From: Rashid <64389512+rashidmya@users.noreply.github.com>
Date: Thu, 13 Oct 2022 19:49:27 +0400
Subject: [PATCH] fix(live-codeblock): add error boundary to live code preview
 (#8015)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
---
 .../src/theme/ErrorPageContent.tsx            |  9 +---
 packages/docusaurus-theme-common/src/index.ts |  2 +
 .../src/utils/errorBoundaryUtils.tsx          | 23 ++++++++++
 .../src/theme/Playground/index.tsx            | 42 +++++++++++++++----
 .../src/theme/Playground/styles.module.css    |  4 ++
 5 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx

diff --git a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
index 9a64781260..a2664859ed 100644
--- 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
index 7df15c4516..d282c1d853 100644
--- 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
new file mode 100644
index 0000000000..df1a5277d9
--- /dev/null
+++ 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
index 6353159ba2..a331aa7039 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/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 />}>
-          {() => (
-            <>
-              <LivePreview />
-              <LiveError />
-            </>
-          )}
-        </BrowserOnly>
+        <Preview />
       </div>
     </>
   );
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
index f3298c779e..a823576a0d 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
+++ b/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;
+}