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 generated
View File

File diff suppressed because it is too large Load Diff

4
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 initializeI18n from './stores/i18n/initializeI18n';
import { TestAPI } from './components/tests/TestAPI'; import { TestAPI } from './components/tests/TestAPI';
import { GetStarted } from './components/auth/GetStarted/GetStarted'; import { GetStarted } from './components/auth/GetStarted/GetStarted';
import { ErrorBoundary } from 'react-error-boundary';
initializeI18n(); initializeI18n();
@ -21,6 +22,7 @@ const App = () => {
return ( return (
<BrowserRouter> <BrowserRouter>
<Provider store={store}> <Provider store={store}>
<ErrorBoundary FallbackComponent={ErrorHandlerPage}>
<Routes> <Routes>
<Route path={'/'} element={<ProtectedRoutes />}> <Route path={'/'} element={<ProtectedRoutes />}>
<Route path={'/page/colors'} element={<TestColors />} /> <Route path={'/page/colors'} element={<TestColors />} />
@ -34,7 +36,7 @@ const App = () => {
<Route path={'/auth/signUp'} element={<SignUpPage />}></Route> <Route path={'/auth/signUp'} element={<SignUpPage />}></Route>
<Route path={'/auth/confirm-account'} element={<ConfirmAccountPage />}></Route> <Route path={'/auth/confirm-account'} element={<ConfirmAccountPage />}></Route>
</Routes> </Routes>
<ErrorHandlerPage></ErrorHandlerPage> </ErrorBoundary>
</Provider> </Provider>
</BrowserRouter> </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 { errorActions } from '../../stores/reducers/error/slice';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
export const useError = () => { export const useError = (e: Error) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const error = useAppSelector((state) => state.error); const error = useAppSelector((state) => state.error);
const [errorMessage, setErrorMessage] = useState(''); const [errorMessage, setErrorMessage] = useState('');
@ -13,6 +13,12 @@ export const useError = () => {
setErrorMessage(error.message); setErrorMessage(error.message);
}, [error]); }, [error]);
useEffect(() => {
if (e) {
showError(e.message);
}
}, [e]);
const showError = (msg: string) => { const showError = (msg: string) => {
dispatch(errorActions.showError(msg)); 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 { useError } from './Error.hooks';
import { ErrorModal } from './ErrorModal'; import { ErrorModal } from './ErrorModal';
export const ErrorHandlerPage = () => { export const ErrorHandlerPage = ({ error }: { error: Error }) => {
const { hideError, errorMessage, displayError } = useError(); const { hideError, errorMessage, displayError } = useError(error);
return displayError ? <ErrorModal message={errorMessage} onClose={hideError}></ErrorModal> : <></>; return displayError ? <ErrorModal message={errorMessage} onClose={hideError}></ErrorModal> : <></>;
}; };