From 818b16816e8d018cdfead5851e2e39bbec231159 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Tue, 26 Nov 2024 13:48:17 -0800
Subject: [PATCH] feat: update error page (#1057)

---
 apps/antalmanac/src/routes/ErrorPage.tsx | 86 ++++++++++++++----------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/apps/antalmanac/src/routes/ErrorPage.tsx b/apps/antalmanac/src/routes/ErrorPage.tsx
index 2982659ef..45b049bcb 100644
--- a/apps/antalmanac/src/routes/ErrorPage.tsx
+++ b/apps/antalmanac/src/routes/ErrorPage.tsx
@@ -1,43 +1,61 @@
-import { Typography, Button, Stack } from '@mui/material';
-import { Link, useRouteError } from 'react-router-dom';
+import { ExpandMore } from '@mui/icons-material';
+import { Box, Accordion, AccordionDetails, AccordionSummary, Typography, Button, Stack } from '@mui/material';
+import { Link, useLocation, useRouteError } from 'react-router-dom';
 
 export const ErrorPage = () => {
     const error = useRouteError();
+    const location = useLocation();
 
     return (
-        <Stack
-            spacing={3}
-            sx={{
-                padding: '1rem',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flexDirection: 'column',
-                height: '100vh',
-                gap: 2,
-            }}
-        >
-            <Typography variant="h3" component="h1">
-                Oops! Something went wrong.
-            </Typography>
-            <Stack spacing={2} sx={{ textAlign: 'center' }}>
-                <Typography variant="h5" component="p">
-                    This error may be caused by your browser having an out of date version of AntAlmanac.
-                </Typography>
-                <Typography variant="h5" component="p">
-                    Try refreshing the page. If the error persists, please submit a{' '}
-                    <Link to="https://forms.gle/k81f2aNdpdQYeKK8A">bug report</Link> with the provided error.
+        <Box sx={{ height: '100dvh', overflowY: 'auto' }}>
+            <Stack
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    maxWidth: 800,
+                    minHeight: '100dvh',
+                    margin: 'auto',
+                    padding: 2,
+                    gap: 2,
+                }}
+            >
+                <Typography variant="h3" component="h1">
+                    Oops! Something went wrong.
                 </Typography>
+                <Stack spacing={2}>
+                    <Typography variant="h5" component="p">
+                        This error may be caused by your browser having an out of date version of AntAlmanac.
+                    </Typography>
+                    <Typography variant="h5" component="p">
+                        Try refreshing the page. If the error persists, please submit a{' '}
+                        <Link to="https://forms.gle/k81f2aNdpdQYeKK8A">bug report</Link> with the provided error.
+                    </Typography>
+                </Stack>
+                <Link to="/">
+                    <Button variant="contained" size="large">
+                        Back to Home
+                    </Button>
+                </Link>
+                <Accordion defaultExpanded disableGutters sx={{ maxWidth: '100%' }}>
+                    <AccordionSummary expandIcon={<ExpandMore />}>
+                        <Typography component="p">View Error Message</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails
+                        sx={{
+                            display: 'flex',
+                            gap: 1,
+                            textAlign: 'left',
+                            flexWrap: 'wrap',
+                        }}
+                    >
+                        <Typography sx={{ fontWeight: '600' }}>Route: {location.pathname}</Typography>
+                        <Typography sx={{ wordBreak: 'break-word' }}>
+                            {error instanceof Error ? error.stack : 'No error stack provided.'}
+                        </Typography>
+                    </AccordionDetails>
+                </Accordion>
             </Stack>
-            <Link to="/">
-                <Button variant="contained" size="large">
-                    Back to Home
-                </Button>
-            </Link>
-            <details open>
-                <summary>View Error Message</summary>
-                <p>{error instanceof Error && <pre>{error.stack}</pre>}</p>
-            </details>
-        </Stack>
+        </Box>
     );
 };