refactor: introduce error boundary

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

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