🥅(frontend) add boundary error page

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to
 ### Added
 
 - ✨(backend) allow to create a new user in a marketing system
+- 🥅(frontend) add boundary error page #1728
 
 ### Changed
 

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

@@ -4,6 +4,8 @@ import { CSSProperties, RuleSet } from 'styled-components/dist/types';
 
 import {
   MarginPadding,
+  Spacings,
+  spacingValue,
   stylesMargin,
   stylesPadding,
 } from '@/utils/styleBuilder';
@@ -22,7 +24,7 @@ export interface BoxProps {
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
   $flex?: CSSProperties['flex'];
-  $gap?: CSSProperties['gap'];
+  $gap?: Spacings;
   $hasTransition?: boolean | 'slow';
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
@@ -70,7 +72,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $display, as }) =>
     `display: ${$display || (as?.match('span|input') ? 'inline-flex' : 'flex')};`}
   ${({ $flex }) => $flex && `flex: ${$flex};`}
-  ${({ $gap }) => $gap && `gap: ${$gap};`}
+  ${({ $gap }) => $gap && `gap: ${spacingValue($gap)};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>
     $hasTransition && $hasTransition === 'slow'

src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx

@@ -1,6 +1,6 @@
 import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
 import { Button } from '@openfun/cunningham-react';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -24,6 +24,7 @@ export const BoutonShare = ({
 }: BoutonShareProps) => {
   const { t } = useTranslation();
   const treeContext = useTreeContext<Doc>();
+  const [crash, setCrash] = useState(false);
 
   /**
    * Following the change where there is no default owner when adding a sub-page,
@@ -74,14 +75,23 @@ export const BoutonShare = ({
   }
 
   return (
-    <Button
-      color="brand"
-      variant="tertiary"
-      onClick={open}
-      size="medium"
-      disabled={isDisabled}
-    >
-      {t('Share')}
-    </Button>
+    <>
+      <Button
+        color="brand"
+        variant="tertiary"
+        onClick={() => {
+          setCrash(true);
+        }}
+        size="medium"
+        disabled={isDisabled}
+      >
+        {t('Crash button')}
+      </Button>
+      {crash && <CrashComponent />}
+    </>
   );
 };
+
+const CrashComponent = () => {
+  throw new Error('Crash component error');
+};

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

@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import img403 from '@/assets/icons/icon-403.png';
+import error_img from '@/assets/icons/error-planetes.png';
 import { Box, Icon, StyledLink, Text } from '@/components';
 import { PageLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
@@ -32,32 +32,46 @@ const Page: NextPageWithLayout = () => {
       <Box
         $align="center"
         $margin="auto"
-        $gap="1rem"
+        $gap="md"
         $padding={{ bottom: '2rem' }}
       >
         <Text as="h1" $textAlign="center" className="sr-only">
           {t('Page Not Found - Error 404')} - {t('Docs')}
         </Text>
         <Image
-          src={img403}
+          src={error_img}
           alt=""
           width={300}
-          height={300}
           style={{
             maxWidth: '100%',
             height: 'auto',
           }}
         />
 
-        <Box $align="center" $gap="0.8rem">
-          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="brand">
-            {t(
-              'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
-            )}
-          </Text>
+        <Text
+          as="p"
+          $textAlign="center"
+          $maxWidth="350px"
+          $theme="neutral"
+          $margin="0"
+        >
+          {t(
+            'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+          )}
+        </Text>
 
+        <Box $direction="row" $gap="sm">
           <StyledLink href="/">
-            <StyledButton icon={<Icon iconName="house" $color="white" />}>
+            <StyledButton
+              color="neutral"
+              icon={
+                <Icon
+                  iconName="house"
+                  variant="symbols-outlined"
+                  $withThemeInherited
+                />
+              }
+            >
               {t('Home')}
             </StyledButton>
           </StyledLink>

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

@@ -0,0 +1,112 @@
+import { Button } from '@openfun/cunningham-react';
+import { captureUnderscoreErrorException } from '@sentry/nextjs';
+import { NextPageContext } from 'next';
+import Head from 'next/head';
+import Image from 'next/image';
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import error_img from '@/assets/icons/error-planetes.png';
+import { Box, Icon, StyledLink, Text } from '@/components';
+import { PageLayout } from '@/layouts';
+
+const StyledButton = styled(Button)`
+  width: fit-content;
+`;
+
+const Error = () => {
+  const { t } = useTranslation();
+
+  const errorTitle = t('An unexpected error occurred.');
+
+  return (
+    <>
+      <Head>
+        <title>
+          {errorTitle} - {t('Docs')}
+        </title>
+        <meta
+          property="og:title"
+          content={`${errorTitle} - ${t('Docs')}`}
+          key="title"
+        />
+      </Head>
+      <Box
+        $align="center"
+        $margin="auto"
+        $gap="md"
+        $padding={{ bottom: '2rem' }}
+      >
+        <Text as="h2" $textAlign="center" className="sr-only">
+          {errorTitle} - {t('Docs')}
+        </Text>
+        <Image
+          src={error_img}
+          alt=""
+          width={300}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
+        />
+
+        <Text
+          as="p"
+          $textAlign="center"
+          $maxWidth="350px"
+          $theme="neutral"
+          $margin="0"
+        >
+          {errorTitle}
+        </Text>
+
+        <Box $direction="row" $gap="sm">
+          <StyledLink href="/">
+            <StyledButton
+              color="neutral"
+              icon={
+                <Icon
+                  iconName="house"
+                  variant="symbols-outlined"
+                  $withThemeInherited
+                />
+              }
+            >
+              {t('Home')}
+            </StyledButton>
+          </StyledLink>
+
+          <StyledButton
+            color="neutral"
+            variant="bordered"
+            icon={
+              <Icon
+                iconName="refresh"
+                variant="symbols-outlined"
+                $withThemeInherited
+              />
+            }
+            onClick={() => window.location.reload()}
+          >
+            {t('Refresh page')}
+          </StyledButton>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+Error.getInitialProps = async (contextData: NextPageContext) => {
+  await captureUnderscoreErrorException(contextData);
+
+  const { res, err } = contextData;
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};
+
+Error.getLayout = function getLayout(page: ReactElement) {
+  return <PageLayout withFooter={false}>{page}</PageLayout>;
+};
+
+export default Error;

src/helm/env.d/feature/values.impress.yaml.gotmpl

@@ -66,6 +66,7 @@ backend:
     AWS_S3_ACCESS_KEY_ID: dinum
     AWS_S3_SECRET_ACCESS_KEY: password
     AWS_STORAGE_BUCKET_NAME: docs-media-storage
+    SENTRY_DSN: https://[email protected]/197
     STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
     Y_PROVIDER_API_BASE_URL: http://impress-y-provider:443/api/
     Y_PROVIDER_API_KEY: my-secret