💄(frontend) add standalone 503 error page

CHANGELOG.md

@@ -10,13 +10,14 @@ and this project adheres to
 
 - 🐛(backend) skip session creation for the liveness probe
 - 🐛(frontend) preserve page titles when adding an emoji #2586
+- 💄(frontend) add standalone 503 error page #2655
+- 💄(frontend) redesign email confirmation standalone page #2601
 
 ## [v5.6.1] - 2026-09-04
 
 ### Added
 
 - ✨(frontend) export presenter slides as PDF #2487
-- 💄(frontend) redesign email confirmation standalone page #2601
 
 ### Fixed
 
@@ -49,7 +50,7 @@ and this project adheres to
 - 🐛(backend) fix duplicating a document that has no content #2609
 - 📄(frontend) allowed partially export when MIT #2551
 - 🐛(backend) manage async support for Docs custom middleware #2619
-- 🐛(frontend) save the doc with a keepalive 
+- 🐛(frontend) save the doc with a keepalive
   request when leaving the page #2619
 
 ### Removed

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

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('503', () => {
+  test('checks all the elements are visible', async ({ page }) => {
+    await page.goto('/503');
+
+    await expect(
+      page.getByRole('heading', { level: 1, name: 'Error 503' }),
+    ).toBeVisible();
+    await expect(
+      page.getByText('The server is temporarily overloaded or unavailable'),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Refresh page' }),
+    ).toBeVisible();
+    await expect(page.getByTestId('header-logo-link')).toBeVisible();
+  });
+});

src/frontend/apps/impress/src/features/errors/components/Error503.tsx

@@ -0,0 +1,101 @@
+import { useTranslation } from 'react-i18next';
+
+import { Box, BoxButton, Icon, Text } from '@/components';
+
+import Error503Svg from '../assets/503.svg';
+
+const getSafeRefreshUrl = (target?: string): string | undefined => {
+  if (!target) {
+    return undefined;
+  }
+
+  if (typeof window === 'undefined') {
+    return target.startsWith('/') && !target.startsWith('//')
+      ? target
+      : undefined;
+  }
+
+  try {
+    const url = new URL(target, window.location.origin);
+    if (url.origin !== window.location.origin) {
+      return undefined;
+    }
+    return url.pathname + url.search + url.hash;
+  } catch {
+    return undefined;
+  }
+};
+
+type Error503Props = {
+  refreshTarget?: string;
+};
+
+export const Error503 = ({ refreshTarget }: Error503Props) => {
+  const { t } = useTranslation();
+  const safeTarget = getSafeRefreshUrl(refreshTarget);
+
+  return (
+    <Box
+      $align="center"
+      $gap="xs"
+      $padding={{ horizontal: 'base' }}
+      className="--docs--error-503"
+    >
+      <Error503Svg aria-hidden="true" />
+      <Box $align="center" $gap="3xs">
+        <Text
+          as="h1"
+          $size="md"
+          $weight="bold"
+          $textAlign="center"
+          $margin="0"
+          $theme="neutral"
+          $variation="primary"
+        >
+          {t('Error 503')}
+        </Text>
+        <Text
+          as="p"
+          $textAlign="center"
+          $maxWidth="330px"
+          $theme="neutral"
+          $variation="secondary"
+          $margin="0"
+          $size="sm"
+        >
+          {t('The server is temporarily overloaded or unavailable')}
+        </Text>
+      </Box>
+      <BoxButton
+        $direction="row"
+        $align="center"
+        $gap="3xs"
+        $theme="neutral"
+        $variation="tertiary"
+        onClick={() =>
+          safeTarget
+            ? window.location.assign(safeTarget)
+            : window.location.reload()
+        }
+      >
+        <Icon
+          iconName="refresh"
+          variant="symbols-outlined"
+          $size="sm"
+          $theme="neutral"
+          $variation="tertiary"
+          aria-hidden="true"
+        />
+        <Text
+          $size="sm"
+          $theme="neutral"
+          $variation="tertiary"
+          $weight={500}
+          $margin="0"
+        >
+          {t('Refresh page')}
+        </Text>
+      </BoxButton>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/errors/components/index.ts

@@ -0,0 +1 @@
+export * from './Error503';

src/frontend/apps/impress/src/features/errors/index.ts

@@ -0,0 +1 @@
+export * from './components';

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

@@ -0,0 +1,37 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Error503 } from '@/features/errors';
+import { StandalonePageLayout } from '@/layouts';
+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 (
+    <>
+      <Head>
+        <meta name="robots" content="noindex" />
+        <title>{`${t('Error 503')} - ${t('Docs')}`}</title>
+        <meta
+          property="og:title"
+          content={`${t('Error 503')} - ${t('Docs')}`}
+          key="title"
+        />
+      </Head>
+      <Error503 refreshTarget={refreshTarget} />
+    </>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <StandalonePageLayout>{page}</StandalonePageLayout>;
+};
+
+export default Page;