⚡️(frontend) optimize document fetch error handling

Reduce unnecessary fetch requests when retrieving documents with permission
or authentication issues. Previous implementation was triggering multiple
document requests despite having sufficient error information from initial
attempt to determine appropriate user redirection.

Additionally, fix issue where resetting the auth cache was triggering redundant
authentication verification requests. The responsibility for checking auth
status should belong to the 401 page component on mount, rather than being
triggered by cache resets during error handling.

Known limitations:
- Not waiting for async  function completion makes code harder to
 maintain
- Added loading spinner as temporary solution to prevent UI flicker
- Future improvement should implement consistent error-based redirects rather
 than rendering error messages directly on document page

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to
 - 🧑‍💻(docker) add .next to .dockerignore #1055
 - 🧑‍💻(docker) handle frontend development images with docker compose #1033
 - 🧑‍💻(docker) add y-provider config to development environment #1057
+- ⚡️(frontend) optimize document fetch error handling #1089
 
 ### Fixed
 

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Icon, TextErrors } from '@/components';
+import { DEFAULT_QUERY_RETRY } from '@/core';
 import { DocEditor } from '@/docs/doc-editor';
 import {
   Doc,
@@ -14,7 +15,7 @@ import {
   useDoc,
   useDocStore,
 } from '@/docs/doc-management/';
-import { KEY_AUTH, setAuthUrl } from '@/features/auth';
+import { KEY_AUTH, setAuthUrl, useAuth } from '@/features/auth';
 import { MainLayout } from '@/layouts';
 import { useBroadcastStore } from '@/stores';
 import { NextPageWithLayout } from '@/types/next';
@@ -56,6 +57,14 @@ const DocPage = ({ id }: DocProps) => {
     {
       staleTime: 0,
       queryKey: [KEY_DOC, { id }],
+      retryDelay: 1000,
+      retry: (failureCount, error) => {
+        if (error.status == 403 || error.status == 401 || error.status == 404) {
+          return false;
+        } else {
+          return failureCount < DEFAULT_QUERY_RETRY;
+        }
+      },
     },
   );
 
@@ -66,6 +75,7 @@ const DocPage = ({ id }: DocProps) => {
   const { replace } = useRouter();
   useCollaboration(doc?.id, doc?.content);
   const { t } = useTranslation();
+  const { authenticated } = useAuth();
 
   useEffect(() => {
     if (!docQuery || isFetching) {
@@ -93,23 +103,24 @@ const DocPage = ({ id }: DocProps) => {
   }, [addTask, doc?.id, queryClient]);
 
   if (isError && error) {
-    if (error.status === 403) {
-      void replace(`/403`);
-      return null;
-    }
+    if ([403, 404, 401].includes(error.status)) {
+      if (error.status === 401) {
+        if (authenticated) {
+          queryClient.setQueryData([KEY_AUTH], {
+            user: null,
+            authenticated: false,
+          });
+        }
+        setAuthUrl();
+      }
 
-    if (error.status === 404) {
-      void replace(`/404`);
-      return null;
-    }
+      void replace(`/${error.status}`);
 
-    if (error.status === 401) {
-      void queryClient.resetQueries({
-        queryKey: [KEY_AUTH],
-      });
-      setAuthUrl();
-      void replace(`/401`);
-      return null;
+      return (
+        <Box $align="center" $justify="center" $height="100%">
+          <Loader />
+        </Box>
+      );
     }
 
     return (