✨ Add some error handling

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>
+    )
+}

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>
+        <ErrorCatcherBox>
-            <LoginPage path={"/"}/>
+            <Reach.Router>
-            <SelectResearchGroupPage path={"/g/"}/>
+                <LoginPage path={"/"}/>
-        </Reach.Router>
+                <SelectResearchGroupPage path={"/g/"}/>
+                <NotFoundBox default/>
+            </Reach.Router>
+        </ErrorCatcherBox>
     </>
 }