From 5b13a0a526db1d574ca19cae0f1965f30dbce528 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 8 May 2026 08:41:27 +0200
Subject: [PATCH] chore: refine media path configuration in environment files

- Updated .env.example to clarify SHINKAN_MEDIA_HOST usage for different environments.
- Modified docker-compose files to set default values for SHINKAN_MEDIA_HOST, ensuring consistent media path handling in development and production.
- Enhanced comments for better understanding of media path configurations.
---
 .env.example                   |  2 +-
 docker-compose.dev-env.yml     |  4 +-
 docker-compose.yml             |  4 +-
 frontend/src/ErrorBoundary.jsx | 71 ++++++++++++++++++++++++++++++++++
 frontend/src/main.jsx          |  5 ++-
 5 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/ErrorBoundary.jsx

diff --git a/.env.example b/.env.example
index 8a5b98b..f1da55d 100644
--- a/.env.example
+++ b/.env.example
@@ -44,7 +44,7 @@ APP_URL=https://shinkan.jinkendo.de
 ALLOWED_ORIGINS=https://shinkan.jinkendo.de
 ENVIRONMENT=production
 
-# Host-Pfad auf dem Rechner (Bind-Mount); im Container siehe MEDIA_ROOT. Pflicht für docker compose up.
+# Host-Pfad (Bind-Mount). Compose-Defaults: Prod /shinkan-media, Dev /shinkan-media/dev — hier nur setzen zum Überschreiben.
 SHINKAN_MEDIA_HOST=/shinkan-media
 # Optional: Pfad im Container (FastAPI MEDIA_ROOT); Standard reicht fast immer.
 MEDIA_ROOT=/app/media
diff --git a/docker-compose.dev-env.yml b/docker-compose.dev-env.yml
index 8441394..cf158c8 100644
--- a/docker-compose.dev-env.yml
+++ b/docker-compose.dev-env.yml
@@ -1,4 +1,4 @@
-# Medien-Ablage: SHINKAN_MEDIA_HOST in der .env neben dieser Datei setzen (Host-Pfad, Bind-Mount).
+# Medien: Host-Pfad SHINKAN_MEDIA_HOST in .env überschreiben; Default /shinkan-media/dev (getrennt von Prod).
 
 services:
   postgres:
@@ -44,7 +44,7 @@ services:
       MEDIAWIKI_CATEGORY_MODELS: "${MEDIAWIKI_CATEGORY_MODELS:-Reifegradmodelle}"
       MEDIA_ROOT: "${MEDIA_ROOT:-/app/media}"
     volumes:
-      - ${SHINKAN_MEDIA_HOST:?SHINKAN_MEDIA_HOST_missing_in_dotenv}:${MEDIA_ROOT:-/app/media}
+      - ${SHINKAN_MEDIA_HOST:-/shinkan-media/dev}:${MEDIA_ROOT:-/app/media}
     ports:
       - "8098:8000"
     depends_on:
diff --git a/docker-compose.yml b/docker-compose.yml
index cdc244f..7a3da2b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -51,10 +51,10 @@ services:
       MEDIAWIKI_CATEGORY_EXERCISES: "${MEDIAWIKI_CATEGORY_EXERCISES:-Übungen}"
       MEDIAWIKI_CATEGORY_SKILLS: "${MEDIAWIKI_CATEGORY_SKILLS:-Fähigkeitsbeschreibung}"
       MEDIAWIKI_CATEGORY_METHODS: "${MEDIAWIKI_CATEGORY_METHODS:-Methodenbeschreibung}"
-      # Medien: Pfad im Container (meist /app/media). Host-Pfad für Bind-Mount: SHINKAN_MEDIA_HOST in .env (obligatorisch).
+      # Medien: Container-Pfad MEDIA_ROOT; Host-Pfad SHINKAN_MEDIA_HOST (in .env überschreiben; Default /shinkan-media).
       MEDIA_ROOT: "${MEDIA_ROOT:-/app/media}"
     volumes:
-      - ${SHINKAN_MEDIA_HOST:?SHINKAN_MEDIA_HOST_missing_in_dotenv}:${MEDIA_ROOT:-/app/media}
+      - ${SHINKAN_MEDIA_HOST:-/shinkan-media}:${MEDIA_ROOT:-/app/media}
     ports:
       - "8003:8000"
     depends_on:
diff --git a/frontend/src/ErrorBoundary.jsx b/frontend/src/ErrorBoundary.jsx
new file mode 100644
index 0000000..540bd68
--- /dev/null
+++ b/frontend/src/ErrorBoundary.jsx
@@ -0,0 +1,71 @@
+import React from 'react'
+
+/**
+ * Fängt Render-Fehler ab — verhindert „weißen Bildschirm“ ohne Hinweis (z. B. nach Deploy/Chaches).
+ */
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+
+  componentDidCatch(error, info) {
+    console.error('ErrorBoundary:', error, info?.componentStack)
+  }
+
+  render() {
+    if (this.state.error) {
+      const msg = this.state.error?.message || String(this.state.error)
+      return (
+        <div
+          style={{
+            minHeight: '100vh',
+            padding: '24px',
+            fontFamily: 'system-ui, sans-serif',
+            background: '#f8fafc',
+            color: '#0f172a',
+          }}
+        >
+          <h1 style={{ fontSize: '1.25rem', marginBottom: '12px' }}>Ein Fehler ist aufgetreten</h1>
+          <p style={{ marginBottom: '16px', maxWidth: '40rem', lineHeight: 1.5 }}>
+            Die Oberfläche konnte nicht geladen werden. Details siehe unten oder in der
+            Browser-Konsole (F12). Nach einem Deploy einen <strong>harten Reload</strong> (Cache leeren)
+            versuchen.
+          </p>
+          <pre
+            style={{
+              padding: '12px',
+              background: '#fff',
+              border: '1px solid #e2e8f0',
+              borderRadius: 8,
+              overflow: 'auto',
+              fontSize: '0.85rem',
+            }}
+          >
+            {msg}
+          </pre>
+          <p style={{ marginTop: '20px' }}>
+            <button
+              type="button"
+              style={{
+                padding: '10px 16px',
+                borderRadius: 8,
+                border: '1px solid #cbd5e1',
+                background: '#fff',
+                cursor: 'pointer',
+              }}
+              onClick={() => window.location.reload()}
+            >
+              Seite neu laden
+            </button>
+          </p>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 8d63283..b264038 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
+import ErrorBoundary from './ErrorBoundary.jsx'
 import './app.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>,
 )