Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat/implement error boundary

Browse Source
This commit is contained in:
Mikias Tilahun Abebe 2023-04-10 18:23:58 +03:00
parent 43cafdd524
commit 37a6b54e82
4 changed files with 1018 additions and 826 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1802
frontend/appflowy_tauri/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

30
frontend/appflowy_tauri/src/appflowy_app/App.tsx
View File

@ -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>
);

8
frontend/appflowy_tauri/src/appflowy_app/components/error/Error.hooks.ts
View File

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

4
frontend/appflowy_tauri/src/appflowy_app/components/error/ErrorHandlerPage.tsx
View File

@ -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> : <></>;
};