From dcac53d1813f37d17121b021e32fd1970893fb15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisi=C3=A1rio=20Couto?= <elisiario@couto.io>
Date: Tue, 9 Sep 2025 15:07:40 +0100
Subject: [PATCH] Fix frontend health check to properly detect API
 unavailability

- Add isError to useQuery destructuring to handle network errors
- Improve health check query function to throw on HTTP errors
- Update status display logic to show 'Disconnected' when API is unreachable
- Ensure proper error handling for both network failures and HTTP status errors
---
 frontend/src/components/Dashboard.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
index 1316f18..7f60889 100644
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -30,10 +30,13 @@ export default function Dashboard() {
     queryFn: apiClient.getAccounts,
   });
 
-  const { data: healthStatus, isLoading: healthLoading } = useQuery({
+  const { data: healthStatus, isLoading: healthLoading, isError: healthError } = useQuery({
     queryKey: ['health'],
     queryFn: async () => {
       const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:8000'}/api/v1/health`);
+      if (!response.ok) {
+        throw new Error(`Health check failed: ${response.status}`);
+      }
       return response.json();
     },
     refetchInterval: 30000, // Check every 30 seconds
@@ -146,16 +149,16 @@ export default function Dashboard() {
                     <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
                     <span className="text-sm text-gray-600">Checking...</span>
                   </>
-                ) : healthStatus?.success ? (
-                  <>
-                    <Wifi className="h-4 w-4 text-green-500" />
-                    <span className="text-sm text-gray-600">Connected</span>
-                  </>
-                ) : (
+                ) : healthError || !healthStatus?.success ? (
                   <>
                     <WifiOff className="h-4 w-4 text-red-500" />
                     <span className="text-sm text-red-500">Disconnected</span>
                   </>
+                ) : (
+                  <>
+                    <Wifi className="h-4 w-4 text-green-500" />
+                    <span className="text-sm text-gray-600">Connected</span>
+                  </>
                 )}
               </div>
             </div>