feat: Add ErrorPage

public/locales/en-US/translation.json

@@ -17,7 +17,8 @@
         "actionNotUndoable": "This action cannot be undone!",
         "copyError": "Copying to clipboard did not work. Please copy the text manually.",
         "experimentalFeature": "This is an experimental feature.",
-        "deletedSuccessfully": "Deleted successfully!"
+        "deletedSuccessfully": "Deleted successfully!",
+        "appError": "We are sorry but there was an error. Please try again later."
     },
 
     "routes": {

src/App.tsx

@@ -16,6 +16,7 @@ import AuthenticatedRoute from "~/routes/AuthenticatedRoute"
 import CompleteAccountRoute from "~/routes/CompleteAccountRoute"
 import CreateReservedAliasRoute from "~/routes/CreateReservedAliasRoute"
 import EnterDecryptionPassword from "~/routes/EnterDecryptionPassword"
+import ErrorPage from "~/components/widgets/ErrorPage"
 import GlobalSettingsRoute from "~/routes/GlobalSettingsRoute"
 import I18nHandler from "./I18nHandler"
 import LoginRoute from "~/routes/LoginRoute"
@@ -35,7 +36,7 @@ const router = createBrowserRouter([
 	{
 		path: "/",
 		element: <RootRoute />,
-		errorElement: <div></div>,
+		errorElement: <ErrorPage />,
 		children: [
 			{
 				path: "/auth",

src/components/widgets/ErrorPage.tsx

@@ -0,0 +1,27 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+import {IoSad} from "react-icons/io5"
+
+import {Grid, Typography} from "@mui/material"
+
+export default function ErrorPage(): ReactElement {
+	const {t} = useTranslation()
+
+	return (
+		<Grid
+			container
+			flexDirection="column"
+			justifyContent="center"
+			alignItems="center"
+			height="100vh"
+			spacing={2}
+		>
+			<Grid item>
+				<IoSad size={80} />
+			</Grid>
+			<Grid item maxWidth="sm">
+				<Typography variant="subtitle1">{t("general.appError")}</Typography>
+			</Grid>
+		</Grid>
+	)
+}