🥅 Add 500 catching page (#1226)

2025-11-17 10:41:10 +01:00 · 2023-08-12 22:52:55 +02:00
parent a41c3e64d0
commit 6d295c056b
2 changed files with 84 additions and 0 deletions
--- a/src/images/undraw_bug_fixing_oc-7-a.svg
+++ b/src/images/undraw_bug_fixing_oc-7-a.svg
--- a/src/pages/_error.tsx
+++ b/src/pages/_error.tsx
@@ -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;