From 71bc6ff9b4676e3f056266a04966b01a9f3e6216 Mon Sep 17 00:00:00 2001
From: homumado <84349818+homumado@users.noreply.github.com>
Date: Mon, 7 Feb 2022 09:59:47 -0600
Subject: [PATCH] Fix playground exceptions (#1931)

Closes GH-1772.

Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>
Reviewed-by: Titus Wormer <tituswormer@gmail.com>
---
 docs/_component/editor.client.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js
index fa3831496..74010106c 100644
--- a/docs/_component/editor.client.js
+++ b/docs/_component/editor.client.js
@@ -119,6 +119,15 @@ export const Editor = ({children}) => {
   )
   const stats = state.file ? statistics(state.file) : {}
 
+  // Create a preview component that can handle errors with try-catch block; for catching invalid JS expressions errors that ErrorBoundary cannot catch.
+  const Preview = useCallback(() => {
+    try {
+      return state.file.result()
+    } catch (error) {
+      return <FallbackComponent error={error} />
+    }
+  }, [state])
+
   return (
     <div>
       <Tabs className="frame">
@@ -232,11 +241,7 @@ export const Editor = ({children}) => {
         <TabPanel>
           <noscript>Enable JavaScript for the rendered result.</noscript>
           <div className="frame-body frame-body-box-fixed-height frame-body-box">
-            {state.file && state.file.result ? (
-              <ErrorBoundary FallbackComponent={FallbackComponent}>
-                {state.file.result()}
-              </ErrorBoundary>
-            ) : null}
+            {state.file && state.file.result ? <Preview /> : null}
           </div>
         </TabPanel>
         <TabPanel>