# 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:

```javascript
// 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
```bash
cd frontend
npm install
npm start
```

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

### Testing Resilience
1. Start frontend: `npm start`
2. Observe offline mode banner
3. Start backend: `docker-compose up -d`
4. Watch automatic reconnection
5. 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