-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a1684de
commit 818b168
Showing
1 changed file
with
52 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| }; |