add error page

commafeed-client/src/App.tsx

@@ -9,6 +9,7 @@ import { redirectTo } from "app/slices/redirect"
 import { reloadServerInfos } from "app/slices/server"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { categoryUnreadCount } from "app/utils"
+import { ErrorBoundary } from "components/ErrorBoundary"
 import { Header } from "components/header/Header"
 import { Tree } from "components/sidebar/Tree"
 import { useI18n } from "i18n"
@@ -48,7 +49,7 @@ function Providers(props: { children: React.ReactNode }) {
                 >
                     <ModalsProvider>
                         <NotificationsProvider position="top-center" zIndex={9999}>
-                            {props.children}
+                            <ErrorBoundary>{props.children}</ErrorBoundary>
                         </NotificationsProvider>
                     </ModalsProvider>
                 </MantineProvider>

commafeed-client/src/components/ErrorBoundary.tsx

@@ -0,0 +1,26 @@
+import { ErrorPage } from "pages/ErrorPage"
+import React, { ReactNode } from "react"
+
+interface ErrorBoundaryProps {
+    children?: ReactNode
+}
+
+interface ErrorBoundaryState {
+    error?: Error
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props)
+        this.state = {}
+    }
+
+    componentDidCatch(error: Error) {
+        this.setState({ error })
+    }
+
+    render() {
+        if (this.state.error) return <ErrorPage error={this.state.error} />
+        return this.props.children
+    }
+}

commafeed-client/src/locales/en/messages.po

@@ -323,6 +323,10 @@ msgstr "Mark all as read"
 msgid "Mark all entries as read"
 msgstr "Mark all entries as read"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Metrics"
+msgstr "Metrics"
+
 #: src/components/RelativeDate.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "N/A"
@@ -368,6 +372,10 @@ msgstr "OPML export"
 msgid "OPML file"
 msgstr "OPML file"
 
+#: src/pages/ErrorPage.tsx
+msgid "Oops!"
+msgstr "Oops!"
+
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Open link"
 msgstr "Open link"
@@ -446,6 +454,10 @@ msgstr "Settings saved."
 msgid "Sign up"
 msgstr "Sign up"
 
+#: src/pages/ErrorPage.tsx
+msgid "Something bad just happened..."
+msgstr "Something bad just happened..."
+
 #: src/components/content/add/Subscribe.tsx
 #: src/components/content/add/Subscribe.tsx
 #: src/pages/app/AddPage.tsx

commafeed-client/src/locales/fr/messages.po

@@ -323,6 +323,10 @@ msgstr "Tout marquer comme lu"
 msgid "Mark all entries as read"
 msgstr "Marquer toutes les entrées comme lues"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Metrics"
+msgstr "Métriques"
+
 #: src/components/RelativeDate.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "N/A"
@@ -368,6 +372,10 @@ msgstr "Export du fichier OPML"
 msgid "OPML file"
 msgstr "Fichier OPML"
 
+#: src/pages/ErrorPage.tsx
+msgid "Oops!"
+msgstr "Oups !"
+
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Open link"
 msgstr "Ouvrir le lien"
@@ -446,6 +454,10 @@ msgstr "Réglages enregistrés."
 msgid "Sign up"
 msgstr "Créer un compte"
 
+#: src/pages/ErrorPage.tsx
+msgid "Something bad just happened..."
+msgstr "Quelque chose s'est mal passé..."
+
 #: src/components/content/add/Subscribe.tsx
 #: src/components/content/add/Subscribe.tsx
 #: src/pages/app/AddPage.tsx

commafeed-client/src/pages/ErrorPage.tsx

@@ -0,0 +1,65 @@
+import { Trans } from "@lingui/macro"
+import { Box, Button, Center, Container, createStyles, Group, Stack, Text, Title } from "@mantine/core"
+import { Logo } from "components/Logo"
+import { TbRefresh } from "react-icons/tb"
+
+const useStyles = createStyles(theme => ({
+    root: {
+        paddingTop: 80,
+    },
+
+    label: {
+        textAlign: "center",
+        fontWeight: "bold",
+        fontSize: 120,
+        lineHeight: 1,
+        marginBottom: theme.spacing.xl * 1.5,
+        color: theme.colors[theme.primaryColor][3],
+    },
+
+    title: {
+        textAlign: "center",
+        fontWeight: "bold",
+        fontSize: 32,
+    },
+
+    description: {
+        maxWidth: 540,
+        margin: "auto",
+        marginTop: theme.spacing.xl,
+        marginBottom: theme.spacing.xl * 1.5,
+    },
+}))
+
+export function ErrorPage(props: { error: Error }) {
+    const { classes } = useStyles()
+
+    return (
+        <div className={classes.root}>
+            <Container>
+                <Stack>
+                    <Center my="xl">
+                        <Logo size={48} />
+                        <Title order={1} ml="md">
+                            CommaFeed
+                        </Title>
+                    </Center>
+                </Stack>
+                <Box className={classes.label}>
+                    <Trans>Oops!</Trans>
+                </Box>
+                <Title className={classes.title}>
+                    <Trans>Something bad just happened...</Trans>
+                </Title>
+                <Text size="lg" align="center" className={classes.description}>
+                    {props.error.message}
+                </Text>
+                <Group position="center">
+                    <Button size="md" onClick={() => window.location.reload()} leftIcon={<TbRefresh size={18} />}>
+                        Refresh the page
+                    </Button>
+                </Group>
+            </Container>
+        </div>
+    )
+}