diff --git a/apps/antalmanac/src/App.tsx b/apps/antalmanac/src/App.tsx index 30db0bea5..4465f8df8 100644 --- a/apps/antalmanac/src/App.tsx +++ b/apps/antalmanac/src/App.tsx @@ -10,6 +10,7 @@ import { undoDelete } from './actions/AppStoreActions'; import AppQueryProvider from './providers/Query'; import AppThemeProvider from './providers/Theme'; import AppThemev5Provider from './providers/Themev5'; +import { ErrorPage } from './routes/ErrorPage'; import Feedback from './routes/Feedback'; import Home from './routes/Home'; @@ -17,14 +18,17 @@ const BrowserRouter = createBrowserRouter([ { path: '/', element: , + errorElement: , }, { path: '/:tab', element: , + errorElement: , }, { path: '/feedback', element: , + errorElement: , }, ]); diff --git a/apps/antalmanac/src/routes/ErrorPage.tsx b/apps/antalmanac/src/routes/ErrorPage.tsx new file mode 100644 index 000000000..2982659ef --- /dev/null +++ b/apps/antalmanac/src/routes/ErrorPage.tsx @@ -0,0 +1,43 @@ +import { Typography, Button, Stack } from '@mui/material'; +import { Link, useRouteError } from 'react-router-dom'; + +export const ErrorPage = () => { + const error = useRouteError(); + + return ( + + + Oops! Something went wrong. + + + + This error may be caused by your browser having an out of date version of AntAlmanac. + + + Try refreshing the page. If the error persists, please submit a{' '} + bug report with the provided error. + + + + + +
+ View Error Message +

{error instanceof Error &&

{error.stack}
}

+
+
+ ); +};