Add error boundary for tools

src/tools/ToolLoader.tsx

@@ -1,25 +1,72 @@
-import React from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router";
+import _ from "lodash";
 import prerenderedLoadable from "../helpers/prerenderedLoadable";
 import NotFoundPage from "../pages/NotFound";
 
+import * as styles from "../App.module.scss";
+import { Trans } from "react-i18next";
+import BoxMessage from "../components/BoxMessage";
+import { AlertOctagon } from "lucide-react";
+
 
 const HomePage = prerenderedLoadable(() => import('../pages/Home'));
 const RotTool = prerenderedLoadable(() => import('./cyphers_and_cryptography/rot/RotTool'));
 const Base64Tool = prerenderedLoadable(() => import('./cyphers_and_cryptography/base64/Base64Tool'));
 
+type ErrorBoundaryProps = {
+    resetFunction: () => void
+}
+class ToolErrorBoundary extends React.Component<React.PropsWithChildren<ErrorBoundaryProps>, {hasError: boolean}> {
+    constructor(props: React.PropsWithChildren<ErrorBoundaryProps>) {
+      super(props);
+      this.state = { hasError: false };
+    }
+  
+    static getDerivedStateFromError(error: Error) {
+        return { hasError: true }; 
+    }
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        console.log(error, errorInfo);
+    }
+    render() {
+
+      if (this.state.hasError) {    
+          // You can render any custom fallback UI    
+          return <>
+            <div className={styles.layoutBox}>
+                <BoxMessage icon={<AlertOctagon/>}>
+                    <b><Trans i18nKey={"system.errors.toolException.title"}>The tool encountered a fatal error.</Trans></b>
+                    <p>
+                        <Trans i18nKey={"system.errors.toolException.description"} />
+                    </p>
+                    <button onClick={() => this.props.resetFunction()}>Reset Tool and Retry</button>
+                </BoxMessage>
+            </div>
+          </>;    
+        }
+      return this.props.children; 
+    }
+  }
+
 const ToolLoader = () => {
     const {tool} = useParams();
+
+    const [key, setKey] = useState(_.uniqueId("toolLoader_"))
+
+    const forceReset = () => {
+        setKey(_.uniqueId("toolLoader_"))
+    }
     
     switch(tool) {
         case "test":
-            return <HomePage/>;
+            return <ToolErrorBoundary resetFunction={forceReset} key={key}><HomePage/></ToolErrorBoundary>;
 
         case "rot":
-            return <RotTool/>;
+            return <ToolErrorBoundary resetFunction={forceReset} key={key}><RotTool/></ToolErrorBoundary>;
 
         case "base64":
-            return <Base64Tool/>;
+            return <ToolErrorBoundary resetFunction={forceReset} key={key}><Base64Tool/></ToolErrorBoundary>;
 
         default:
             return <NotFoundPage/>;