mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
rework root error boundary
This commit is contained in:
jeffvli
+25
-11
@@ -1,6 +1,7 @@
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { ServerSelector } from '/@/renderer/features/sidebar/components/server-selector';
|
||||
import { Box } from '/@/shared/components/box/box';
|
||||
import { Button } from '/@/shared/components/button/button';
|
||||
import { Center } from '/@/shared/components/center/center';
|
||||
@@ -9,15 +10,15 @@ import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
|
||||
interface RootErrorFallbackProps {
|
||||
interface RouterErrorFallbackProps {
|
||||
error: Error;
|
||||
resetErrorBoundary: () => void;
|
||||
}
|
||||
|
||||
const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps) => {
|
||||
const RouterErrorFallback = ({ error, resetErrorBoundary }: RouterErrorFallbackProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleReload = () => {
|
||||
const handleRefresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
@@ -29,14 +30,27 @@ const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps
|
||||
width: '100vw',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
padding: 'var(--theme-spacing-md)',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<ServerSelector />
|
||||
</Box>
|
||||
<Center style={{ height: '100vh' }}>
|
||||
<Stack style={{ maxWidth: '50%' }}>
|
||||
<Group gap="xs">
|
||||
<Icon fill="error" icon="error" size="lg" />
|
||||
<Text size="lg">{t('error.genericError')}</Text>
|
||||
<Text size="lg">
|
||||
{t('error.genericError', { postProcess: 'sentenceCase' })}
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" style={{ wordBreak: 'break-word' }}>
|
||||
{error?.message || t('error.genericError')}
|
||||
{error?.message || t('error.genericError', { postProcess: 'sentenceCase' })}
|
||||
</Text>
|
||||
{process.env.NODE_ENV === 'development' && error?.stack && (
|
||||
<Text
|
||||
@@ -56,10 +70,10 @@ const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps
|
||||
)}
|
||||
<Group grow>
|
||||
<Button onClick={resetErrorBoundary} size="md" variant="default">
|
||||
{t('common.reload')}
|
||||
{t('common.reload', { postProcess: 'sentenceCase' })}
|
||||
</Button>
|
||||
<Button onClick={handleReload} size="md" variant="filled">
|
||||
{t('common.reload')}
|
||||
<Button onClick={handleRefresh} size="md" variant="filled">
|
||||
{t('common.refresh', { postProcess: 'sentenceCase' })}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
@@ -68,14 +82,14 @@ const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps
|
||||
);
|
||||
};
|
||||
|
||||
interface RootErrorBoundaryProps {
|
||||
interface RouterErrorBoundaryProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const RootErrorBoundary = ({ children }: RootErrorBoundaryProps) => {
|
||||
export const RouterErrorBoundary = ({ children }: RouterErrorBoundaryProps) => {
|
||||
return (
|
||||
<ErrorBoundary
|
||||
FallbackComponent={RootErrorFallback}
|
||||
FallbackComponent={RouterErrorFallback}
|
||||
onError={(error, errorInfo) => {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('Root error boundary caught an error:', error, errorInfo);
|
||||
+25
-28
@@ -7,7 +7,6 @@ import { del, get, set } from 'idb-keyval';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import { App } from '/@/renderer/app';
|
||||
import { RootErrorBoundary } from '/@/renderer/components/error-boundary/root-error-boundary';
|
||||
import { queryClient } from '/@/renderer/lib/react-query';
|
||||
|
||||
function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
|
||||
@@ -27,34 +26,32 @@ function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
|
||||
const indexedDbPersister = createIDBPersister('feishin');
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<RootErrorBoundary>
|
||||
<PersistQueryClientProvider
|
||||
client={queryClient}
|
||||
persistOptions={{
|
||||
buster: 'feishin',
|
||||
dehydrateOptions: {
|
||||
shouldDehydrateQuery: (query) => {
|
||||
const isSuccess = query.state.status === 'success';
|
||||
const isLyricsQueryKey =
|
||||
query.queryKey.includes('song') &&
|
||||
query.queryKey.includes('lyrics') &&
|
||||
query.queryKey.includes('select');
|
||||
<PersistQueryClientProvider
|
||||
client={queryClient}
|
||||
persistOptions={{
|
||||
buster: 'feishin',
|
||||
dehydrateOptions: {
|
||||
shouldDehydrateQuery: (query) => {
|
||||
const isSuccess = query.state.status === 'success';
|
||||
const isLyricsQueryKey =
|
||||
query.queryKey.includes('song') &&
|
||||
query.queryKey.includes('lyrics') &&
|
||||
query.queryKey.includes('select');
|
||||
|
||||
return isSuccess && isLyricsQueryKey;
|
||||
return isSuccess && isLyricsQueryKey;
|
||||
},
|
||||
},
|
||||
hydrateOptions: {
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
gcTime: Infinity,
|
||||
},
|
||||
},
|
||||
hydrateOptions: {
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
gcTime: Infinity,
|
||||
},
|
||||
},
|
||||
},
|
||||
maxAge: Infinity,
|
||||
persister: indexedDbPersister,
|
||||
}}
|
||||
>
|
||||
<App />
|
||||
</PersistQueryClientProvider>
|
||||
</RootErrorBoundary>,
|
||||
},
|
||||
maxAge: Infinity,
|
||||
persister: indexedDbPersister,
|
||||
}}
|
||||
>
|
||||
<App />
|
||||
</PersistQueryClientProvider>,
|
||||
);
|
||||
|
||||
+119
-111
@@ -3,7 +3,7 @@ import { HashRouter, Route, Routes } from 'react-router';
|
||||
|
||||
import { AppRoute } from './routes';
|
||||
|
||||
import ArtistListRoute from '/@/renderer/features/artists/routes/artist-list-route';
|
||||
import { RouterErrorBoundary } from '/@/renderer/components/error-boundary/router-error-boundary';
|
||||
import { AddToPlaylistContextModal } from '/@/renderer/features/playlists/components/add-to-playlist-context-modal';
|
||||
import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal';
|
||||
import { DefaultLayout } from '/@/renderer/layouts/default-layout';
|
||||
@@ -37,6 +37,8 @@ const InvalidRoute = lazy(
|
||||
|
||||
const HomeRoute = lazy(() => import('/@/renderer/features/home/routes/home-route'));
|
||||
|
||||
const ArtistListRoute = lazy(() => import('/@/renderer/features/artists/routes/artist-list-route'));
|
||||
|
||||
const AlbumArtistListRoute = lazy(
|
||||
() => import('/@/renderer/features/artists/routes/album-artist-list-route'),
|
||||
);
|
||||
@@ -70,142 +72,148 @@ const RouteErrorBoundary = lazy(
|
||||
export const AppRouter = () => {
|
||||
const router = (
|
||||
<HashRouter>
|
||||
<ModalsProvider
|
||||
modals={{
|
||||
addToPlaylist: AddToPlaylistContextModal,
|
||||
base: BaseContextModal,
|
||||
shareItem: ShareItemContextModal,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route element={<AppOutlet />} errorElement={<RouteErrorBoundary />}>
|
||||
<Route element={<DefaultLayout />}>
|
||||
<Route
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
index
|
||||
/>
|
||||
<Route
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.HOME}
|
||||
/>
|
||||
<Route
|
||||
element={<SearchRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SEARCH}
|
||||
/>
|
||||
<Route
|
||||
element={<SettingsRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SETTINGS}
|
||||
/>
|
||||
<Route
|
||||
element={<NowPlayingRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.NOW_PLAYING}
|
||||
/>
|
||||
<Route path={AppRoute.LIBRARY_GENRES}>
|
||||
<RouterErrorBoundary>
|
||||
<ModalsProvider
|
||||
modals={{
|
||||
addToPlaylist: AddToPlaylistContextModal,
|
||||
base: BaseContextModal,
|
||||
shareItem: ShareItemContextModal,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route element={<AppOutlet />} errorElement={<RouteErrorBoundary />}>
|
||||
<Route element={<DefaultLayout />}>
|
||||
<Route
|
||||
element={<GenreListRoute />}
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
index
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={AppRoute.LIBRARY_GENRES_ALBUMS}
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.HOME}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_GENRES_SONGS}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS_DETAIL}
|
||||
/>
|
||||
<Route
|
||||
element={<ArtistListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ARTISTS}
|
||||
/>
|
||||
<Route path={AppRoute.LIBRARY_ARTISTS_DETAIL}>
|
||||
<Route element={<AlbumArtistDetailRoute />} index />
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={AppRoute.LIBRARY_ARTISTS_DETAIL_DISCOGRAPHY}
|
||||
element={<SearchRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SEARCH}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_ARTISTS_DETAIL_SONGS}
|
||||
element={<SettingsRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SETTINGS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumArtistDetailTopSongsListRoute />}
|
||||
path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS}
|
||||
element={<NowPlayingRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.NOW_PLAYING}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
element={<DummyAlbumDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.FAKE_LIBRARY_ALBUM_DETAILS}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistDetailSongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS}
|
||||
>
|
||||
<Route element={<AlbumArtistListRoute />} index />
|
||||
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL}>
|
||||
<Route element={<AlbumArtistDetailRoute />} index />
|
||||
<Route path={AppRoute.LIBRARY_GENRES}>
|
||||
<Route
|
||||
element={<GenreListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
index
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY}
|
||||
path={AppRoute.LIBRARY_GENRES_ALBUMS}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
|
||||
path={AppRoute.LIBRARY_GENRES_SONGS}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS_DETAIL}
|
||||
/>
|
||||
<Route
|
||||
element={<ArtistListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ARTISTS}
|
||||
/>
|
||||
<Route path={AppRoute.LIBRARY_ARTISTS_DETAIL}>
|
||||
<Route element={<AlbumArtistDetailRoute />} index />
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={AppRoute.LIBRARY_ARTISTS_DETAIL_DISCOGRAPHY}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_ARTISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumArtistDetailTopSongsListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS}
|
||||
path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
element={<DummyAlbumDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.FAKE_LIBRARY_ALBUM_DETAILS}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistDetailSongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS}
|
||||
>
|
||||
<Route element={<AlbumArtistListRoute />} index />
|
||||
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL}>
|
||||
<Route element={<AlbumArtistDetailRoute />} index />
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={
|
||||
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumArtistDetailTopSongsListRoute />}
|
||||
path={
|
||||
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
<Route element={<InvalidRoute />} path="*" />
|
||||
</Route>
|
||||
<Route element={<InvalidRoute />} path="*" />
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route element={<DefaultLayout shell />}>
|
||||
<Route
|
||||
element={<ActionRequiredRoute />}
|
||||
path={AppRoute.ACTION_REQUIRED}
|
||||
/>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route element={<DefaultLayout shell />}>
|
||||
<Route
|
||||
element={<ActionRequiredRoute />}
|
||||
path={AppRoute.ACTION_REQUIRED}
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</ModalsProvider>
|
||||
</Routes>
|
||||
</ModalsProvider>
|
||||
</RouterErrorBoundary>
|
||||
</HashRouter>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user