From 1b0ea06c6bddb10926af805775c221fee26e76d0 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 17 Nov 2025 01:56:20 -0800 Subject: [PATCH] rework root error boundary --- ...boundary.tsx => router-error-boundary.tsx} | 36 ++- src/renderer/main.tsx | 53 ++-- src/renderer/router/app-router.tsx | 230 +++++++++--------- 3 files changed, 169 insertions(+), 150 deletions(-) rename src/renderer/components/error-boundary/{root-error-boundary.tsx => router-error-boundary.tsx} (69%) diff --git a/src/renderer/components/error-boundary/root-error-boundary.tsx b/src/renderer/components/error-boundary/router-error-boundary.tsx similarity index 69% rename from src/renderer/components/error-boundary/root-error-boundary.tsx rename to src/renderer/components/error-boundary/router-error-boundary.tsx index ae00ae310..52dea1674 100644 --- a/src/renderer/components/error-boundary/root-error-boundary.tsx +++ b/src/renderer/components/error-boundary/router-error-boundary.tsx @@ -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', }} > + + +
- {t('error.genericError')} + + {t('error.genericError', { postProcess: 'sentenceCase' })} + - {error?.message || t('error.genericError')} + {error?.message || t('error.genericError', { postProcess: 'sentenceCase' })} {process.env.NODE_ENV === 'development' && error?.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 ( { if (process.env.NODE_ENV === 'development') { console.error('Root error boundary caught an error:', error, errorInfo); diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx index 0731cf340..13e71113e 100644 --- a/src/renderer/main.tsx +++ b/src/renderer/main.tsx @@ -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( - - { - const isSuccess = query.state.status === 'success'; - const isLyricsQueryKey = - query.queryKey.includes('song') && - query.queryKey.includes('lyrics') && - query.queryKey.includes('select'); + { + 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, - }} - > - - - , + }, + maxAge: Infinity, + persister: indexedDbPersister, + }} + > + + , ); diff --git a/src/renderer/router/app-router.tsx b/src/renderer/router/app-router.tsx index 2667d0553..e25edbd7c 100644 --- a/src/renderer/router/app-router.tsx +++ b/src/renderer/router/app-router.tsx @@ -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 = ( - - - }> - } errorElement={}> - }> - } - errorElement={} - index - /> - } - errorElement={} - path={AppRoute.HOME} - /> - } - errorElement={} - path={AppRoute.SEARCH} - /> - } - errorElement={} - path={AppRoute.SETTINGS} - /> - } - errorElement={} - path={AppRoute.NOW_PLAYING} - /> - + + + + }> + } errorElement={}> + }> } + element={} errorElement={} index /> } - path={AppRoute.LIBRARY_GENRES_ALBUMS} + element={} + errorElement={} + path={AppRoute.HOME} /> } - path={AppRoute.LIBRARY_GENRES_SONGS} - /> - - } - errorElement={} - path={AppRoute.LIBRARY_ALBUMS} - /> - } - errorElement={} - path={AppRoute.LIBRARY_ALBUMS_DETAIL} - /> - } - errorElement={} - path={AppRoute.LIBRARY_ARTISTS} - /> - - } index /> - } - path={AppRoute.LIBRARY_ARTISTS_DETAIL_DISCOGRAPHY} + element={} + errorElement={} + path={AppRoute.SEARCH} /> } - path={AppRoute.LIBRARY_ARTISTS_DETAIL_SONGS} + element={} + errorElement={} + path={AppRoute.SETTINGS} /> } - path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS} + element={} + errorElement={} + path={AppRoute.NOW_PLAYING} /> - - } - errorElement={} - path={AppRoute.FAKE_LIBRARY_ALBUM_DETAILS} - /> - } - errorElement={} - path={AppRoute.LIBRARY_SONGS} - /> - } - errorElement={} - path={AppRoute.PLAYLISTS} - /> - } - errorElement={} - path={AppRoute.PLAYLISTS_DETAIL_SONGS} - /> - } - path={AppRoute.LIBRARY_ALBUM_ARTISTS} - > - } index /> - - } index /> + + } + errorElement={} + index + /> } - path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY} + path={AppRoute.LIBRARY_GENRES_ALBUMS} /> } - path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS} + path={AppRoute.LIBRARY_GENRES_SONGS} + /> + + } + errorElement={} + path={AppRoute.LIBRARY_ALBUMS} + /> + } + errorElement={} + path={AppRoute.LIBRARY_ALBUMS_DETAIL} + /> + } + errorElement={} + path={AppRoute.LIBRARY_ARTISTS} + /> + + } index /> + } + path={AppRoute.LIBRARY_ARTISTS_DETAIL_DISCOGRAPHY} + /> + } + path={AppRoute.LIBRARY_ARTISTS_DETAIL_SONGS} /> } - path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS} + path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS} /> + } + errorElement={} + path={AppRoute.FAKE_LIBRARY_ALBUM_DETAILS} + /> + } + errorElement={} + path={AppRoute.LIBRARY_SONGS} + /> + } + errorElement={} + path={AppRoute.PLAYLISTS} + /> + } + errorElement={} + path={AppRoute.PLAYLISTS_DETAIL_SONGS} + /> + } + path={AppRoute.LIBRARY_ALBUM_ARTISTS} + > + } index /> + + } index /> + } + path={ + AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY + } + /> + } + path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS} + /> + } + path={ + AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS + } + /> + + + } path="*" /> - } path="*" /> - - }> - }> - } - path={AppRoute.ACTION_REQUIRED} - /> + }> + }> + } + path={AppRoute.ACTION_REQUIRED} + /> + - - - + + + );