vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

rework root error boundary

Browse Source
This commit is contained in:
jeffvli
2025-11-17 01:56:20 -08:00
parent a92a829ca7
commit 1b0ea06c6b
3 changed files with 169 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/error-boundary/root-error-boundary.tsx → src/renderer/components/error-boundary/router-error-boundary.tsx
+25 -11
View File
@@ -1,6 +1,7 @@
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ServerSelector } from '/@/renderer/features/sidebar/components/server-selector';
import { Box } from '/@/shared/components/box/box'; import { Box } from '/@/shared/components/box/box';
import { Button } from '/@/shared/components/button/button'; import { Button } from '/@/shared/components/button/button';
import { Center } from '/@/shared/components/center/center'; 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 { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text'; import { Text } from '/@/shared/components/text/text';
interface RootErrorFallbackProps { interface RouterErrorFallbackProps {
error: Error; error: Error;
resetErrorBoundary: () => void; resetErrorBoundary: () => void;
} }
const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps) => { const RouterErrorFallback = ({ error, resetErrorBoundary }: RouterErrorFallbackProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const handleReload = () => { const handleRefresh = () => {
window.location.reload(); window.location.reload();
}; };
@@ -29,14 +30,27 @@ const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps
width: '100vw', width: '100vw',
}} }}
> >
<Box
style={{
padding: 'var(--theme-spacing-md)',
position: 'absolute',
right: 0,
top: 0,
zIndex: 1000,
}}
>
<ServerSelector />
</Box>
<Center style={{ height: '100vh' }}> <Center style={{ height: '100vh' }}>
<Stack style={{ maxWidth: '50%' }}> <Stack style={{ maxWidth: '50%' }}>
<Group gap="xs"> <Group gap="xs">
<Icon fill="error" icon="error" size="lg" /> <Icon fill="error" icon="error" size="lg" />
<Text size="lg">{t('error.genericError')}</Text> <Text size="lg">
{t('error.genericError', { postProcess: 'sentenceCase' })}
</Text>
</Group> </Group>
<Text size="sm" style={{ wordBreak: 'break-word' }}> <Text size="sm" style={{ wordBreak: 'break-word' }}>
{error?.message || t('error.genericError')} {error?.message || t('error.genericError', { postProcess: 'sentenceCase' })}
</Text> </Text>
{process.env.NODE_ENV === 'development' && error?.stack && ( {process.env.NODE_ENV === 'development' && error?.stack && (
<Text <Text
@@ -56,10 +70,10 @@ const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps
)} )}
<Group grow> <Group grow>
<Button onClick={resetErrorBoundary} size="md" variant="default"> <Button onClick={resetErrorBoundary} size="md" variant="default">
{t('common.reload')} {t('common.reload', { postProcess: 'sentenceCase' })}
</Button> </Button>
<Button onClick={handleReload} size="md" variant="filled"> <Button onClick={handleRefresh} size="md" variant="filled">
{t('common.reload')} {t('common.refresh', { postProcess: 'sentenceCase' })}
</Button> </Button>
</Group> </Group>
</Stack> </Stack>
@@ -68,14 +82,14 @@ const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps
); );
}; };
interface RootErrorBoundaryProps { interface RouterErrorBoundaryProps {
children: React.ReactNode; children: React.ReactNode;
} }
export const RootErrorBoundary = ({ children }: RootErrorBoundaryProps) => { export const RouterErrorBoundary = ({ children }: RouterErrorBoundaryProps) => {
return ( return (
<ErrorBoundary <ErrorBoundary
FallbackComponent={RootErrorFallback} FallbackComponent={RouterErrorFallback}
onError={(error, errorInfo) => { onError={(error, errorInfo) => {
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
console.error('Root error boundary caught an error:', error, errorInfo); console.error('Root error boundary caught an error:', error, errorInfo);
src/renderer/main.tsx
+25 -28
View File
@@ -7,7 +7,6 @@ import { del, get, set } from 'idb-keyval';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { App } from '/@/renderer/app'; import { App } from '/@/renderer/app';
import { RootErrorBoundary } from '/@/renderer/components/error-boundary/root-error-boundary';
import { queryClient } from '/@/renderer/lib/react-query'; import { queryClient } from '/@/renderer/lib/react-query';
function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') { function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
@@ -27,34 +26,32 @@ function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
const indexedDbPersister = createIDBPersister('feishin'); const indexedDbPersister = createIDBPersister('feishin');
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<RootErrorBoundary> <PersistQueryClientProvider
<PersistQueryClientProvider client={queryClient}
client={queryClient} persistOptions={{
persistOptions={{ buster: 'feishin',
buster: 'feishin', dehydrateOptions: {
dehydrateOptions: { shouldDehydrateQuery: (query) => {
shouldDehydrateQuery: (query) => { const isSuccess = query.state.status === 'success';
const isSuccess = query.state.status === 'success'; const isLyricsQueryKey =
const isLyricsQueryKey = query.queryKey.includes('song') &&
query.queryKey.includes('song') && query.queryKey.includes('lyrics') &&
query.queryKey.includes('lyrics') && query.queryKey.includes('select');
query.queryKey.includes('select');
return isSuccess && isLyricsQueryKey; return isSuccess && isLyricsQueryKey;
},
},
hydrateOptions: {
defaultOptions: {
queries: {
gcTime: Infinity,
}, },
}, },
hydrateOptions: { },
defaultOptions: { maxAge: Infinity,
queries: { persister: indexedDbPersister,
gcTime: Infinity, }}
}, >
}, <App />
}, </PersistQueryClientProvider>,
maxAge: Infinity,
persister: indexedDbPersister,
}}
>
<App />
</PersistQueryClientProvider>
</RootErrorBoundary>,
); );
src/renderer/router/app-router.tsx
+119 -111
View File
@@ -3,7 +3,7 @@ import { HashRouter, Route, Routes } from 'react-router';
import { AppRoute } from './routes'; 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 { AddToPlaylistContextModal } from '/@/renderer/features/playlists/components/add-to-playlist-context-modal';
import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal'; import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal';
import { DefaultLayout } from '/@/renderer/layouts/default-layout'; 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 HomeRoute = lazy(() => import('/@/renderer/features/home/routes/home-route'));
const ArtistListRoute = lazy(() => import('/@/renderer/features/artists/routes/artist-list-route'));
const AlbumArtistListRoute = lazy( const AlbumArtistListRoute = lazy(
() => import('/@/renderer/features/artists/routes/album-artist-list-route'), () => import('/@/renderer/features/artists/routes/album-artist-list-route'),
); );
@@ -70,142 +72,148 @@ const RouteErrorBoundary = lazy(
export const AppRouter = () => { export const AppRouter = () => {
const router = ( const router = (
<HashRouter> <HashRouter>
<ModalsProvider <RouterErrorBoundary>
modals={{ <ModalsProvider
addToPlaylist: AddToPlaylistContextModal, modals={{
base: BaseContextModal, addToPlaylist: AddToPlaylistContextModal,
shareItem: ShareItemContextModal, base: BaseContextModal,
}} shareItem: ShareItemContextModal,
> }}
<Routes> >
<Route element={<TitlebarOutlet />}> <Routes>
<Route element={<AppOutlet />} errorElement={<RouteErrorBoundary />}> <Route element={<TitlebarOutlet />}>
<Route element={<DefaultLayout />}> <Route element={<AppOutlet />} errorElement={<RouteErrorBoundary />}>
<Route <Route element={<DefaultLayout />}>
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}>
<Route <Route
element={<GenreListRoute />} element={<HomeRoute />}
errorElement={<RouteErrorBoundary />} errorElement={<RouteErrorBoundary />}
index index
/> />
<Route <Route
element={<AlbumListRoute />} element={<HomeRoute />}
path={AppRoute.LIBRARY_GENRES_ALBUMS} errorElement={<RouteErrorBoundary />}
path={AppRoute.HOME}
/> />
<Route <Route
element={<SongListRoute />} element={<SearchRoute />}
path={AppRoute.LIBRARY_GENRES_SONGS} errorElement={<RouteErrorBoundary />}
/> path={AppRoute.SEARCH}
</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 <Route
element={<SongListRoute />} element={<SettingsRoute />}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_SONGS} errorElement={<RouteErrorBoundary />}
path={AppRoute.SETTINGS}
/> />
<Route <Route
element={<AlbumArtistDetailTopSongsListRoute />} element={<NowPlayingRoute />}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS} errorElement={<RouteErrorBoundary />}
path={AppRoute.NOW_PLAYING}
/> />
</Route> <Route path={AppRoute.LIBRARY_GENRES}>
<Route <Route
element={<DummyAlbumDetailRoute />} element={<GenreListRoute />}
errorElement={<RouteErrorBoundary />} errorElement={<RouteErrorBoundary />}
path={AppRoute.FAKE_LIBRARY_ALBUM_DETAILS} index
/> />
<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 <Route
element={<AlbumListRoute />} element={<AlbumListRoute />}
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY} path={AppRoute.LIBRARY_GENRES_ALBUMS}
/> />
<Route <Route
element={<SongListRoute />} 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 <Route
element={<AlbumArtistDetailTopSongsListRoute />} element={<AlbumArtistDetailTopSongsListRoute />}
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS} path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS}
/> />
</Route> </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>
<Route element={<InvalidRoute />} path="*" />
</Route> </Route>
</Route> </Route>
</Route> <Route element={<TitlebarOutlet />}>
<Route element={<TitlebarOutlet />}> <Route element={<DefaultLayout shell />}>
<Route element={<DefaultLayout shell />}> <Route
<Route element={<ActionRequiredRoute />}
element={<ActionRequiredRoute />} path={AppRoute.ACTION_REQUIRED}
path={AppRoute.ACTION_REQUIRED} />
/> </Route>
</Route> </Route>
</Route> </Routes>
</Routes> </ModalsProvider>
</ModalsProvider> </RouterErrorBoundary>
</HashRouter> </HashRouter>
); );