Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-17 02:31:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

🥅 Add 500 catching page (#1226)

Browse Source
This commit is contained in:
Manuel
2023-08-12 22:52:55 +02:00
committed by GitHub
parent a41c3e64d0
commit 6d295c056b
2 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/images/undraw_bug_fixing_oc-7-a.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

83
src/pages/_error.tsx Normal file
View File

@@ -0,0 +1,83 @@
import {
Accordion,
Center,
Group,
Stack,
Text,
Title,
createStyles,
useMantineTheme,
} from '@mantine/core';
import { IconDeviceDesktop, IconInfoCircle, IconServer } from '@tabler/icons-react';
import { NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import imageBugFixing from '~/images/undraw_bug_fixing_oc-7-a.svg';
function Error({ statusCode }: { statusCode: number }) {
const { classes } = useStyles();
const theme = useMantineTheme();
const getColor = (color: string) => theme.colors[color][theme.colorScheme === 'dark' ? 5 : 7];
return (
<Center className={classes.root} h="100dvh" maw={400}>
<Head>
<title>An error occurred • Homarr</title>
</Head>
<Stack>
<Image className={classes.image} src={imageBugFixing} alt="bug illustration" />
<Title>An unexpected error has occurred</Title>
<Text>
This page has crashed unexpectedly. We're sorry for the inconvenience. Please try again or
contact an administrator
</Text>
<Accordion variant="contained">
<Accordion.Item value="detailed">
<Accordion.Control icon={<IconInfoCircle color={getColor('red')} size="1rem" />}>
Detailed error information
</Accordion.Control>
<Accordion.Panel>
<Stack spacing="xs">
<Group position="apart">
<Text fw="bold">Type</Text>
<Text>
{statusCode ? (
<Group spacing="xs">
<IconServer size="1rem" />
<Text>Server side</Text>
</Group>
) : (
<Group spacing="xs">
<IconDeviceDesktop size="1rem" />
<Text>Client side</Text>
</Group>
)}
</Text>
</Group>
</Stack>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</Stack>
</Center>
);
}
Error.getInitialProps = ({ res, err }: NextPageContext) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
const useStyles = createStyles(() => ({
root: {
margin: '0 auto',
},
image: {
maxWidth: 400,
maxHeight: 200,
display: 'block',
margin: '0 auto',
},
}));
export default Error;