86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
# 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
|