Add missing error handling

src/components/chapter/ChapterList.tsx

@@ -7,7 +7,6 @@
  */
 
 import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
@@ -36,6 +35,8 @@ import { Chapters } from '@/lib/data/Chapters.ts';
 import { ChaptersWithMeta } from '@/lib/data/ChaptersWithMeta.ts';
 import { ChapterActionMenuItems } from '@/components/chapter/ChapterActionMenuItems.tsx';
 import { ChaptersDownloadActionMenuItems } from '@/components/chapter/ChaptersDownloadActionMenuItems.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 const ChapterListHeader = styled(Stack)(({ theme }) => ({
     margin: 8,
@@ -77,7 +78,12 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
     const queue = (downloaderData?.downloadStatus.queue as DownloadType[]) ?? [];
 
     const [options, dispatch] = useChapterOptions(manga.id);
-    const { data: chaptersData, loading: isLoading } = requestManager.useGetMangaChapters(manga.id);
+    const {
+        data: chaptersData,
+        loading: isLoading,
+        error,
+        refetch,
+    } = requestManager.useGetMangaChapters(manga.id, { notifyOnNetworkStatusChange: true });
     const chapters = useMemo(() => chaptersData?.chapters.nodes ?? [], [chaptersData?.chapters.nodes]);
 
     const chapterIds = useMemo(() => chapters.map((chapter) => chapter.id), [chapters]);
@@ -134,15 +140,21 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
 
     if (isLoading || (noChaptersFound && isRefreshing)) {
         return (
-            <div
+            <Stack sx={{ justifyContent: 'center', alignItems: 'center', position: 'relative', flexGrow: 1 }}>
-                style={{
+                <LoadingPlaceholder />
-                    margin: '10px auto',
+            </Stack>
-                    display: 'flex',
+        );
-                    justifyContent: 'center',
+    }
-                }}
+
-            >
+    if (error) {
-                <CircularProgress thickness={5} />
+        return (
-            </div>
+            <Stack sx={{ justifyContent: 'center', position: 'relative', flexGrow: 1 }}>
+                <EmptyView
+                    message={t('global.error.label.failed_to_load_data')}
+                    messageExtra={error.message}
+                    retry={() => refetch().catch(defaultPromiseErrorHandler('ChapterList::refetch'))}
+                />
+            </Stack>
         );
     }
 

src/components/settings/DeviceSetting.tsx

@@ -20,6 +20,8 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
 import { Select } from '@/components/atoms/Select.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 export const DeviceSetting = () => {
     const { t } = useTranslation();
@@ -41,6 +43,7 @@ export const DeviceSetting = () => {
         metadata,
         settings: { devices },
         loading,
+        request: { error, refetch },
     } = useMetadataServerSettings();
 
     const { activeDevice, setActiveDevice } = useContext(ActiveDevice);
