🔧 Allow users to ignore errors

frontend/src/components/errors/ErrorCatcherBox.tsx

@@ -1,11 +1,15 @@
+import {Box, Form} from "@steffo/bluelib-react"
 import * as React from "react"
 import {ErrorBox} from "./ErrorBox"
+import {IgnoreErrorButton} from "./IgnoreErrorButton"
+import {ReportBugButton} from "./ReportBugButton"
 
 
 interface ErrorCatcherBoxProps {
     children?: React.ReactNode,
 }
 
+
 interface ErrorCatcherBoxState {
     error?: Error,
 }
@@ -18,6 +22,7 @@ export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, Error
     constructor(props: ErrorCatcherBoxProps) {
         super(props)
         this.state = {error: undefined}
+        this.clearError = this.clearError.bind(this)
     }
 
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
@@ -27,10 +32,24 @@ export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, Error
         })
     }
 
+    clearError() {
+        this.setState(state => {
+            return {...state, error: undefined}
+        })
+    }
+
     render() {
-        if (this.state.error) {
+        if(this.state.error) {
             return (
-                <ErrorBox error={this.state.error}/>
+                <Box bluelibClassNames={"color-red"}>
+                    {this.state.error.toString()}
+                    <Form>
+                        <Form.Row>
+                            <IgnoreErrorButton onClick={this.clearError}/>
+                            <ReportBugButton/>
+                        </Form.Row>
+                    </Form>
+                </Box>
             )
         } else {
             return this.props.children

frontend/src/components/errors/IgnoreErrorButton.tsx

@@ -0,0 +1,18 @@
+import {faAngleDoubleRight} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {Button} from "@steffo/bluelib-react"
+import * as React from "react"
+
+
+export interface IgnoreErrorButtonProps {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+
+export function IgnoreErrorButton({onClick}: IgnoreErrorButtonProps): JSX.Element {
+    return (
+        <Button onClick={onClick}>
+            <FontAwesomeIcon icon={faAngleDoubleRight}/>&nbsp;Try ignoring the error
+        </Button>
+    )
+}

frontend/src/components/errors/ReportBugButton.tsx

@@ -0,0 +1,25 @@
+import {faBug} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {navigate} from "@reach/router"
+import {Button} from "@steffo/bluelib-react"
+import * as React from "react"
+
+
+export function ReportBugButton(): JSX.Element {
+    const onClick =
+        React.useCallback(
+            async () => {
+                await navigate("https://github.com/Steffo99/sophon/issues/new?assignees=&labels=bug&template=1_bug_report.md&title=")
+            },
+            [],
+        )
+
+    return React.useMemo(
+        () => (
+            <Button>
+                <FontAwesomeIcon onClick={onClick} icon={faBug}/>&nbsp;Report bug
+            </Button>
+        ),
+        [onClick],
+    )
+}