matthias.lotz 25dda32c4e feat: Error handling system and animated error pages

- 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

2025-11-26 22:42:55 +01:00

6.2 KiB

Raw Blame History

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:

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:

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:

403: Versuche ohne Login auf Admin-Routen zuzugreifen
404: Navigiere zu einer nicht existierenden Route (z.B. /nicht-vorhanden)
500: Simuliere Backend-Fehler
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

6.2 KiB Raw Blame History