From daf3118b70ecfd022ae78f00638c0ca34998896d Mon Sep 17 00:00:00 2001
From: MrWindlike <MrWindlike@gmail.com>
Date: Mon, 14 Feb 2022 15:19:47 +0800
Subject: [PATCH] fix(editor): fix crash after errors hanpened

---
 packages/editor/src/components/Editor.tsx | 37 +++++++++++++----------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/editor/src/components/Editor.tsx b/packages/editor/src/components/Editor.tsx
index 978aa90a..9d41ca0d 100644
--- a/packages/editor/src/components/Editor.tsx
+++ b/packages/editor/src/components/Editor.tsx
@@ -67,13 +67,6 @@ export const Editor: React.FC<Props> = observer(
     const [recoverKey, setRecoverKey] = useState(0);
     const [isError, setIsError] = useState<boolean>(false);
     const [store, setStore] = useState(stateStore);
-    useEffect(() => {
-      const stop = watch(stateStore, newValue => {
-        setStore({ ...newValue });
-      });
-
-      return stop;
-    }, [stateStore]);
 
     const onError = (err: Error | null) => {
       setIsError(err !== null);
@@ -133,6 +126,23 @@ export const Editor: React.FC<Props> = observer(
       );
     }, [App, app, gridCallbacks, recoverKey]);
 
+    useEffect(() => {
+      // when errors happened, `ErrorBoundary` wouldn't update until rerender
+      // so after the errors are fixed, would trigger this effect before `setError(false)`
+      // the process to handle the error is:
+      // app change -> error happen -> setError(true) -> setRecoverKey(recoverKey + 1) -> app change -> setRecoverKey(recoverKey + 1) -> setError(false)
+      if (isError) {
+        setRecoverKey(recoverKey + 1);
+      }
+    }, [app, isError]);  // it only should depend on the app schema to update
+    useEffect(() => {
+      const stop = watch(stateStore, newValue => {
+        setStore({ ...newValue });
+      });
+
+      return stop;
+    }, [stateStore]);
+
     const renderMain = () => {
       const appBox = (
         <Box flex="1" background="gray.50" p={1} overflow="hidden">
@@ -151,9 +161,7 @@ export const Editor: React.FC<Props> = observer(
               position="absolute"
             />
             <Box width="full" overflow="auto" position="relative">
-              <EditorMaskWrapper services={services}>
-                {appComponent}
-              </EditorMaskWrapper>
+              <EditorMaskWrapper services={services}>{appComponent}</EditorMaskWrapper>
             </Box>
             <WarningArea services={services} />
           </Box>
@@ -220,6 +228,9 @@ export const Editor: React.FC<Props> = observer(
                     services={services}
                   />
                 </TabPanel>
+                <TabPanel p={0}>
+                  <DataSource active={activeDataSource?.id ?? ''} services={services} />
+                </TabPanel>
                 <TabPanel p={0} height="100%">
                   <StateViewer store={store} />
                 </TabPanel>
@@ -279,12 +290,6 @@ export const Editor: React.FC<Props> = observer(
       );
     };
 
-    useEffect(() => {
-      if (isError) {
-        setRecoverKey(recoverKey + 1);
-      }
-    }, [app, isError, recoverKey]);
-
     return (
       <KeyboardEventWrapper
         components={components}