From bfca2440612e6629ec9a314e171b5e86fbf07e44 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 8 Nov 2022 13:29:10 -0600
Subject: [PATCH] refactor: introduce error boundary

---
 .../Components/BlockEditor/BlockEditor.tsx    | 13 ++++---
 .../src/javascripts/Utils/ErrorBoundary.tsx   | 37 +++++++++++++++++++
 2 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/src/javascripts/Utils/ErrorBoundary.tsx

diff --git a/packages/web/src/javascripts/Components/BlockEditor/BlockEditor.tsx b/packages/web/src/javascripts/Components/BlockEditor/BlockEditor.tsx
index 8c2d12f87..1bacb7f24 100644
--- a/packages/web/src/javascripts/Components/BlockEditor/BlockEditor.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/BlockEditor.tsx
@@ -3,6 +3,7 @@ import { SNNote } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useRef } from 'react'
 import { BlockEditorController } from './BlockEditorController'
 import { BlocksEditor } from '@standardnotes/blocks-editor'
+import { ErrorBoundary } from '@/Utils/ErrorBoundary'
 
 const StringEllipses = '...'
 const NotePreviewCharLimit = 160
@@ -28,11 +29,13 @@ export const BlockEditor: FunctionComponent<Props> = ({ note, application }) =>
 
   return (
     <div className="relative h-full w-full p-5">
-      <BlocksEditor
-        onChange={handleChange}
-        initialValue={note.content.text}
-        className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
-      />
+      <ErrorBoundary>
+        <BlocksEditor
+          onChange={handleChange}
+          initialValue={note.content.text}
+          className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
+        />
+      </ErrorBoundary>
     </div>
   )
 }
diff --git a/packages/web/src/javascripts/Utils/ErrorBoundary.tsx b/packages/web/src/javascripts/Utils/ErrorBoundary.tsx
new file mode 100644
index 000000000..ce6794437
--- /dev/null
+++ b/packages/web/src/javascripts/Utils/ErrorBoundary.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+type State = {
+  error?: Error
+}
+
+type Props = {
+  children: React.ReactNode
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {}
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: unknown) {
+    console.error(error, errorInfo)
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="text-danger">
+          <span>Something went wrong rendering this component: </span>
+          <span className="font-bold">{this.state.error.message}</span>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}