From 126451f9001de4711b197c867f12c5f76b95ca99 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 20 Sep 2021 17:53:54 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20some=20error=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ErrorBox.tsx | 64 ++++++++++++++++++++++++++++
 frontend/src/routes/Router.jsx       | 12 ++++--
 2 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/ErrorBox.tsx

diff --git a/frontend/src/components/ErrorBox.tsx b/frontend/src/components/ErrorBox.tsx
new file mode 100644
index 0000000..dc3d1c0
--- /dev/null
+++ b/frontend/src/components/ErrorBox.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import {Box, Heading} from "@steffo/bluelib-react";
+
+
+interface ErrorBoxProps {
+    error?: Error,
+}
+
+
+export function ErrorBox({error}: ErrorBoxProps): JSX.Element | null {
+    if(!error) {
+        return null
+    }
+
+    return (
+        <Box bluelibClassNames={"color-red"}>
+            {error.toString()}
+        </Box>
+    )
+}
+
+
+interface ErrorCatcherBoxProps {
+    children: React.ReactNode,
+}
+
+interface ErrorCatcherBoxState {
+    error?: Error,
+}
+
+
+export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, ErrorCatcherBoxState> {
+    constructor(props: ErrorCatcherBoxProps) {
+        super(props)
+        this.state = {error: undefined}
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        console.warn("Caught error:", error)
+        this.setState(state => {
+            return {...state, error}
+        })
+    }
+
+    render() {
+        return (
+            <ErrorBox error={this.state.error}/>
+        )
+    }
+}
+
+
+export function NotFoundBox() {
+    return (
+        <Box bluelibClassNames={"color-red"}>
+            <Heading level={3}>
+                Not found
+            </Heading>
+            <p>
+                The page you were looking for was not found.
+            </p>
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/routes/Router.jsx b/frontend/src/routes/Router.jsx
index 7d782c2..f08933d 100644
--- a/frontend/src/routes/Router.jsx
+++ b/frontend/src/routes/Router.jsx
@@ -4,6 +4,7 @@ import { LoginPage } from "./LoginPage"
 import { Heading } from "@steffo/bluelib-react"
 import { SelectResearchGroupPage } from "./SelectResearchGroupPage"
 import {Link} from "../components/Link"
+import { ErrorCatcherBox, NotFoundBox } from "../components/ErrorBox"
 
 
 function Header() {
@@ -20,9 +21,12 @@ export function Router() {
         <Reach.Router primary={false}>
             <Header default/>
         </Reach.Router>
-        <Reach.Router>
-            <LoginPage path={"/"}/>
-            <SelectResearchGroupPage path={"/g/"}/>
-        </Reach.Router>
+        <ErrorCatcherBox>
+            <Reach.Router>
+                <LoginPage path={"/"}/>
+                <SelectResearchGroupPage path={"/g/"}/>
+                <NotFoundBox default/>
+            </Reach.Router>
+        </ErrorCatcherBox>
     </>
 }