matthias.lotz
25dda32c4e
- Add ErrorBoundary component for React error handling - Create animated error pages (403, 404, 500, 502, 503) - Implement ErrorAnimation component with seven-segment display - Add apiClient (axios) and apiFetch (fetch) wrappers with automatic error page redirects - Migrate critical API calls to use new error handling - Update font from Roboto to Open Sans across all components - Remove unused CLIENT_URL from docker-compose files - Rename 404Page.css to ErrorPage.css for consistency - Add comprehensive ERROR_HANDLING.md documentation
150 lines
6.2 KiB
Markdown
150 lines
6.2 KiB
Markdown
# Error Handling System
|
|
|
|
Das Frontend verfügt jetzt über ein vollständiges Error Handling System für HTTP-Fehler und React-Fehler.
|
|
|
|
## ✅ Migration abgeschlossen
|
|
|
|
Alle kritischen API-Aufrufe wurden auf das neue Error-Handling-System migriert:
|
|
- ✅ `sendRequest.js` → `apiClient` (axios-basiert)
|
|
- ✅ `batchUpload.js` → `apiFetch`
|
|
- ✅ `PublicGroupImagesPage.js` → `apiFetch`
|
|
- ✅ `ManagementPortalPage.js` → `apiFetch`
|
|
- ✅ `DeleteGroupButton.js` → `apiFetch`
|
|
- ✅ `ConsentManager.js` → `apiFetch`
|
|
- ✅ `ImageDescriptionManager.js` → `apiFetch`
|
|
- ✅ `GroupMetadataEditor.js` → `apiFetch`
|
|
|
|
**Hinweis:** `adminApi.js` und `socialMediaApi.js` verwenden ihr eigenes `adminFetch`-System mit CSRF-Token-Handling und wurden bewusst nicht migriert.
|
|
|
|
## Komponenten
|
|
|
|
### 1. ErrorBoundary (`/Components/ComponentUtils/ErrorBoundary.js`)
|
|
- Fängt React-Fehler (z.B. Rendering-Fehler) ab
|
|
- Zeigt automatisch die 500-Error-Page bei unerwarteten Fehlern
|
|
- Loggt Fehlerdetails in der Konsole für Debugging
|
|
|
|
### 2. API Client (`/Utils/apiClient.js`)
|
|
- Axios-Instance mit Response-Interceptor
|
|
- Für FormData-Uploads (z.B. Bilder)
|
|
- Automatische Weiterleitung zu Error-Pages basierend auf HTTP-Statuscode
|
|
|
|
### 3. API Fetch Wrapper (`/Utils/apiFetch.js`)
|
|
- Native Fetch-Wrapper mit Error-Handling
|
|
- Für Standard-JSON-API-Aufrufe
|
|
- Automatische Weiterleitung zu Error-Pages:
|
|
- **403 Forbidden** → `/error/403`
|
|
- **500 Internal Server Error** → `/error/500`
|
|
- **502 Bad Gateway** → `/error/502`
|
|
- **503 Service Unavailable** → `/error/503`
|
|
|
|
### 4. Error Pages Routes (`App.js`)
|
|
- Neue Routes für alle Error-Pages:
|
|
- `/error/403` - Forbidden
|
|
- `/error/500` - Internal Server Error
|
|
- `/error/502` - Bad Gateway
|
|
- `/error/503` - Service Unavailable
|
|
- `*` - 404 Not Found (catch-all)
|
|
|
|
## Verwendung
|
|
|
|
### Für File-Uploads (FormData)
|
|
Verwende `apiClient` für multipart/form-data Uploads:
|
|
|
|
```javascript
|
|
import apiClient from '../Utils/apiClient';
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
apiClient.post('/upload', formData, {
|
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
})
|
|
.then(response => {
|
|
// Success handling
|
|
})
|
|
.catch(error => {
|
|
// Automatische Weiterleitung zu Error-Page bei 403, 500, 502, 503
|
|
});
|
|
```
|
|
|
|
### Für JSON-API-Aufrufe
|
|
Verwende `apiFetch` oder Helper-Funktionen:
|
|
|
|
```javascript
|
|
import { apiFetch, apiGet, apiPost } from '../Utils/apiFetch';
|
|
|
|
// GET Request
|
|
const data = await apiGet('/api/groups');
|
|
|
|
// POST Request
|
|
const result = await apiPost('/api/groups', { name: 'Test' });
|
|
|
|
// Custom Request
|
|
const response = await apiFetch('/api/groups/123', {
|
|
method: 'DELETE'
|
|
});
|
|
```
|
|
|
|
## Backend Error Codes
|
|
|
|
Das Backend liefert bereits folgende Statuscodes:
|
|
|
|
- **403**: CSRF-Fehler, fehlende Admin-Session, public host auf internal routes
|
|
- **500**: Datenbank-Fehler, Upload-Fehler, Migration-Fehler
|
|
- **502**: Nicht implementiert (wird von Reverse Proxy geliefert)
|
|
- **503**: Nicht implementiert (für Wartungsmodus vorgesehen)
|
|
|
|
## Testing
|
|
|
|
Um die Error-Pages zu testen:
|
|
|
|
1. **403**: Versuche ohne Login auf Admin-Routen zuzugreifen
|
|
2. **404**: Navigiere zu einer nicht existierenden Route (z.B. `/nicht-vorhanden`)
|
|
3. **500**: Simuliere Backend-Fehler
|
|
4. **502/503**: Manuell über `/error/502` oder `/error/503` aufrufen
|
|
|
|
## Architektur
|
|
|
|
```
|
|
┌─────────────────────────────────────────────┐
|
|
│ App.js │
|
|
│ ┌───────────────────────────────────────┐ │
|
|
│ │ ErrorBoundary │ │
|
|
│ │ (fängt React-Fehler) │ │
|
|
│ │ ┌─────────────────────────────────┐ │ │
|
|
│ │ │ Router │ │ │
|
|
│ │ │ ┌───────────────────────────┐ │ │ │
|
|
│ │ │ │ Routes │ │ │ │
|
|
│ │ │ │ - / │ │ │ │
|
|
│ │ │ │ - /error/403 │ │ │ │
|
|
│ │ │ │ - /error/500 │ │ │ │
|
|
│ │ │ │ - /error/502 │ │ │ │
|
|
│ │ │ │ - /error/503 │ │ │ │
|
|
│ │ │ │ - * (404) │ │ │ │
|
|
│ │ │ └───────────────────────────┘ │ │ │
|
|
│ │ └─────────────────────────────────┘ │ │
|
|
│ └───────────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────────────────┐
|
|
│ API Layer │
|
|
├─────────────────────────────────────────────┤
|
|
│ apiClient.js (axios) │
|
|
│ - FormData/File-Uploads │
|
|
│ - Response Interceptor │
|
|
│ │
|
|
│ apiFetch.js (fetch) │
|
|
│ - JSON-API-Aufrufe │
|
|
│ - Error-Response-Handling │
|
|
│ │
|
|
│ adminApi.js (fetch + CSRF) │
|
|
│ - Admin-Authentifizierung │
|
|
│ - CSRF-Token-Management │
|
|
│ - Nicht migriert (eigenes System) │
|
|
└─────────────────────────────────────────────┘
|
|
|
|
Error-Flow:
|
|
HTTP 403/500/502/503 → Interceptor/Handler → window.location.href → Error-Page
|
|
React Error → ErrorBoundary → 500-Page
|
|
```
|