Introduce ErrorBoundary component for improved error handling

- Add `ErrorBoundary` component to handle rendering fallback UI during errors.
- Integrate `ErrorBoundary` into main layout and critical pages for global error handling.
- Create `useErrorHandler` hook to handle async errors consistently across components.
- Refactor `NewCustomerModal` and `CustomersPage` to leverage `useErrorHandler` for improved error management.
- Add a fallback dialog UI for user-friendly error reporting and resolution.

internal_frontend/components/customers/modal/NewCustomerModal.tsx

@@ -13,6 +13,7 @@ import {Card, CardContent, CardHeader} from "@/components/ui/card";
 import {CreateCustomerDto, NoteDto, PhoneNumberDto} from "@/services/customers/dtos/createCustomer.dto";
 import {addCustomer} from "@/services/customers/usecases/addCustomer";
 import {validateCustomer} from "@/services/customers/usecases/validateCustomer";
+import {useErrorHandler} from "@/components/error-boundary";
 
 export function NewCustomerModal() {
     const [step, setStep] = useState(1);
@@ -28,6 +29,7 @@ export function NewCustomerModal() {
     const [matches, setMatches] = useState<CustomerMatch[]>([]);
     const [showDetailModal, setShowDetailModal] = useState(false);
     const [selectedCustomer] = useState<CustomerMatch | null>(null);
+    const handleError = useErrorHandler();
 
     type CustomerMatch = {
         id: string;
@@ -52,15 +54,19 @@ export function NewCustomerModal() {
             const result = await validateCustomer({email, companyName, street, zip, city});
             setMatches(result);
         } catch (err) {
-            console.error("Validation failed", err);
+            handleError(err);
         }
     };
 
     const handleSubmit = async () => {
         if (!email || !name || !companyName || !street || !zip || !city) return;
-        const payload: CreateCustomerDto = {email, name, companyName, street, zip, city, phoneNumbers, notes};
-        await addCustomer(payload);
-        location.reload();
+        try {
+            const payload: CreateCustomerDto = {email, name, companyName, street, zip, city, phoneNumbers, notes};
+            await addCustomer(payload);
+            location.reload();
+        } catch (err) {
+            handleError(err);
+        }
     };
 
     const renderFormInput = (
@@ -277,4 +283,4 @@ export function NewCustomerModal() {
             </Dialog>
         </>
     );
-}
+}

internal_frontend/components/error-boundary.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import React from "react";
+import { showError } from "@/lib/ui/showError";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ComponentType<{ error: Error; reset: () => void }>;
+}
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+    
+    this.setState({
+      error,
+      errorInfo,
+    });
+
+    // Show error toast
+    showError(error);
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        const FallbackComponent = this.props.fallback;
+        return (
+          <FallbackComponent
+            error={this.state.error!}
+            reset={this.handleReset}
+          />
+        );
+      }
+
+      return (
+        <ErrorDialog
+          error={this.state.error}
+          onReset={this.handleReset}
+          open={true}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface ErrorDialogProps {
+  error: Error | null;
+  onReset: () => void;
+  open: boolean;
+}
+
+function ErrorDialog({ error, onReset, open }: ErrorDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={() => {}}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Ein Fehler ist aufgetreten</DialogTitle>
+          <DialogDescription>
+            Es ist ein unerwarteter Fehler aufgetreten. Bitte versuchen Sie es erneut.
+          </DialogDescription>
+        </DialogHeader>
+        
+        {error && (
+          <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-md">
+            <p className="text-sm text-red-800 dark:text-red-200 font-mono">
+              {error.message}
+            </p>
+          </div>
+        )}
+
+        <DialogFooter className="flex gap-2">
+          <Button variant="outline" onClick={() => window.location.reload()}>
+            Seite neu laden
+          </Button>
+          <Button onClick={onReset}>
+            Erneut versuchen
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Hook for handling async errors
+export function useErrorHandler() {
+  const handleError = React.useCallback((error: unknown) => {
+    console.error("Async error caught:", error);
+    showError(error);
+  }, []);
+
+  return handleError;
+}