Skip to content

Commit ddbc65a

Browse files
OvgoddOvgodd
committed
fixup! ♿️(frontend) redirect unmanaged 5xx to dedicated /500 page
1 parent ee592ff commit ddbc65a

5 files changed

Lines changed: 112 additions & 171 deletions

File tree

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { Button } from '@gouvfr-lasuite/cunningham-react';
2+
import Head from 'next/head';
3+
import Image, { StaticImageData } from 'next/image';
4+
import { useTranslation } from 'react-i18next';
5+
import styled from 'styled-components';
6+
7+
import { Box, Icon, StyledLink, Text } from '@/components';
8+
9+
const StyledButton = styled(Button)`
10+
width: fit-content;
11+
`;
12+
13+
interface ErrorPageProps {
14+
image: StaticImageData;
15+
description: string;
16+
}
17+
18+
export const ErrorPage = ({ image, description }: ErrorPageProps) => {
19+
const { t } = useTranslation();
20+
21+
const errorTitle = t('An unexpected error occurred.');
22+
23+
return (
24+
<>
25+
<Head>
26+
<title>
27+
{errorTitle} - {t('Docs')}
28+
</title>
29+
<meta
30+
property="og:title"
31+
content={`${errorTitle} - ${t('Docs')}`}
32+
key="title"
33+
/>
34+
</Head>
35+
<Box
36+
$align="center"
37+
$margin="auto"
38+
$gap="md"
39+
$padding={{ bottom: '2rem' }}
40+
>
41+
<Text as="h1" $textAlign="center" className="sr-only">
42+
{errorTitle} - {t('Docs')}
43+
</Text>
44+
<Image
45+
src={image}
46+
alt=""
47+
width={300}
48+
style={{
49+
maxWidth: '100%',
50+
height: 'auto',
51+
}}
52+
/>
53+
54+
<Text
55+
as="p"
56+
$textAlign="center"
57+
$maxWidth="350px"
58+
$theme="neutral"
59+
$margin="0"
60+
>
61+
{description}
62+
</Text>
63+
64+
<Box $direction="row" $gap="sm">
65+
<StyledLink href="/">
66+
<StyledButton
67+
color="neutral"
68+
icon={
69+
<Icon
70+
iconName="house"
71+
variant="symbols-outlined"
72+
$withThemeInherited
73+
/>
74+
}
75+
>
76+
{t('Home')}
77+
</StyledButton>
78+
</StyledLink>
79+
80+
<StyledButton
81+
color="neutral"
82+
variant="bordered"
83+
icon={
84+
<Icon
85+
iconName="refresh"
86+
variant="symbols-outlined"
87+
$withThemeInherited
88+
/>
89+
}
90+
onClick={() => window.location.reload()}
91+
>
92+
{t('Refresh page')}
93+
</StyledButton>
94+
</Box>
95+
</Box>
96+
</>
97+
);
98+
};

‎src/frontend/apps/impress/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export * from './Card';
44
export * from './DropButton';
55
export * from './dropdown-menu/DropdownMenu';
66
export * from './Emoji/EmojiPicker';
7+
export * from './ErrorPage';
78
export * from './quick-search';
89
export * from './Icon';
910
export * from './InfiniteScroll';

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

Lines changed: 7 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,21 @@
1-
import { Button } from '@gouvfr-lasuite/cunningham-react';
2-
import Head from 'next/head';
3-
import Image from 'next/image';
41
import { ReactElement } from 'react';
52
import { useTranslation } from 'react-i18next';
6-
import styled from 'styled-components';
73

84
import error_img from '@/assets/icons/error-coffee.png';
9-
import { Box, Icon, StyledLink, Text } from '@/components';
5+
import { ErrorPage } from '@/components';
106
import { PageLayout } from '@/layouts';
117
import { NextPageWithLayout } from '@/types/next';
128

