⚡️(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

Author: lebaudantoine

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 (error.status === 404) {
- void replace(`/404`);
- return null;
- }
-
- if (error.status === 401) {
- void queryClient.resetQueries({
- queryKey: [KEY_AUTH],
- });
- setAuthUrl();
- void replace(`/401`);
- return null;
+ if ([403, 404, 401].includes(error.status)) {
+ if (error.status === 401) {
+ if (authenticated) {
+ queryClient.setQueryData([KEY_AUTH], {
+ user: null,
+ authenticated: false,
+ });
+ }
+ setAuthUrl();
+ }
+
+ void replace(`/${error.status}`);
+
+ return (
+ <Box $align="center" $justify="center" $height="100%">
+ <Loader />
+ </Box>
+ );
  }
 
  return (