Catch component level errors at high level

Plan/react/dashboard/src/App.js

@@ -4,7 +4,7 @@ import './style/style.css';
 import './style/mobile.css';
 
 import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
-import React from "react";
+import React, {useCallback} from "react";
 import {NightModeCss, ThemeContextProvider, ThemeCss} from "./hooks/themeHook";
 import axios from "axios";
 import ErrorView from "./views/ErrorView";
@@ -15,6 +15,7 @@ import {NavigationContextProvider} from "./hooks/navigationHook";
 import MainPageRedirect from "./components/navigation/MainPageRedirect";
 import {baseAddress, staticSite} from "./service/backendConfiguration";
 import {PageExtensionContextProvider} from "./hooks/pageExtensionHook";
+import ErrorBoundary from "./components/ErrorBoundary";
 
 const PlayerPage = React.lazy(() => import("./views/layout/PlayerPage"));
 const PlayerOverview = React.lazy(() => import("./views/player/PlayerOverview"));
@@ -79,11 +80,16 @@ const ContextProviders = ({children}) => (
     </AuthenticationContextProvider>
 )
 
-const Lazy = ({children}) => (
-    <React.Suspense fallback={<></>}>
-        {children}
-    </React.Suspense>
-)
+const Lazy = ({children}) => {
+    const fallbackFunction = useCallback((error) => <ErrorView error={error}/>, []);
+    return (
+        <React.Suspense fallback={<></>}>
+            <ErrorBoundary fallbackFunction={fallbackFunction}>
+                {children}
+            </ErrorBoundary>
+        </React.Suspense>
+    );
+}
 
 const getBasename = () => {
     if (baseAddress) {

Plan/react/dashboard/src/components/ErrorBoundary.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: undefined,
+            errorInfo: undefined
+        };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        this.setState({error, errorInfo})
+    }
+
+    render() {
+        if (this.state.error && this.props.fallbackFunction) {
+            return this.props.fallbackFunction(this.state.error, this.state.errorInfo);
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

Plan/react/dashboard/src/components/graphs/GroupVisualizer.js

@@ -1,10 +1,12 @@
-import React, {useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import GroupTable from "../table/GroupTable";
 import GroupPie from "./GroupPie";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBarChart, faChartColumn, faPieChart, faTable} from "@fortawesome/free-solid-svg-icons";
 import {Col, Row} from "react-bootstrap";
 import GroupBarGraph from "./GroupBarGraph";
+import ErrorBoundary from "../ErrorBoundary";
+import {ErrorViewText} from "../../views/ErrorView";
 
 const options = {
     BAR: 'bar',
@@ -47,15 +49,23 @@ const GroupVisualizer = ({groups, colors, name, horizontal}) => {
         right: "0",
         top: "0.5rem"
     };
+
+    const changeViewToPie = useCallback(() => setVisualization(options.PIE), [setVisualization, options])
+    const changeViewToTable = useCallback(() => setVisualization(options.TABLE), [setVisualization, options])
+    const changeViewToBar = useCallback(() => setVisualization(horizontal ? options.BAR : options.COLUMN), [setVisualization, horizontal, options])
+
+    const fallbackFunction = useCallback((error) => <ErrorViewText error={error}/>, []);
+
     return <Row>
         <Col md={12} style={selectorFloatStyle}>
-            <VisualizerSelector icon={faPieChart} onClick={() => setVisualization(options.PIE)}/>
-            <VisualizerSelector icon={faTable} onClick={() => setVisualization(options.TABLE)}/>
-            <VisualizerSelector icon={horizontal ? faBarChart : faChartColumn}
-                                onClick={() => setVisualization(horizontal ? options.BAR : options.COLUMN)}/>
+            <VisualizerSelector icon={faPieChart} onClick={changeViewToPie}/>
+            <VisualizerSelector icon={faTable} onClick={changeViewToTable}/>
+            <VisualizerSelector icon={horizontal ? faBarChart : faChartColumn} onClick={changeViewToBar}/>
         </Col>
         <Col md={12}>
-            <Visualizer option={visualization} groups={groups} colors={colors} name={name}/>
+            <ErrorBoundary fallbackFunction={fallbackFunction}>
+                <Visualizer option={visualization} groups={groups} colors={colors} name={name}/>
+            </ErrorBoundary>
         </Col>
     </Row>
 };