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