nikdoof/leggen
1
1
Fork 0
mirror of https://github.com/elisiariocouto/leggen.git synced 2025-12-14 15:32:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix frontend health check to properly detect API unavailability

Browse Source 
- 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
This commit is contained in:
Elisiário Couto
2025-09-09 15:07:40 +01:00
committed by Elisiário Couto
parent cb2e70e42d
commit dcac53d181
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/Dashboard.tsx
View File

@@ -30,10 +30,13 @@ export default function Dashboard() {
queryFn: apiClient.getAccounts, queryFn: apiClient.getAccounts,
}); });
const { data: healthStatus, isLoading: healthLoading } = useQuery({ const { data: healthStatus, isLoading: healthLoading, isError: healthError } = useQuery({
queryKey: ['health'], queryKey: ['health'],
queryFn: async () => { queryFn: async () => {
const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:8000'}/api/v1/health`); 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(); return response.json();
}, },
refetchInterval: 30000, // Check every 30 seconds 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" /> <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
<span className="text-sm text-gray-600">Checking...</span> <span className="text-sm text-gray-600">Checking...</span>
</> </>
) : healthStatus?.success ? ( ) : healthError || !healthStatus?.success ? (
<>
<Wifi className="h-4 w-4 text-green-500" />
<span className="text-sm text-gray-600">Connected</span>
</>
) : (
<> <>
<WifiOff className="h-4 w-4 text-red-500" /> <WifiOff className="h-4 w-4 text-red-500" />
<span className="text-sm text-red-500">Disconnected</span> <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>
</div> </div>