feat/implement error boundary

frontend/appflowy_tauri/src/appflowy_app/App.tsx

@@ -14,6 +14,7 @@ import { ErrorHandlerPage } from './components/error/ErrorHandlerPage';
 import initializeI18n from './stores/i18n/initializeI18n';
 import { TestAPI } from './components/tests/TestAPI';
 import { GetStarted } from './components/auth/GetStarted/GetStarted';
+import { ErrorBoundary } from 'react-error-boundary';
 
 initializeI18n();
 
@@ -21,20 +22,21 @@ const App = () => {
   return (
     <BrowserRouter>
       <Provider store={store}>
-        <Routes>
-          <Route path={'/'} element={<ProtectedRoutes />}>
-            <Route path={'/page/colors'} element={<TestColors />} />
-            <Route path={'/page/api-test'} element={<TestAPI />} />
-            <Route path={'/page/document/:id'} element={<DocumentPage />} />
-            <Route path={'/page/board/:id'} element={<BoardPage />} />
-            <Route path={'/page/grid/:id'} element={<GridPage />} />
-          </Route>
-          <Route path={'/auth/login'} element={<LoginPage />}></Route>
-          <Route path={'/auth/getStarted'} element={<GetStarted />}></Route>
-          <Route path={'/auth/signUp'} element={<SignUpPage />}></Route>
-          <Route path={'/auth/confirm-account'} element={<ConfirmAccountPage />}></Route>
-        </Routes>
-        <ErrorHandlerPage></ErrorHandlerPage>
+        <ErrorBoundary FallbackComponent={ErrorHandlerPage}>
+          <Routes>
+            <Route path={'/'} element={<ProtectedRoutes />}>
+              <Route path={'/page/colors'} element={<TestColors />} />
+              <Route path={'/page/api-test'} element={<TestAPI />} />
+              <Route path={'/page/document/:id'} element={<DocumentPage />} />
+              <Route path={'/page/board/:id'} element={<BoardPage />} />
+              <Route path={'/page/grid/:id'} element={<GridPage />} />
+            </Route>
+            <Route path={'/auth/login'} element={<LoginPage />}></Route>
+            <Route path={'/auth/getStarted'} element={<GetStarted />}></Route>
+            <Route path={'/auth/signUp'} element={<SignUpPage />}></Route>
+            <Route path={'/auth/confirm-account'} element={<ConfirmAccountPage />}></Route>
+          </Routes>
+        </ErrorBoundary>
       </Provider>
     </BrowserRouter>
   );

frontend/appflowy_tauri/src/appflowy_app/components/error/Error.hooks.ts

@@ -2,7 +2,7 @@ import { useAppDispatch, useAppSelector } from '../../stores/store';
 import { errorActions } from '../../stores/reducers/error/slice';
 import { useEffect, useState } from 'react';
 
-export const useError = () => {
+export const useError = (e: Error) => {
   const dispatch = useAppDispatch();
   const error = useAppSelector((state) => state.error);
   const [errorMessage, setErrorMessage] = useState('');
@@ -13,6 +13,12 @@ export const useError = () => {
     setErrorMessage(error.message);
   }, [error]);
 
+  useEffect(() => {
+    if (e) {
+      showError(e.message);
+    }
+  }, [e]);
+
   const showError = (msg: string) => {
     dispatch(errorActions.showError(msg));
   };

frontend/appflowy_tauri/src/appflowy_app/components/error/ErrorHandlerPage.tsx

@@ -1,8 +1,8 @@
 import { useError } from './Error.hooks';
 import { ErrorModal } from './ErrorModal';
 
-export const ErrorHandlerPage = () => {
-  const { hideError, errorMessage, displayError } = useError();
+export const ErrorHandlerPage = ({ error }: { error: Error }) => {
+  const { hideError, errorMessage, displayError } = useError(error);
 
   return displayError ? <ErrorModal message={errorMessage} onClose={hideError}></ErrorModal> : <></>;
 };