Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add error boundaries to individual routes

Browse Source
This commit is contained in:
jeffvli 2023-01-04 22:38:27 -08:00
parent 24f06db2b8
commit 98ef0b44ec
2 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/features/action-required/components/error-fallback.tsx
View File

@ -1,15 +1,18 @@
import { Box, Center, Divider, Group, Stack } from '@mantine/core';
import type { FallbackProps } from 'react-error-boundary';
import { RiErrorWarningLine, RiArrowLeftLine } from 'react-icons/ri';
import { RiErrorWarningLine, RiHomeFill, RiArrowLeftSLine } from 'react-icons/ri';
import { useNavigate, useRouteError } from 'react-router';
import styled from 'styled-components';
import { Button, Text } from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes';
const Container = styled(Box)`
background: var(--main-bg);
`;
export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
const error = useRouteError() as any;
return (
<Container>
<Center sx={{ height: '100vh' }}>
@ -47,11 +50,22 @@ export const RouteErrorBoundary = () => {
navigate(-1);
};
const handleHome = () => {
navigate(AppRoute.HOME);
};
return (
<Container>
<Center sx={{ height: '100vh' }}>
<Stack sx={{ maxWidth: '50%' }}>
<Group>
<Button
px={10}
variant="subtle"
onClick={handleReturn}
>
<RiArrowLeftSLine size={20} />
</Button>
<RiErrorWarningLine
color="var(--danger-color)"
size={30}
@ -62,12 +76,12 @@ export const RouteErrorBoundary = () => {
<Text size="sm">{error?.message}</Text>
<Group grow>
<Button
leftIcon={<RiArrowLeftLine />}
leftIcon={<RiHomeFill />}
sx={{ flex: 0.5 }}
variant="default"
onClick={handleReturn}
onClick={handleHome}
>
Go back
Go home
</Button>
<Button
variant="filled"

10
src/renderer/router/app-router.tsx
View File

@ -55,41 +55,51 @@ export const AppRouter = () => {
<Route
index
element={<HomeRoute />}
errorElement={<RouteErrorBoundary />}
/>
<Route
element={<HomeRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.HOME}
/>
<Route
element={<NowPlayingRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.NOW_PLAYING}
/>
<Route
element={<AlbumListRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.LIBRARY_ALBUMS}
/>
<Route
element={<AlbumDetailRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.LIBRARY_ALBUMS_DETAIL}
/>
<Route
element={<SongListRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.LIBRARY_SONGS}
/>
<Route
element={<PlaylistListRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.PLAYLISTS}
/>
<Route
element={<PlaylistDetailRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.PLAYLISTS_DETAIL}
/>
<Route
element={<PlaylistDetailSongListRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
/>
<Route
element={<AlbumArtistListRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.LIBRARY_ALBUMARTISTS}
/>
<Route