✨ Add better error handling

nest_frontend/App.js

@@ -6,6 +6,7 @@ import GlobalServer from "./components/providers/GlobalServer"
 import GlobalUser from "./components/providers/GlobalUser"
 import PageSwitcher from "./PageSwitcher"
 import GlobalLanguage from "./components/providers/GlobalLanguage"
+import ErrorBoundary from "./components/boundaries/ErrorBoundary"
 
 
 /**
@@ -22,7 +23,9 @@ export default function App() {
                     <GlobalTheme>
                         <BrowserRouter>
                             <Layout>
+                                <ErrorBoundary>
                                     <PageSwitcher/>
+                                </ErrorBoundary>
                             </Layout>
                         </BrowserRouter>
                     </GlobalTheme>

nest_frontend/LocalizationStrings.js

@@ -138,6 +138,10 @@ export default {
         errorAlertNoWindow: "Errore: Finestra di allarme non specificata.",
         errorAlertNoEvaluation: "Errore: Modalità di valutazione non specificata.",
         errorAlertDeletionFailure: "Errore: Qualcosa sta impedendo l'eliminazione dell'allarme.",
+        errorViewNotAllowed: "Errore: Non è permesso effettuare la richiesta.", // TODO: Tradurre
+        errorServerNotConfigured: "Errore: Non è stato configurato nessun server.", // TODO: Tradurre
+        errorDecodeError: "Errore: Non è stato possibile deserializzare i dati ricevuti dal backend.", // TODO: Tradurre
+        errorSerializationError: "Errore: Non è stato possibile serializzare i dati da inviare al backend." // TODO: Tradurre
     },
     // 🇬🇧
     en: {

nest_frontend/components/base/Alert.js

@@ -1,5 +1,5 @@
 import React from "react"
-import Style from "./BoxAlert.module.css"
+import Style from "./Alert.module.css"
 import classNames from "classnames"
 
 
@@ -13,7 +13,7 @@ import classNames from "classnames"
  * @returns {JSX.Element}
  * @constructor
  */
