Update README and documentation; refactor frontend components for improved structure and resilience

2025-09-11 23:46:29 +02:00
parent 63b4bb487d
commit b9206de1a0
49 changed files with 27058 additions and 581 deletions
--- a/frontend/src/components/common/ErrorBoundary.js
+++ b/frontend/src/components/common/ErrorBoundary.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Button } from 'antd';
+import { ReloadOutlined } from '@ant-design/icons';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error,
+      errorInfo
+    });
+    
+    // Log error to console in development
+    if (process.env.NODE_ENV === 'development') {
+      console.error('ErrorBoundary caught an error:', error, errorInfo);
+    }
+  }
+
+  handleReload = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '24px', textAlign: 'center' }}>
+          <Alert
+            message="Something went wrong"
+            description={
+              <div>
+                <p>The application encountered an unexpected error.</p>
+                {process.env.NODE_ENV === 'development' && this.state.error && (
+                  <details style={{ marginTop: '16px', textAlign: 'left' }}>
+                    <summary>Error Details (Development)</summary>
+                    <pre style={{ marginTop: '8px', fontSize: '12px' }}>
+                      {this.state.error.toString()}
+                      {this.state.errorInfo.componentStack}
+                    </pre>
+                  </details>
+                )}
+                <Button 
+                  type="primary" 
+                  icon={<ReloadOutlined />}
+                  onClick={this.handleReload}
+                  style={{ marginTop: '16px' }}
+                >
+                  Reload Page
+                </Button>
+              </div>
+            }
+            type="error"
+            showIcon
+          />
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default ErrorBoundary;