From db58c09b520f10626debb19ba0fe76ff8065d568 Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Mon, 11 Sep 2023 18:13:14 +0200
Subject: [PATCH] fix: Wrap Editor with ErrorBoundary and solve all problems
 (#17377)

---
 .../scenes/notebooks/Notebook/Notebook.tsx    | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
index afc5906272451..296301a7d8f7c 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
@@ -16,6 +16,7 @@ import { EditorFocusPosition } from './utils'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { NotebookSidebar } from './NotebookSidebar'
+import { ErrorBoundary } from '~/layout/ErrorBoundary'
 
 export type NotebookProps = {
     shortId: string
@@ -101,23 +102,25 @@ export function Notebook({ shortId, editable = false, initialAutofocus = null }:
                     <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOK_SETTINGS_WIDGETS}>
                         <NotebookSidebar />
                     </FlaggedFeature>
-                    <Editor
-                        initialContent={content}
-                        onCreate={setEditor}
-                        onUpdate={onEditorUpdate}
-                        onSelectionUpdate={onEditorSelectionUpdate}
-                        placeholder={({ node }: { node: any }) => {
-                            if (node.type.name === 'heading' && node.attrs.level === 1) {
-                                return `Untitled - maybe.. "${headingPlaceholder}"`
-                            }
+                    <ErrorBoundary>
+                        <Editor
+                            initialContent={content}
+                            onCreate={setEditor}
+                            onUpdate={onEditorUpdate}
+                            onSelectionUpdate={onEditorSelectionUpdate}
+                            placeholder={({ node }: { node: any }) => {
+                                if (node.type.name === 'heading' && node.attrs.level === 1) {
+                                    return `Untitled - maybe.. "${headingPlaceholder}"`
+                                }
 
-                            if (node.type.name === 'heading') {
-                                return `Heading ${node.attrs.level}`
-                            }
+                                if (node.type.name === 'heading') {
+                                    return `Heading ${node.attrs.level}`
+                                }
 
-                            return ''
-                        }}
-                    />
+                                return ''
+                            }}
+                        />
+                    </ErrorBoundary>
                 </div>
             </div>
         </BindLogic>