13-
const StyledButton = styled(Button)`
14-
width: fit-content;
15-
`;
16-
179
const Page: NextPageWithLayout = () => {
1810
const { t } = useTranslation();
1911

20-
const errorTitle = t('An unexpected error occurred.');
21-
2212
return (
23-
<>
24-
<Head>
25-
<title>
26-
{errorTitle} - {t('Docs')}
27-
</title>
28-
<meta
29-
property="og:title"
30-
content={`${errorTitle} - ${t('Docs')}`}
31-
key="title"
32-
/>
33-
</Head>
34-
<Box
35-
$align="center"
36-
$margin="auto"
37-
$gap="md"
38-
$padding={{ bottom: '2rem' }}
39-
>
40-
<Text as="h1" $textAlign="center" className="sr-only">
41-
{errorTitle} - {t('Docs')}
42-
</Text>
43-
<Image
44-
src={error_img}
45-
alt=""
46-
width={300}
47-
style={{
48-
maxWidth: '100%',
49-
height: 'auto',
50-
}}
51-
/>
52-
53-
<Text
54-
as="p"
55-
$textAlign="center"
56-
$maxWidth="350px"
57-
$theme="neutral"
58-
$margin="0"
59-
>
60-
{t(
61-
'An unexpected error occurred. Go grab a coffee or try to refresh the page.',
62-
)}
63-
</Text>
64-
65-
<Box $direction="row" $gap="sm">
66-
<StyledLink href="/">
67-
<StyledButton
68-
color="neutral"
69-
icon={
70-
<Icon
71-
iconName="house"
72-
variant="symbols-outlined"
73-
$withThemeInherited
74-
/>
75-
}
76-
>
77-
{t('Home')}
78-
</StyledButton>
79-
</StyledLink>
80-
81-
<StyledButton
82-
color="neutral"
83-
variant="bordered"
84-
icon={
85-
<Icon
86-
iconName="refresh"
87-
variant="symbols-outlined"
88-
$withThemeInherited
89-
/>
90-
}
91-
onClick={() => window.location.reload()}
92-
>
93-
{t('Refresh page')}
94-
</StyledButton>
95-
</Box>
96-
</Box>
97-
</>
13+
<ErrorPage
14+
image={error_img}
15+
description={t(
16+
'An unexpected error occurred. Go grab a coffee or try to refresh the page.',
17+
)}
18+
/>
9819
);
9920
};
10021

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

Lines changed: 5 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,21 @@
1-
import { Button } from '@gouvfr-lasuite/cunningham-react';
21
import * as Sentry from '@sentry/nextjs';
32
import { NextPageContext } from 'next';
43
import NextError from 'next/error';
5-
import Head from 'next/head';
6-
import Image from 'next/image';
74
import { ReactElement } from 'react';
85
import { useTranslation } from 'react-i18next';
9-
import styled from 'styled-components';
106

117
import error_img from '@/assets/icons/error-planetes.png';
12-
import { Box, Icon, StyledLink, Text } from '@/components';
8+
import { ErrorPage } from '@/components';
139
import { PageLayout } from '@/layouts';
1410

15-
const StyledButton = styled(Button)`
16-
width: fit-content;
17-
`;
18-
1911
const Error = () => {
2012
const { t } = useTranslation();
2113

22-
const errorTitle = t('An unexpected error occurred.');
23-
2414
return (
25-
<>
26-
<Head>
27-
<title>
28-
{errorTitle} - {t('Docs')}
29-
</title>
30-
<meta
31-
property="og:title"
32-
content={`${errorTitle} - ${t('Docs')}`}
33-
key="title"
34-
/>
35-
</Head>
36-
<Box
37-
$align="center"
38-
$margin="auto"
39-
$gap="md"
40-
$padding={{ bottom: '2rem' }}
41-
>
42-
<Text as="h2" $textAlign="center" className="sr-only">
43-
{errorTitle} - {t('Docs')}
44-
</Text>
45-
<Image
46-
src={error_img}
47-
alt=""
48-
width={300}
49-
style={{
50-
maxWidth: '100%',
51-
height: 'auto',
52-
}}
53-
/>
54-
55-
<Text
56-
as="p"
57-
$textAlign="center"
58-
$maxWidth="350px"
59-
$theme="neutral"
60-
$margin="0"
61-
>
62-
{errorTitle}
63-
</Text>
64-
65-
<Box $direction="row" $gap="sm">
66-
<StyledLink href="/">
67-
<StyledButton
68-
color="neutral"
69-
icon={
70-
<Icon
71-
iconName="house"
72-
variant="symbols-outlined"
73-
$withThemeInherited
74-
/>
75-
}
76-
>
77-
{t('Home')}
78-
</StyledButton>
79-
</StyledLink>
80-
81-
<StyledButton
82-
color="neutral"
83-
variant="bordered"
84-
icon={
85-
<Icon
86-
iconName="refresh"
87-
variant="symbols-outlined"
88-
$withThemeInherited
89-
/>
90-
}
91-
onClick={() => window.location.reload()}
92-
>
93-
{t('Refresh page')}
94-
</StyledButton>
95-
</Box>
96-
</Box>
97-
</>
15+
<ErrorPage
16+
image={error_img}
17+
description={t('An unexpected error occurred.')}
18+
/>
9819
);
9920
};
10021

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ const DocPage = ({ id }: DocProps) => {
191191
}, [addTask, doc?.id, queryClient]);
192192

193193
useEffect(() => {
194-
if (!isError || !error?.status || ![403].includes(error.status)) {
194+
if (!isError || !error?.status || [403].includes(error.status)) {
195195
return;
196196
}
197197

0 commit comments

Comments
 (0)