feat: enhance Nginx configuration and API error handling

- Updated Nginx configuration to improve service dependency resolution and proxying for API and media requests.
- Added a resolver directive to mitigate sporadic 502 errors related to backend container IP changes.
- Enhanced error handling in the API utility to provide clearer feedback for various HTTP errors, including specific guidance for 502 Bad Gateway responses.

frontend/nginx.conf

@@ -4,12 +4,17 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
+    # Docker-Embedded DNS: Hostname »backend« bei Container-Neustarts neu auflösen
+    # — verringert sporadische 502, wenn sich nur die Backend-Container-IP geändert hat.
+    resolver 127.0.0.11 valid=10s ipv6=off;
+
     # Uploads (Übungsmedien) und API erreichen Clients unter derselben Host-URL wie die SPA —
     # dafür muss Nginx zur FastAPI-Instanz im Compose-Netz weiterleiten.
     client_max_body_size 64m;
 
     location ^~ /api/ {
-        proxy_pass http://backend:8000;
+        set $docker_backend_svc backend;
+        proxy_pass http://$docker_backend_svc:8000$request_uri;
         proxy_http_version 1.1;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
@@ -21,7 +26,8 @@ server {
     }
 
     location ^~ /media/ {
-        proxy_pass http://backend:8000;
+        set $docker_backend_svc backend;
+        proxy_pass http://$docker_backend_svc:8000$request_uri;
         proxy_http_version 1.1;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
@@ -30,7 +36,8 @@ server {
     }
 
     location = /health {
-        proxy_pass http://backend:8000/health;
+        set $hc_upstream backend;
+        proxy_pass http://$hc_upstream:8000/health;
         proxy_http_version 1.1;
         proxy_set_header Host $host;
     }

frontend/src/utils/api.js

@@ -32,8 +32,24 @@ async function request(endpoint, options = {}) {
     })
 
     if (!response.ok) {
-      const error = await response.json().catch(() => ({ detail: 'Unknown error' }))
+      const text = await response.text()
-      throw new Error(error.detail || `HTTP ${response.status}`)
+      let parsed = null
+      try {
+        parsed = JSON.parse(text)
+      } catch {
+        parsed = null
+      }
+      if (parsed?.detail != null) {
+        const d = parsed.detail
+        throw new Error(typeof d === 'string' ? d : JSON.stringify(d))
+      }
+      if (response.status === 502) {
+        throw new Error(
+          'HTTP 502 (Bad Gateway): Der Reverse-Proxy hat die API nicht korrekt erreicht. Ist `shinkan-api` aktiv (`docker compose ps`, `docker logs shinkan-api`)? Bei Host-Routing nur einen Weg verwenden — alles auf Port 3003 (Nginx nach `backend:8000`) oder sauber `/api` → Backend-Port.'
+        )
+      }
+      const snippet = (text || '').replace(/\s+/g, ' ').trim().slice(0, 180)
+      throw new Error(snippet ? `HTTP ${response.status}: ${snippet}` : `HTTP ${response.status}`)
     }
 
     return response.json()