Refactor error handling utilities

- Replace `showError` with a more versatile `showToast` utility.
- Add specific toast functions (`showErrorToast`, `showSuccessToast`, etc.) for better message handling.
- Remove `showError.ts` and migrate logic to `showToast.ts` for cleaner structure.
- Update `ErrorBoundary` and `useErrorHandler` to use the new `showToast` functions.

internal_frontend/app/customers/page.tsx

@@ -25,6 +25,7 @@ import {NewCustomerModal} from "@/components/customers/modal/NewCustomerModal";
 import {Customer} from "@/services/customers/entities/customer";
 import Link from "next/link";
 import {useErrorHandler} from "@/components/error-boundary";
+import {showError, showInfoToast} from "@/lib/ui/showToast";
 
 export default function CustomersPage() {
     const [customers, setCustomers] = useState<Customer[]>([]);
@@ -39,14 +40,17 @@ export default function CustomersPage() {
         fetch('/api/customers')
             .then(async (response) => {
                 if (!response.ok) {
+                    showError("Failed to fetch customers data")
                     throw new Error(`Failed to fetch customers: ${response.statusText}`);
                 }
                 return response.json();
             })
             .then((data) => {
+                showInfoToast("Customers data loaded")
                 setCustomers(data);
             })
             .catch((error) => {
+                showError("Failed to fetch customers data (1)")
                 handleError(error);
                 setCustomers([]);
             })

internal_frontend/components/error-boundary.tsx

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

internal_frontend/lib/ui/showError.ts

@@ -1,16 +0,0 @@
-// lib/ui/showError.ts
-import {toast} from "sonner";
-
-export function showError(error: unknown, fallback = "Ein unbekannter Fehler ist aufgetreten") {
-    let message: string;
-
-    if (error instanceof Error) {
-        message = error.message;
-    } else if (typeof error === "string") {
-        message = error;
-    } else {
-        message = fallback;
-    }
-
-    toast.error(message);
-}

internal_frontend/lib/ui/showToast.ts

@@ -0,0 +1,71 @@
+// lib/ui/showToast.ts
+import { toast } from "sonner";
+
+// Generic toast function
+export function showToast(message: string, type: 'success' | 'error' | 'info' | 'warning' = 'info') {
+    const options = {
+        dismissible: true,
+        closeButton: true,
+    };
+
+    switch (type) {
+        case 'success':
+            toast.success(message, options);
+            break;
+        case 'error':
+            toast.error(message, options);
+            break;
+        case 'info':
+            toast.info(message, options);
+            break;
+        case 'warning':
+            toast.warning(message, options);
+            break;
+        default:
+            toast(message, options);
+    }
+}
+
+// Specific toast functions with appropriate error handling
+export function showErrorToast(error: unknown, fallback = "Ein unbekannter Fehler ist aufgetreten") {
+    let message: string;
+
+    if (error instanceof Error) {
+        message = error.message;
+    } else if (typeof error === "string") {
+        message = error;
+    } else {
+        message = fallback;
+    }
+
+    toast.error(message, {
+        dismissible: true,
+        closeButton: true,
+    });
+}
+
+export function showSuccessToast(message: string) {
+    toast.success(message, {
+        dismissible: true,
+        closeButton: true,
+    });
+}
+
+export function showInfoToast(message: string) {
+    toast.info(message, {
+        dismissible: true,
+        closeButton: true,
+    });
+}
+
+export function showWarningToast(message: string) {
+    toast.warning(message, {
+        dismissible: true,
+        closeButton: true,
+    });
+}
+
+// Backward compatibility - keep the original showError function
+export function showError(error: unknown, fallback = "Ein unbekannter Fehler ist aufgetreten") {
+    showErrorToast(error, fallback);
+}