Add ErrorBoundary class and use it in models

Author: pinkwah

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Card, Typography } from "@equinor/eds-core-react";
+
+type Props = {
+    children: React.ReactNode;
+};
+
+type State = {
+    error?: Error;
+};
+
+const Error: React.FC<{ error: Error }> = ({ error }) => (
+    <Card variant="danger">
+        <Card.Header>
+            <Card.HeaderTitle>
+                <Typography variant="h5">{error.name}</Typography>
+                <Typography variant="body_short">{error.message}</Typography>
+            </Card.HeaderTitle>
+        </Card.Header>
+        <Card.Content>
+            <div style={{ overflow: "auto", fontFamily: "monospace" }}>
+                <Typography variant="body_short" as="pre">
+                    {error.stack}
+                </Typography>
+            </div>
+        </Card.Content>
+    </Card>
+);
+
+class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            error: undefined,
+        };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return { error };
+    }
+
+    componentDidCatch(error: Error, info: React.ErrorInfo) {
+        console.error(error, info.componentStack, React.captureOwnerStack());
+    }
+
+    render() {
+        const { error } = this.state;
+
+        return error !== undefined ? <Error error={error} /> : this.props.children;
+    }
+}
+
+export default ErrorBoundary;

frontend/src/pages/Models.tsx

@@ -21,6 +21,7 @@ import { useGridRangeStore } from "@/hooks/useGridRangeStore";
 import InputStep from "@/components/Simulation/InputStep";
 import ResultStep from "@/components/Simulation/ResultStep";
 import GridResultStep from "@/components/GridSimulation/GridResultStep";
+import ErrorBoundary from "@/components/ErrorBoundary.tsx";
 
 const Models: React.FC = () => {
     const [selectedModels, setSelectedModels] = useState<ModelConfig[]>([]);
@@ -166,29 +167,31 @@ const Models: React.FC = () => {
 
     return (
         <MainContainer>
-            <Step
-                step={1}
-                title="Models"
-                description="Select models for simulation. Multiple models can be chained together in a pipeline."
-            />
-            <ModelSelect selectedModels={selectedModels} setSelectedModels={setSelectedModels} />
-            <Step step={2} title="Inputs" />
-            <InputStep selectedModels={selectedModels} setModelInput={setModelInput} runGridSimulation={runGrid} />
-            <Step step={3} title="Results" />
-            {isGridMode ? (
-                <GridResultStep
-                    result={gridResult}
-                    isLoading={gridIsLoading}
-                    error={gridResultError ?? startGridError}
+            <ErrorBoundary>
+                <Step
+                    step={1}
+                    title="Models"
+                    description="Select models for simulation. Multiple models can be chained together in a pipeline."
                 />
-            ) : (
-                <ResultStep
-                    simulationResults={simulationResults}
-                    isLoading={simulationIsLoading}
-                    error={resultError ?? startError}
-                />
-            )}
-            <div style={{ height: "25dvh" }} />
+                <ModelSelect selectedModels={selectedModels} setSelectedModels={setSelectedModels} />
+                <Step step={2} title="Inputs" />
+                <InputStep selectedModels={selectedModels} setModelInput={setModelInput} runGridSimulation={runGrid} />
+                <Step step={3} title="Results" />
+                {isGridMode ? (
+                    <GridResultStep
+                        result={gridResult}
+                        isLoading={gridIsLoading}
+                        error={gridResultError ?? startGridError}
+                    />
+                ) : (
+                    <ResultStep
+                        simulationResults={simulationResults}
+                        isLoading={simulationIsLoading}
+                        error={resultError ?? startError}
+                    />
+                )}
+                <div style={{ height: "25dvh" }} />
+            </ErrorBoundary>
         </MainContainer>
     );
 };