fixup! ♿️(frontend) redirect unmanaged 5xx to dedicated /500 page

Author: Ovgodd

src/frontend/apps/e2e/__tests__/app-impress/doc-routing.spec.ts

@@ -40,18 +40,44 @@ test.describe('Doc Routing', () => {
     await expect(page).toHaveURL(/\/docs\/$/);
   });
 
-  test('checks 500 page', async ({ page }) => {
-    await page.waitForTimeout(300);
+  test('checks 500 refresh retries original document request', async ({
+    page,
+    browserName,
+  }) => {
+    const [docTitle] = await createDoc(page, 'doc-routing-500', browserName, 1);
+    await verifyDocName(page, docTitle);
+
+    const docId = page.url().split('/docs/')[1]?.split('/')[0];
+    let documentRequestCount = 0;
+
+    await page.route(/\**\/documents\/\**/, async (route) => {
+      const request = route.request();
+      if (
+        request.method().includes('GET') &&
+        docId &&
+        request.url().includes(`/documents/${docId}/`)
+      ) {
+        documentRequestCount += 1;
+        await route.fulfill({
+          status: 500,
+          json: { detail: 'Internal Server Error' },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.reload();
 
-    await page.goto('/500');
+    await expect(page).toHaveURL(/\/500\/?\?from=/, { timeout: 15000 });
 
     const refreshButton = page.getByRole('button', { name: 'Refresh page' });
     await expect(refreshButton).toBeVisible();
+    await refreshButton.click();
 
-    const homeLink = page.getByRole('link', { name: 'Home', exact: true });
-    await expect(homeLink).toBeVisible();
-    await homeLink.click();
-    await expect(page).toHaveURL(/\/$/);
+    await expect
+      .poll(() => documentRequestCount, { timeout: 10000 })
+      .toBeGreaterThan(1);
   });
 
   test('checks 404 on docs/[id] page', async ({ page }) => {

src/frontend/apps/impress/src/components/ErrorPage.tsx

@@ -13,12 +13,34 @@ const StyledButton = styled(Button)`
 interface ErrorPageProps {
   image: StaticImageData;
   description: string;
+  refreshTarget?: string;
 }
 
-export const ErrorPage = ({ image, description }: ErrorPageProps) => {
+const getSafeRefreshUrl = (target?: string): string | undefined => {
+  if (!target) {
+    return undefined;
+  }
+
+  try {
+    const url = new URL(target, window.location.origin);
+    if (url.origin !== window.location.origin) {
+      return undefined;
+    }
+    return url.pathname;
+  } catch {
+    return undefined;
+  }
+};
+
+export const ErrorPage = ({
+  image,
+  description,
+  refreshTarget,
+}: ErrorPageProps) => {
   const { t } = useTranslation();
 
   const errorTitle = t('An unexpected error occurred.');
+  const safeTarget = getSafeRefreshUrl(refreshTarget);
 
   return (
     <>
@@ -77,20 +99,22 @@ export const ErrorPage = ({ image, description }: ErrorPageProps) => {
             </StyledButton>
           </StyledLink>
 
-          <StyledButton
-            color="neutral"
-            variant="bordered"
-            icon={
-              <Icon
-                iconName="refresh"
-                variant="symbols-outlined"
-                $withThemeInherited
-              />
-            }
-            onClick={() => window.location.reload()}
-          >
-            {t('Refresh page')}
-          </StyledButton>
+          {safeTarget && (
+            <StyledButton
+              color="neutral"
+              variant="bordered"
+              icon={
+                <Icon
+                  iconName="refresh"
+                  variant="symbols-outlined"
+                  $withThemeInherited
+                />
+              }
+              onClick={() => window.location.assign(safeTarget)}
+            >
+              {t('Refresh page')}
+            </StyledButton>
+          )}
         </Box>
       </Box>
     </>

src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx

@@ -32,7 +32,7 @@ export const DocVersionEditor = ({
     versionId,
   });
 
-  const { replace } = useRouter();
+  const { replace, asPath } = useRouter();
   const [initialContent, setInitialContent] = useState<Y.XmlFragment>();
 
   // Reset initialContent when versionId changes to avoid conflicts between versions
@@ -56,9 +56,10 @@ export const DocVersionEditor = ({
     if (error.status === 404) {
       void replace('/404');
     } else {
-      void replace('/500');
+      const fromPath = encodeURIComponent(asPath);
+      void replace(`/500?from=${fromPath}`);
     }
-  }, [isError, error, replace]);
+  }, [isError, error, replace, asPath]);
 
   if (isError) {
     return null;

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx

@@ -30,13 +30,14 @@ const VersionListState = ({
   versions,
 }: VersionListStateProps) => {
   const { formatDateSpecial } = useDate();
-  const { replace } = useRouter();
+  const { replace, asPath } = useRouter();
 
   useEffect(() => {
     if (error) {
-      void replace('/500');
+      const fromPath = encodeURIComponent(asPath);
+      void replace(`/500?from=${fromPath}`);
     }
-  }, [error, replace]);
+  }, [error, replace, asPath]);
 
   if (isLoading) {
     return (

src/frontend/apps/impress/src/pages/500.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,13 +9,18 @@ import { NextPageWithLayout } from '@/types/next';
 
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
+  const { query } = useRouter();
+  const from = Array.isArray(query.from) ? query.from[0] : query.from;
+  const refreshTarget =
+    from?.startsWith('/') && !from.startsWith('//') ? from : undefined;
 
   return (
     <ErrorPage
       image={error_img}
       description={t(
         'An unexpected error occurred. Go grab a coffee or try to refresh the page.',
       )}
+      refreshTarget={refreshTarget}
     />
   );
 };

src/frontend/apps/impress/src/pages/_error.tsx

@@ -15,6 +15,7 @@ const Error = () => {
     <ErrorPage
       image={error_img}
       description={t('An unexpected error occurred.')}
+      refreshTarget="/"
     />
   );
 };

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

@@ -105,7 +105,7 @@ const DocPage = ({ id }: DocProps) => {
   const { setCurrentDoc } = useDocStore();
   const { addTask } = useBroadcastStore();
   const queryClient = useQueryClient();
-  const { replace } = useRouter();
+  const { replace, asPath } = useRouter();
   useCollaboration(doc?.id, doc?.content);
   const { t } = useTranslation();
   const { authenticated } = useAuth();
@@ -210,9 +210,10 @@ const DocPage = ({ id }: DocProps) => {
     }
 
     if (error.status !== 403) {
-      void replace('/500');
+      const fromPath = encodeURIComponent(asPath);
+      void replace(`/500?from=${fromPath}`);
     }
-  }, [isError, error?.status, replace, authenticated, queryClient]);
+  }, [isError, error?.status, replace, authenticated, queryClient, asPath]);
 
   if (isError && error?.status) {
     if (error.status === 403) {