From 71cd016d4dc7712eb54bc3dcb4e1e0e1ea3c0e67 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 22 May 2025 00:27:42 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20optimize=20docum?=
 =?UTF-8?q?ent=20fetch=20error=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                                  |  1 +
 .../impress/src/pages/docs/[id]/index.tsx     | 43 ++++++++++++-------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31458c97..9771d8f7 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
index 854187ce..da4c10ba 100644
--- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
+++ b/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 (