rework root error boundary

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',
             }}
         >
+            <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">
+                        <Button onClick={handleRefresh} size="md" variant="filled">
-                            {t('common.reload')}
+                            {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);

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,7 +26,6 @@ function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
 const indexedDbPersister = createIDBPersister('feishin');
 
 createRoot(document.getElementById('root')!).render(
-    <RootErrorBoundary>
     <PersistQueryClientProvider
         client={queryClient}
         persistOptions={{
@@ -55,6 +53,5 @@ createRoot(document.getElementById('root')!).render(
         }}
     >
         <App />
-        </PersistQueryClientProvider>
+    </PersistQueryClientProvider>,
-    </RootErrorBoundary>,
 );

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,6 +72,7 @@ const RouteErrorBoundary = lazy(
 export const AppRouter = () => {
     const router = (
         <HashRouter>
+            <RouterErrorBoundary>
                 <ModalsProvider
                     modals={{
                         addToPlaylist: AddToPlaylistContextModal,
@@ -180,7 +183,9 @@ export const AppRouter = () => {
                                             <Route element={<AlbumArtistDetailRoute />} index />
                                             <Route
                                                 element={<AlbumListRoute />}
-                                            path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY}
+                                                path={
+                                                    AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY
+                                                }
                                             />
                                             <Route
                                                 element={<SongListRoute />}
@@ -188,7 +193,9 @@ export const AppRouter = () => {
                                             />
                                             <Route
                                                 element={<AlbumArtistDetailTopSongsListRoute />}
-                                            path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS}
+                                                path={
+                                                    AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS
+                                                }
                                             />
                                         </Route>
                                     </Route>
@@ -206,6 +213,7 @@ export const AppRouter = () => {
                         </Route>
                     </Routes>
                 </ModalsProvider>
+            </RouterErrorBoundary>
         </HashRouter>
     );