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/app/customers/page.tsx

@@ -24,6 +24,7 @@ import {ArrowRight} from "lucide-react";
 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";
 
 export default function CustomersPage() {
     const [customers, setCustomers] = useState<Customer[]>([]);
@@ -31,6 +32,7 @@ export default function CustomersPage() {
     const [loading, setLoading] = useState(true);
     const [page, setPage] = useState(1);
     const pageSize = 15;
+    const handleError = useErrorHandler();
 
     useEffect(() => {
         setLoading(true);
@@ -45,13 +47,13 @@ export default function CustomersPage() {
                 setCustomers(data);
             })
             .catch((error) => {
-                console.error('Error fetching customers:', error);
+                handleError(error);
                 setCustomers([]);
             })
             .finally(() => {
                 setLoading(false);
             });
-    }, []);
+    }, [handleError]);
 
     const filtered = useMemo(() => {
         if (customers.length === 0) return [];