feat: add ErrorBoundary

Author: drl990114

Cargo.lock

@@ -18,7 +18,7 @@ anyhow = "1.0.75"
 dark-light = "1.0.0"
 log = "0.4.19"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.4.1", features = [ "window-set-title", "window-start-dragging", "clipboard-write-text", "dialog-open", "dialog-save", "fs-exists", "fs-read-file", "fs-write-file", "global-shortcut-all", "os-all", "path-all", "window-close", "window-create", "devtools"] }
+tauri = { version = "1.4.1", features = [ "shell-open", "window-set-title", "window-start-dragging", "clipboard-write-text", "dialog-open", "dialog-save", "fs-exists", "fs-read-file", "fs-write-file", "global-shortcut-all", "os-all", "path-all", "window-close", "window-create", "devtools"] }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 regex = "1.9.3"
 mf-utils = { path = "../../../crates/utils" }

apps/desktop/src-tauri/Cargo.toml

@@ -46,6 +46,9 @@
         "create": true,
         "setTitle": true,
         "startDragging": true
+      },
+      "shell": {
+        "open": true
       }
     },
     "bundle": {
@@ -80,4 +83,4 @@
       }
     }
   }
-}
+}

apps/desktop/src-tauri/tauri.conf.json

@@ -0,0 +1,52 @@
+import type { ErrorInfo, PropsWithChildren } from 'react'
+import React from 'react'
+import styled from 'styled-components'
+
+const Title = styled.h1`
+    color: ${({ theme }) => theme.warnColor};
+`
+
+interface ErrorBoundaryProps {
+  hasError?: boolean
+  error?: unknown
+}
+
+class ErrorBoundary extends React.Component<
+  PropsWithChildren<ErrorBoundaryProps>,
+  { hasError: boolean }
+> {
+  constructor(props: PropsWithChildren<ErrorBoundaryProps>) {
+    super(props)
+    this.state = { hasError: this.props.hasError ?? false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('[ErrorBoundary]', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <>
+          <Title data-testid='editor_error'>Sorry, something went wrong!</Title>
+          <p>{String(this.props.error)}</p>
+          <a
+            href='https://github.com/linebyline-group/linebyline/issues/new/choose'
+            target='_blank'
+            rel='noreferrer'
+          >
+            Please tell us about it and we will fix it in less time
+          </a>
+        </>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

packages/editor/src/components/ErrorBoundary.tsx

@@ -1,37 +1,46 @@
-import { Remirror} from '@remirror/react'
+import { Remirror } from '@remirror/react'
 import { createContextState } from 'create-context-state'
 import React, { memo } from 'react'
 import Text from '../Text'
 import type { EditorDelegate } from '../../types'
-import { ProsemirrorDevTools } from "@remirror/dev"
+import { ProsemirrorDevTools } from '@remirror/dev'
 import { createSourceCodeDelegate } from './delegate'
+import ErrorBoundary from '../ErrorBoundary'
 
 type Context = Props
 
 type Props = {
   markText: EditorDelegate
 } & Partial<SourceCodeEditorProps>
 
-const [SourceEditorProvider, useSourceCodeEditor] = createContextState<Context, Props>(({ props }) => {
-  return {
-    ...props,
-  }
-})
+const [SourceEditorProvider, useSourceCodeEditor] = createContextState<Context, Props>(
+  ({ props }) => {
+    return {
+      ...props,
+    }
+  },
+)
 
 const SourceCodeEditorCore = memo((props: { markdownToolBar?: React.ReactNode[] }) => {
   const { markdownToolBar } = props
   const { content, markText, hooks, isTesting } = useSourceCodeEditor()
 
+  let initialCntent
+
+  try {
+    initialCntent = markText.stringToDoc(content!)
+  } catch (error) {
+    return <ErrorBoundary hasError error={error} />
+  }
+
   return (
-    <Remirror
-      manager={markText.manager}
-      initialContent={markText.stringToDoc(content!)}
-      hooks={hooks}
-    >
-      <Text className='h-full w-full overflow-auto px-0' style={{ padding: 0 }} />
-      {markdownToolBar || null}
-      {isTesting ? <ProsemirrorDevTools /> : null}
-    </Remirror>
+    <ErrorBoundary>
+      <Remirror manager={markText.manager} initialContent={initialCntent} hooks={hooks}>
+        <Text className='h-full w-full overflow-auto px-0' style={{ padding: 0 }} />
+        {markdownToolBar || null}
+        {isTesting ? <ProsemirrorDevTools /> : null}
+      </Remirror>
+    </ErrorBoundary>
   )
 })
 

packages/editor/src/components/SourceEditor/index.tsx

@@ -5,8 +5,9 @@ import Wrapper from '../Wrapper'
 import { createWysiwygDelegate } from './delegate'
 import type { EditorDelegate } from '../../types'
 import TableToolbar from '../../toolbar/TableToolbar'
-import { ProsemirrorDevTools } from "@remirror/dev"
-import React from "react"
+import { ProsemirrorDevTools } from '@remirror/dev'
+import React from 'react'
+import ErrorBoundary from '../ErrorBoundary'
 
 export const OffsetContext = createContext({ top: 0, left: 0 })
 
@@ -15,21 +16,30 @@ const WysiwygEditor: FC<WysiwygEditorProps> = (props) => {
 
   const editorDelegate = delegate ?? createWysiwygDelegate()
 
+  let initialContent
+  try {
+    initialContent = editorDelegate.stringToDoc(content)
+  } catch (error) {
+    return <ErrorBoundary hasError error={error}/>
+  }
+
   return (
-    <Wrapper>
-      <OffsetContext.Provider value={offset || { top: 0, left: 0 }}>
-        <Remirror
-          manager={editorDelegate.manager}
-          initialContent={editorDelegate.stringToDoc(content)}
-          hooks={hooks}
-        >
-          <TableToolbar />
-          {wysiwygToolBar || null}
-          <Text className="w-full markdown-body" />
-          {isTesting ? <ProsemirrorDevTools /> : null}
-        </Remirror>
-      </OffsetContext.Provider>
-    </Wrapper>
+    <ErrorBoundary>
+      <Wrapper>
+        <OffsetContext.Provider value={offset || { top: 0, left: 0 }}>
+          <Remirror
+            manager={editorDelegate.manager}
+            initialContent={initialContent}
+            hooks={hooks}
+          >
+            <TableToolbar />
+            {wysiwygToolBar || null}
+            <Text className='w-full markdown-body' />
+            {isTesting ? <ProsemirrorDevTools /> : null}
+          </Remirror>
+        </OffsetContext.Provider>
+      </Wrapper>
+    </ErrorBoundary>
   )
 }