[MNT] Implemented error boundary (#406)

* Implemented an error boundary

* Fixed typo

* Implemented `show details` collapsable for error and error info

* Bumped version to v0.8.0

---------

Co-authored-by: Neurobagel Bot <neurobagel-bot[bot]@users.noreply.github.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-query-tool",
   "private": true,
-  "version": "v0.7.2",
+  "version": "v0.8.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/ErrorBoundary.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Typography, Button, Collapse } from '@mui/material';
+import logo from '../assets/logo.png';
+
+type ErrorBoundaryProps = {
+  children: React.ReactNode;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error?: Error | null;
+  errorInfo?: React.ErrorInfo | null;
+  showDetails: boolean;
+};
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null, showDetails: false };
+  }
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true, showDetails: false };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+    this.setState({ error, errorInfo: info });
+  }
+
+  toggleDetails = () => {
+    this.setState((prevState) => ({ showDetails: !prevState.showDetails }));
+  };
+
+  render() {
+    const { hasError, error, errorInfo, showDetails } = this.state;
+    const { children } = this.props;
+
+    if (hasError) {
+      // Fallback UI
+      return (
+        <div className="flex h-screen w-screen flex-col items-center justify-center space-y-5">
+          <img src={logo} alt="Logo" className="max-h-20 animate-pulse" />
+          <Typography variant="h5" className="text-center">
+            This is not supposed to happen. Please try again, or{' '}
+            <a
+              href="https://github.com/neurobagel/query-tool/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              open an issue
+            </a>
+            .
+          </Typography>
+          <Button variant="outlined" color="primary" onClick={this.toggleDetails}>
+            {showDetails ? 'Hide Details' : 'Show Details'}
+          </Button>
+          <Collapse in={showDetails}>
+            <div className="mt-4 w-11/12 max-w-lg overflow-auto rounded bg-gray-100 p-4 text-left shadow">
+              {error && (
+                <Typography variant="body1" className="mb-2">
+                  <strong>Error:</strong> {error.message}
+                </Typography>
+              )}
+              {errorInfo && (
+                <Typography variant="body2" style={{ whiteSpace: 'pre-wrap' }}>
+                  <strong>Component Stack:</strong>
+                  {'\n'}
+                  {errorInfo.componentStack}
+                </Typography>
+              )}
+            </div>
+          </Collapse>
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;

src/main.tsx

@@ -7,6 +7,7 @@ import App from './App';
 import { appBasePath, enableAuth, clientID } from './utils/constants';
 import './index.css';
 import theme from './theme';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const router = createBrowserRouter([
   {
@@ -20,7 +21,9 @@ const app = (
     {/* CSS injection order for MUI and tailwind: https://mui.com/material-ui/guides/interoperability/#tailwind-css */}
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <RouterProvider router={router} />
+        <ErrorBoundary>
+          <RouterProvider router={router} />
+        </ErrorBoundary>
       </ThemeProvider>
     </StyledEngineProvider>
   </React.StrictMode>