-export default function BoxAlert({ color, children, className, ...props }) {
+export default function Alert({ color, children, className, ...props }) {
     return (
         <div className={classNames(Style.BoxAlert, Style[`BoxAlert${color}`], className)} {...props}>
             {children}

nest_frontend/components/base/formparts/FormAlert.js

@@ -1,11 +1,11 @@
 import React from "react"
 import Style from "./FormAlert.module.css"
 import classNames from "classnames"
-import BoxAlert from "../BoxAlert"
+import Alert from "../Alert"
 
 
 /**
- * A {@link BoxAlert} ready to be used in a {@link FormLabelled}.
+ * A {@link Alert} ready to be used in a {@link FormLabelled}.
  *
  * @param children - The contents of the alert.
  * @param className - Additional class(es) to add to the box.
@@ -15,8 +15,8 @@ import BoxAlert from "../BoxAlert"
  */
 export default function FormAlert({ children, className, ...props }) {
     return (
-        <BoxAlert className={classNames(Style.FormAlert, className)} {...props}>
+        <Alert className={classNames(Style.FormAlert, className)} {...props}>
             {children}
-        </BoxAlert>
+        </Alert>
     )
 }

nest_frontend/components/boundaries/ErrorBoundary.js

@@ -0,0 +1,27 @@
+import React from "react"
+import AlertError from "../interactive/AlertError"
+
+
+export default class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {error: null}
+    }
+
+    static getDerivedStateFromError(error) {
+        // I'm not too sure on what this does
+        return {error}
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.error("Caught error ", error, " with info ", errorInfo)
+        this.setState(state => state.error = error)
+    }
+
+    render() {
+        if(this.state.error) {
+            return <AlertError error={this.state.error}/>
+        }
+        return this.props.children
+    }
+}

nest_frontend/components/interactive/AlertError.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react"
+import Alert from "../base/Alert"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons"
+import {
+    DecodeError,
+    ResultError,
+    SerializationError,
+    ServerNotConfiguredError,
+    ViewNotAllowedError,
+} from "../../objects/Errors"
+import useStrings from "../../hooks/useStrings"
+
+
+export default function AlertError({ error, ...props }) {
+    const strings = useStrings()
+
+    const content = useMemo(
+        () => {
+            if(error instanceof ViewNotAllowedError) {
+                return strings.errorViewNotAllowed
+            }
+            else if(error instanceof ServerNotConfiguredError) {
+                return strings.errorServerNotConfigured
+            }
+            else if(error instanceof DecodeError) {
+                return strings.errorDecodeError
+            }
+            else if(error instanceof ResultError) {
+                return strings[error.getCode()]
+            }
+            else if(error instanceof SerializationError) {
+                return strings.errorSerializationError
+            }
+            else {
+                return error.toString()
+            }
+        },
+        [strings, error]
+    )
+
+    return (
+        <Alert color={"Red"} {...props}>
+            <FontAwesomeIcon icon={faExclamationTriangle}/> {content}
+        </Alert>
+    )
+}

nest_frontend/objects/MapArea.test.js

@@ -11,3 +11,4 @@ test("MapArea can be rendered to a spec-compatible string", () => {
     const mapArea = new MapArea(1000, new Coordinates(0.0, 0.0))
     expect(mapArea.toString()).toBe("< 1000 0.0000000 0.0000000")
 })
+

nest_frontend/routes/PageShare.js

@@ -7,7 +7,7 @@ import BoxUserList from "../components/interactive/BoxUserList"
 import useBackendViewset from "../hooks/useBackendViewset"
 import { useParams } from "react-router"
 import ContextUser from "../contexts/ContextUser"
-import BoxAlert from "../components/base/BoxAlert"
+import Alert from "../components/base/Alert"
 import useStrings from "../hooks/useStrings"
 
 
@@ -90,10 +90,10 @@ export default function PageShare({ className, ...props }) {
                 running={usersBvRunning && authBvRunning}
             />
             {authBvError ?
-                <BoxAlert color={"Red"} className={Style.Error}>{strings[authBvError?.data?.code ?? "errorUnknownError"]}</BoxAlert>
+                <Alert color={"Red"} className={Style.Error}>{strings[authBvError?.data?.code ?? "errorUnknownError"]}</Alert>
             : null}
             {usersBvError ?
-                <BoxAlert color={"Red"} className={Style.Error}>{strings[usersBvError?.data?.code ?? "errorUnknownError"]}</BoxAlert>
+                <Alert color={"Red"} className={Style.Error}>{strings[usersBvError?.data?.code ?? "errorUnknownError"]}</Alert>
             : null}
         </div>
     )

nest_frontend/routes/PageUsers.js

@@ -6,7 +6,7 @@ import BoxUserCreate from "../components/interactive/BoxUserCreate"
 import useBackendViewset from "../hooks/useBackendViewset"
 import BoxUserList from "../components/interactive/BoxUserList"
 import ContextLanguage from "../contexts/ContextLanguage"
-import BoxAlert from "../components/base/BoxAlert"
+import Alert from "../components/base/Alert"
 
 
 export default function PageUsers({ children, className, ...props }) {
@@ -22,7 +22,7 @@ export default function PageUsers({ children, className, ...props }) {
             <BoxUserCreate className={Style.CreateUser} createUser={bv.createResource} running={bv.running}/>
             <BoxUserList className={Style.UserList} users={bv.resources} destroyUser={bv.destroyResource} running={bv.running}/>
             {bv.error ?
-                <BoxAlert className={Style.Error} color={"red"}>{strings[bv.error?.data?.code ?? "errorUnknownError"]}</BoxAlert>
+                <Alert className={Style.Error} color={"red"}>{strings[bv.error?.data?.code ?? "errorUnknownError"]}</Alert>
             : null}
         </div>
     )

nest_frontend/utils/renderContents.js

@@ -1,6 +1,6 @@
 import React from "react"
 import Loading from "../components/base/Loading"
-import BoxAlert from "../components/base/BoxAlert"
+import Alert from "../components/base/Alert"
 import Starting from "../components/base/Starting"
 
 
@@ -11,7 +11,7 @@ export default function renderContents(requestHookResults, renderFunction) {
         return <Loading/>
     }
     if(error) {
-        return <BoxAlert color={"Red"}>{error.toString()}</BoxAlert>
+        return <Alert color={"Red"}>{error.toString()}</Alert>
     }
     if(data) {
         return renderFunction(data)