Frontend Resilience Features

The LabFusion frontend is designed to work gracefully even when backend services are unavailable.

Features

1. Service Status Monitoring

Real-time Health Checks: Monitors all backend services every 30 seconds
Service Status Banner: Shows current service availability status
Automatic Retry: Attempts to reconnect when services come back online

2. Graceful Degradation

Fallback Data: Uses sample data when services are unavailable
Error Handling: Displays helpful error messages instead of crashes
Loading States: Shows loading indicators during data fetching

3. Offline Mode

Offline Banner: Clear indication when all services are down
Instructions: Step-by-step guide to start backend services
Retry Button: Easy way to attempt reconnection

4. Error Recovery

Timeout Handling: 5-second timeout for all API calls
Connection Error Detection: Distinguishes between different error types
User-Friendly Messages: Clear explanations of what's happening

Service Status States

Online

All services are running normally
No status banner shown
Full functionality available

Partial

Some services are unavailable
Warning banner with service details
Limited functionality with fallback data

Offline

All backend services are down
Offline mode banner with instructions
Frontend runs with sample data only

API Configuration

The frontend automatically detects service availability:

// Service URLs (configurable via environment variables)
API_GATEWAY_URL=http://localhost:8080
SERVICE_ADAPTERS_URL=http://localhost:8000
API_DOCS_URL=http://localhost:8083

Development

Running Frontend Only

cd frontend
npm install
npm start

The frontend will start and show offline mode until backend services are started.

Testing Resilience

Start frontend: npm start
Observe offline mode banner
Start backend: docker-compose up -d
Watch automatic reconnection
Stop backend services to test fallback

Error Messages

Connection Timeout: "Request timeout - service may be unavailable"
Service Error: "Service error: [HTTP status]"
Service Unavailable: "Service unavailable - check if backend is running"
Unknown Error: "Unknown error occurred"

Benefits

Developer Experience: Frontend can be developed independently
User Experience: Clear feedback about service status
Debugging: Easy to identify which services are having issues
Reliability: App doesn't crash when services are down

2.6 KiB Raw Blame History