Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update error page #1057

Merged
merged 4 commits into from
Nov 26, 2024
Merged

feat: update error page #1057

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
228de55
feat: update error page
KevinWu098 Nov 24, 2024
511c6aa
style: misc.
KevinWu098 Nov 24, 2024
3124566
style: fix
KevinWu098 Nov 24, 2024
632309e
fix: misc.
KevinWu098 Nov 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 52 additions & 34 deletions apps/antalmanac/src/routes/ErrorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
Loading