@@ -67,6 +70,16 @@ export const DeviceSetting = () => {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DeviceSetting::refetch'))}
+            />
+        );
+    }
+
     return (
         <List>
             <MutableListSetting

src/components/util/EmptyView.tsx

@@ -11,8 +11,10 @@
 import { useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
 
 const ERROR_FACES = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];
 
@@ -24,30 +26,34 @@ function getRandomErrorFace() {
 interface IProps {
     message: string;
     messageExtra?: JSX.Element | string;
+    retry?: () => void;
 }
 
-export function EmptyView({ message, messageExtra }: IProps) {
+export function EmptyView({ message, messageExtra, retry }: IProps) {
+    const { t } = useTranslation();
     const theme = useTheme();
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     const errorFace = useMemo(() => getRandomErrorFace(), []);
 
     return (
-        <Box
+        <Stack
             sx={{
                 position: 'absolute',
                 left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
                 top: '50%',
                 transform: 'translate(-50%, -50%)',
                 textAlign: 'center',
+                alignItems: 'center',
             }}
         >
             <Typography variant="h3" gutterBottom>
                 {errorFace}
             </Typography>
+            {retry && <Button onClick={retry}>{t('global.button.retry')}</Button>}
             <Typography variant="h5">{message}</Typography>
             {messageExtra}
-        </Box>
+        </Stack>
     );
 }
 

src/lib/metadata/metadataServerSettings.ts

@@ -76,12 +76,14 @@ export const useMetadataServerSettings = (): {
     metadata?: Metadata;
     settings: MetadataServerSettings;
     loading: boolean;
+    request: ReturnType<typeof requestManager.useGetGlobalMeta>;
 } => {
-    const { data, loading } = requestManager.useGetGlobalMeta();
+    const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
+    const { data, loading } = request;
     const metadata = convertFromGqlMeta(data?.metas.nodes);
     const settings = getMetadataServerSettingsWithDefaultFallback(metadata);
 
-    return { metadata, settings, loading };
+    return { metadata, settings, loading, request };
 };
 
 export const getMetadataServerSettings = async (): Promise<MetadataServerSettings> => {

src/lib/metadata/readerSettings.ts

@@ -54,12 +54,14 @@ export const useDefaultReaderSettings = (): {
     metadata?: Metadata;
     settings: IReaderSettings;
     loading: boolean;
+    request: ReturnType<typeof requestManager.useGetGlobalMeta>;
 } => {
-    const { data, loading } = requestManager.useGetGlobalMeta();
+    const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
+    const { data, loading } = request;
     const metadata = convertFromGqlMeta(data?.metas.nodes);
     const settings = getReaderSettingsWithDefaultValueFallback<IReaderSettings>(metadata);
 
-    return { metadata, settings, loading };
+    return { metadata, settings, loading, request };
 };
 
 /**

src/lib/requests/RequestManager.ts

@@ -25,7 +25,7 @@ import {
     useQuery,
     useSubscription,
 } from '@apollo/client';
-import { OperationVariables } from '@apollo/client/core';
+import { OperationVariables, Reference } from '@apollo/client/core';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { IRestClient, RestClient } from '@/lib/requests/client/RestClient.ts';
 import { GraphQLClient } from '@/lib/requests/client/GraphQLClient.ts';
@@ -269,7 +269,12 @@ import { DOWNLOAD_STATUS_SUBSCRIPTION } from '@/lib/graphql/subscriptions/Downlo
 import { UPDATER_SUBSCRIPTION } from '@/lib/graphql/subscriptions/UpdaterSubscription.ts';
 import { GET_SERVER_SETTINGS } from '@/lib/graphql/queries/SettingsQuery.ts';
 import { UPDATE_SERVER_SETTINGS } from '@/lib/graphql/mutations/SettingsMutation.ts';
-import { BASE_MANGA_FIELDS, FULL_DOWNLOAD_STATUS, FULL_EXTENSION_FIELDS } from '@/lib/graphql/Fragments.ts';
+import {
+    BASE_MANGA_FIELDS,
+    FULL_DOWNLOAD_STATUS,
+    FULL_EXTENSION_FIELDS,
+    GLOBAL_METADATA,
+} from '@/lib/graphql/Fragments.ts';
 import { CLEAR_SERVER_CACHE } from '@/lib/graphql/mutations/ImageMutation.ts';
 import { RESET_WEBUI_UPDATE_STATUS, UPDATE_WEBUI } from '@/lib/graphql/mutations/ServerInfoMutation.ts';
 import { WEBUI_UPDATE_SUBSCRIPTION } from '@/lib/graphql/subscriptions/ServerInfoSubscription.ts';
@@ -1023,18 +1028,40 @@ export class RequestManager {
         value: any,
         options?: MutationOptions<SetGlobalMetadataMutation, SetGlobalMetadataMutationVariables>,
     ): AbortableApolloMutationResponse<SetGlobalMetadataMutation> {
-        const result = this.doRequest<SetGlobalMetadataMutation, SetGlobalMetadataMutationVariables>(
+        return this.doRequest<SetGlobalMetadataMutation, SetGlobalMetadataMutationVariables>(
             GQLMethod.MUTATION,
             SET_GLOBAL_METADATA,
             { input: { meta: { key, value: `${value}` } } },
-            options,
+            {
+                update(cache, { data }) {
+                    cache.modify({
+                        fields: {
+                            metas(existingMetas, { readField }) {
+                                if (!existingMetas) {
+                                    return existingMetas;
+                                }
+
+                                const exists = existingMetas.nodes.some(
+                                    // eslint-disable-next-line no-underscore-dangle
+                                    (meta: Reference) => readField('key', meta) === key,
+                                );
+                                if (exists) {
+                                    return existingMetas;
+                                }
+
+                                const newMetaRef = cache.writeFragment({
+                                    data: data!.setGlobalMeta.meta,
+                                    fragment: GLOBAL_METADATA,
+                                });
+
+                                return [...existingMetas, newMetaRef];
+                            },
+                        },
+                    });
+                },
+                ...options,
+            },
         );
-
-        result.response.then(() => {
-            this.graphQLClient.client.cache.evict({ fieldName: 'metas' });
-        });
-
-        return result;
     }
 
     public useGetAbout(
@@ -1116,7 +1143,7 @@ export class RequestManager {
                                     },
                                 },
                       },
-            [this.cache.getFetchTimestampFor(EXTENSION_LIST_CACHE_KEY, undefined)],
+            [this.cache.getFetchTimestampFor(EXTENSION_LIST_CACHE_KEY, undefined), result.loading],
         );
 
         const wrappedMutate = async (mutateOptions: Parameters<typeof mutate>[0]) => {
@@ -2063,6 +2090,7 @@ export class RequestManager {
                 GQLMethod.USE_QUERY,
                 GET_CATEGORY_MANGAS,
                 { id },
+                options as QueryHookOptions<GetCategoryMangasQuery, GetCategoryMangasQueryVariables>,
             );
 
             return {

src/screens/DownloadQueue.tsx

@@ -103,7 +103,12 @@ export const DownloadQueue: React.FC = () => {
 
     const [reorderDownload, { reset: revertReorder }] = requestManager.useReorderChapterInDownloadQueue();
 
-    const { data: downloadStatusData, loading: isLoading } = requestManager.useGetDownloadStatus();
+    const {
+        data: downloadStatusData,
+        loading: isLoading,
+        error,
+        refetch,
+    } = requestManager.useGetDownloadStatus({ notifyOnNetworkStatusChange: true });
     const downloaderData = downloadStatusData?.downloadStatus;
 
     const queue = (downloaderData?.queue as DownloadType[]) ?? [];
@@ -203,7 +208,7 @@ export const DownloadQueue: React.FC = () => {
                 // bug: The folder and the last image downloaded are not deleted
                 requestManager.deleteDownloadedChapter(chapter.id).response,
             ]);
-        } catch (error) {
+        } catch (e) {
             makeToast(t('download.queue.error.label.failed_to_remove'), 'error');
         }
 
@@ -218,6 +223,16 @@ export const DownloadQueue: React.FC = () => {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadQueue::refetch'))}
+            />
+        );
+    }
+
     if (isQueueEmpty) {
         return <EmptyView message={t('download.queue.label.no_downloads')} />;
     }

src/screens/Extensions.tsx

@@ -39,6 +39,8 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { StyledGroupedVirtuoso } from '@/components/virtuoso/StyledGroupedVirtuoso.tsx';
 import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 const LANGUAGE = 0;
 const EXTENSIONS = 1;
@@ -114,7 +116,7 @@ export function Extensions() {
     const [query] = useQueryParam('query', StringParam);
 
     const [refetchExtensions, setRefetchExtensions] = useState({});
-    const [fetchExtensions, { data, loading: isLoading, called }] = requestManager.useExtensionListFetch();
+    const [fetchExtensions, { data, loading: isLoading, error }] = requestManager.useExtensionListFetch();
     const allExtensions = data?.fetchExtensions.extensions;
 
     const handleExtensionUpdate = useCallback(() => setRefetchExtensions({}), []);
@@ -229,10 +231,20 @@ export function Extensions() {
         [],
     );
 
-    if (!allExtensions && (isLoading || !called)) {
+    if (isLoading) {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetch'))}
+            />
+        );
+    }
+
     const showAddRepoInfo = !allExtensions?.length && !areReposDefined;
     if (showAddRepoInfo) {
         return (

src/screens/Migration.tsx

@@ -43,7 +43,9 @@ const getMigratableSources = (mangas?: TMigratableSourcesResult): TMigratableSou
 export const Migration = () => {
     const { t } = useTranslation();
 
-    const { data, loading, error } = requestManager.useGetMigratableSources();
+    const { data, loading, error } = requestManager.useGetMigratableSources({
+        notifyOnNetworkStatusChange: true,
+    });
     const migratableSources = useMemo(() => getMigratableSources(data?.mangas.nodes), [data?.mangas.nodes]);
 
     if (loading) {

src/screens/Reader.tsx

@@ -32,6 +32,7 @@ import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
 import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { Chapters } from '@/lib/data/Chapters.ts';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
 
 const getReaderComponent = (readerType: ReaderType) => {
     switch (readerType) {
@@ -95,7 +96,12 @@ export function Reader() {
         Number(chapterIndex) === loadedChapter.current?.sourceOrder &&
         loadedChapter.current?.pageCount !== -1;
     const manga = data?.manga ?? initialManga;
-    const { data: chapterData, loading: isChapterLoading } = requestManager.useGetMangaChapter(mangaId, chapterIndex);
+    const {
+        data: chapterData,
+        loading: isChapterLoading,
+        error: chapterError,
+        refetch: fetchChapter,
+    } = requestManager.useGetMangaChapter(mangaId, chapterIndex, { notifyOnNetworkStatusChange: true });
     const arePagesUpdatedRef = useRef(false);
 
     const {
@@ -124,20 +130,30 @@ export function Reader() {
     loadedChapter.current = getLoadedChapter();
 
     const chapter = loadedChapter.current ?? initialChapter;
-    const [fetchPages] = requestManager.useGetChapterPagesFetch(chapter.id);
+    const [fetchPages, { loading: arePagesLoading, error: pagesError }] = requestManager.useGetChapterPagesFetch(
+        chapter.id,
+    );
 
-    useEffect(() => {
+    const doFetchPages = () => {
         const shouldFetchPages = !isChapterLoading && !chapter.isDownloaded;
         if (shouldFetchPages) {
-            fetchPages().then(() => {
+            fetchPages()
-                arePagesUpdatedRef.current = true;
+                .then(() => {
-            });
+                    arePagesUpdatedRef.current = true;
+                })
+                .catch(defaultPromiseErrorHandler('Reader::fetchPages'));
         } else {
             arePagesUpdatedRef.current = true;
         }
+    };
+
+    useEffect(() => {
+        doFetchPages();
     }, [chapter.id]);
 
-    const isLoading = isChapterLoading || !arePagesUpdatedRef.current;
+    const isLoading =
+        isChapterLoading || arePagesLoading || (!arePagesUpdatedRef.current && !chapterError && !pagesError);
+    const error = chapterError ?? pagesError;
     const [wasLastPageReadSet, setWasLastPageReadSet] = useState(false);
     const [curPage, setCurPage] = useState<number>(0);
     const isLastPage = curPage === chapter.pageCount - 1;
@@ -416,6 +432,24 @@ export function Reader() {
         );
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => {
+                    if (chapterError) {
+                        fetchChapter().catch(defaultPromiseErrorHandler('Reader::refetchChapter'));
+                    }
+
+                    if (pagesError) {
+                        doFetchPages();
+                    }
+                }}
+            />
+        );
+    }
+
     const pages = range(chapter.pageCount).map((index) => ({
         index,
         src: requestManager.getChapterPageUrl(mangaId, chapterIndex, index),

src/screens/SourceConfigure.tsx

@@ -19,6 +19,8 @@ import { MultiSelectListPreference } from '@/components/sourceConfiguration/Mult
 import { PreferenceProps } from '@/typings.ts';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 function getPrefComponent(type: string) {
     switch (type) {
@@ -52,7 +54,9 @@ export function SourceConfigure() {
     }, [t]);
 
     const { sourceId } = useParams<{ sourceId: string }>();
-    const { data, loading } = requestManager.useGetSource(sourceId);
+    const { data, loading, error, refetch } = requestManager.useGetSource(sourceId, {
+        notifyOnNetworkStatusChange: true,
+    });
     const sourcePreferences = data?.source.preferences ?? [];
 
     const updateValue =
@@ -65,6 +69,16 @@ export function SourceConfigure() {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('SourceConfigure::refetch'))}
+            />
+        );
+    }
+
     return (
         <List sx={{ padding: 0 }}>
             {sourcePreferences.map((it, index) => {

src/screens/Sources.tsx

@@ -22,6 +22,8 @@ import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { SourceCard } from '@/components/SourceCard';
 import { LangSelect } from '@/components/navbar/action/LangSelect';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 function sourceToLangList(sources: ISource[]) {
     const result: string[] = [];
@@ -55,7 +57,12 @@ export function Sources() {
     const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());
     const [showNsfw] = useLocalStorage<boolean>('showNsfw', true);
 
-    const { data, loading: isLoading } = requestManager.useGetSourceList();
+    const {
+        data,
+        loading: isLoading,
+        error,
+        refetch,
+    } = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
     const sources = data?.sources.nodes;
 
     const areSourcesFromDifferentRepos = useMemo(() => {
@@ -109,8 +116,18 @@ export function Sources() {
 
     if (isLoading) return <LoadingPlaceholder />;
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('Sources::refetch'))}
+            />
+        );
+    }
+
     if (sources?.length === 0) {
-        return <h3>{t('source.error.label.no_sources_found')}</h3>;
+        return <EmptyView message={t('source.error.label.no_sources_found')} />;
     }
 
     return (

src/screens/settings/About.tsx

@@ -28,6 +28,7 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { GetAboutQuery, UpdateState } from '@/lib/graphql/generated/graphql.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
 
 type AboutServer = GetAboutQuery['aboutServer'];
 
@@ -201,7 +202,7 @@ export function About() {
 
     useSetDefaultBackTo('settings');
 
-    const { data, loading } = requestManager.useGetAbout();
+    const { data, loading, error, refetch } = requestManager.useGetAbout({ notifyOnNetworkStatusChange: true });
     const { aboutServer, aboutWebUI } = data ?? {};
 
     const {
@@ -239,6 +240,16 @@ export function About() {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('About::refetch'))}
+            />
+        );
+    }
+
     return (
         <List>
             <List

src/screens/settings/Backup.tsx

@@ -32,6 +32,8 @@ import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { TimeSetting } from '@/components/settings/TimeSetting.tsx';
 import { ServerSettings } from '@/typings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;
 
@@ -71,7 +73,12 @@ export function Backup() {
 
     useSetDefaultBackTo('settings');
 
-    const { data: settingsData, loading } = requestManager.useGetServerSettings();
+    const {
+        data: settingsData,
+        loading,
+        error,
+        refetch,
+    } = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
     const backupSettings = settingsData ? extractBackupSettings(settingsData.settings) : undefined;
@@ -228,6 +235,16 @@ export function Backup() {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('Backup::refetch'))}
+            />
+        );
+    }
+
     return (
         <>
             <List sx={{ padding: 0 }}>

src/screens/settings/BrowseSettings.tsx

@@ -24,6 +24,8 @@ import {
     useMetadataServerSettings,
 } from '@/lib/metadata/metadataServerSettings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;
 
@@ -46,7 +48,9 @@ export const BrowseSettings = () => {
 
     const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', true);
 
-    const { data, loading } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
     const serverSettings = data ? extractBrowseSettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
@@ -66,6 +70,16 @@ export const BrowseSettings = () => {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('BrowseSettings::refetch'))}
+            />
+        );
+    }
+
     return (
         <List>
             <ListItem>

src/screens/settings/Categories.tsx

@@ -35,6 +35,8 @@ import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { TCategory } from '@/typings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 const getItemStyle = (
     isDragging: boolean,
@@ -63,7 +65,7 @@ export function Categories() {
         };
     }, [t]);
 
-    const { data, loading } = requestManager.useGetCategories({ notifyOnNetworkStatusChange: true });
+    const { data, loading, error, refetch } = requestManager.useGetCategories({ notifyOnNetworkStatusChange: true });
     const categories = useMemo(() => {
         const res = [...(data?.categories.nodes ?? [])];
         if (res.length > 0 && res[0].name === 'Default') {
@@ -140,6 +142,16 @@ export function Categories() {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('category.error.label.request_failure')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('Categories::refetch'))}
+            />
+        );
+    }
+
     return (
         <>
             <DragDropContext onDragEnd={onDragEnd}>

src/screens/settings/DefaultReaderSettings.tsx

@@ -7,8 +7,6 @@
  */
 
 import { useContext, useEffect } from 'react';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useTranslation } from 'react-i18next';
 import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings';
 import { convertToGqlMeta, requestUpdateServerMetadata } from '@/lib/metadata/metadata.ts';
@@ -21,6 +19,8 @@ import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions
 import { makeToast } from '@/components/util/Toast';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 export function DefaultReaderSettings() {
     const { t } = useTranslation();
@@ -35,7 +35,12 @@ export function DefaultReaderSettings() {
         };
     }, [t]);
 
-    const { metadata, settings, loading } = useDefaultReaderSettings();
+    const {
+        metadata,
+        settings,
+        loading,
+        request: { error, refetch },
+    } = useDefaultReaderSettings();
 
     useSetDefaultBackTo('settings');
 
@@ -48,17 +53,16 @@ export function DefaultReaderSettings() {
     };
 
     if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
         return (
-            <Box
+            <EmptyView
-                sx={{
+                message={t('global.error.label.failed_to_load_data')}
-                    height: '100vh',
+                messageExtra={error.message}
-                    width: '100vw',
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DefaultReaderSettings::refetch'))}
-                    display: 'grid',
+            />
-                    placeItems: 'center',
-                }}
-            >
-                <CircularProgress thickness={5} />
-            </Box>
         );
     }
 

src/screens/settings/DownloadSettings.tsx

@@ -27,6 +27,8 @@ import { DeleteChaptersWhileReadingSetting } from '@/components/settings/downloa
 import { CategoriesInclusionSetting } from '@/components/settings/CategoriesInclusionSetting.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type DownloadSettingsType = Pick<
     ServerSettings,
@@ -63,7 +65,9 @@ export const DownloadSettings = () => {
         };
     }, [t]);
 
-    const { data } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
     const downloadSettings = data ? extractDownloadSettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
     const { settings: metadataSettings } = useMetadataServerSettings();
@@ -85,6 +89,16 @@ export const DownloadSettings = () => {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadSettings::refetch'))}
+            />
+        );
+    }
+
     return (
         <List>
             <TextSetting

src/screens/settings/ServerSettings.tsx

@@ -22,6 +22,8 @@ import { ServerSettings as GqlServerSettings } from '@/typings.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { SelectSetting } from '@/components/settings/SelectSetting.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type ServerSettingsType = Pick<
     GqlServerSettings,
@@ -84,7 +86,9 @@ export const ServerSettings = () => {
         };
     }, [t]);
 
-    const { data, loading } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
     const serverSettings = data ? extractServerSettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
@@ -107,6 +111,16 @@ export const ServerSettings = () => {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('ServerSettings::refetch'))}
+            />
+        );
+    }
+
     return (
         <List>
             <List

src/screens/settings/WebUISettings.tsx

@@ -24,6 +24,8 @@ import {
 } from '@/components/settings/SelectSetting.tsx';
 import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type WebUISettingsType = Pick<
     ServerSettings,
@@ -125,7 +127,9 @@ export const WebUISettings = () => {
         };
     }, [t]);
 
-    const { data, loading } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
     const webUISettings = data ? extractWebUISettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
@@ -146,6 +150,16 @@ export const WebUISettings = () => {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('WebUISettings::refetch'))}
+            />
+        );
+    }
+
     return (
         <List>
             <SelectSetting<WebUiFlavor>