feat: Add production troubleshooting tools and remove eye icon from ActivityFeed

- Add diagnose-production.sh script for comprehensive production diagnostics - Add fix-production.sh script for automatic production issue resolution - Add PRODUCTION_TROUBLESHOOTING.md documentation with step-by-step guides - Remove eye icon from ActivityFeed header (keep only X button for minimize) - Improve error handling and network connectivity checks
2026-01-09 20:19:54 +01:00
parent 37178ce421
commit b487f4ba75
4 changed files with 562 additions and 32 deletions
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -13,8 +13,6 @@ import {
  ChevronUp,
  Activity,
  X,
-  Eye,
-  EyeOff,
 } from "lucide-react";

 // Types matching your n8n output
@@ -1190,7 +1188,7 @@ export default function ActivityFeed() {
            className="flex items-center gap-2 text-white/60 hover:text-white transition-colors"
            title="Activity tracking is disabled. Click to enable."
          >
-            <EyeOff size={16} />
+            <Activity size={16} />
            <span className="text-xs">Tracking disabled</span>
          </button>
        </motion.div>
@@ -1218,19 +1216,8 @@ export default function ActivityFeed() {
                <p className="text-[10px] text-white/50">Loading...</p>
              </div>
            </div>
-            <div className="flex items-center gap-2">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggleTracking();
-                }}
-                className="p-1.5 hover:bg-white/10 rounded-lg transition-colors"
-                title="Disable activity tracking"
-                aria-label="Disable tracking"
-              >
-                <Eye size={14} className="text-white/60 hover:text-white" />
-              </button>
-            </div>
+          <div className="flex items-center gap-2">
+          </div>
          </div>
        </motion.div>
      </div>
@@ -1299,22 +1286,6 @@ export default function ActivityFeed() {
            </div>
          </div>
          <div className="flex items-center gap-2">
-            {/* Toggle Tracking Button */}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleTracking();
-              }}
-              className="p-1.5 hover:bg-white/10 rounded-lg transition-colors"
-              title={isTrackingEnabled ? "Disable activity tracking" : "Enable activity tracking"}
-              aria-label={isTrackingEnabled ? "Disable tracking" : "Enable tracking"}
-            >
-              {isTrackingEnabled ? (
-                <Eye size={14} className="text-white/60 hover:text-white" />
-              ) : (
-                <EyeOff size={14} className="text-white/60 hover:text-white" />
-              )}
-            </button>
            <div
              onClick={(e) => {
                e.stopPropagation();
--- a/docs/PRODUCTION_TROUBLESHOOTING.md
+++ b/docs/PRODUCTION_TROUBLESHOOTING.md
@@ -0,0 +1,283 @@
+# Production Troubleshooting Guide
+
+## 502 Bad Gateway Errors
+
+### Symptome
+- Website zeigt 502 Bad Gateway
+- Activity Feed zeigt nur "Loading"
+- Chat funktioniert nicht
+- API-Endpunkte geben 502 zurück
+
+### Ursachen
+1. **Container läuft nicht** - Der `portfolio-app` Container ist gestoppt oder crashed
+2. **Proxy Netzwerk fehlt** - Das `proxy` Netzwerk existiert nicht oder Container ist nicht verbunden
+3. **Nginx Proxy Manager Konfiguration** - Falsche Hostname/IP oder Port-Konfiguration
+4. **Container Health Check fehlgeschlagen** - Container läuft, aber die Anwendung ist nicht bereit
+
+### Lösungsschritte
+
+#### 1. Diagnose ausführen
+```bash
+./scripts/diagnose-production.sh
+```
+
+Dieses Script prüft:
+- Container-Status
+- Netzwerk-Verbindungen
+- Health Checks
+- API-Endpunkte
+- Environment Variables
+
+#### 2. Automatischer Fix
+```bash
+./scripts/fix-production.sh
+```
+
+Dieses Script:
+- Erstellt das `proxy` Netzwerk falls es fehlt
+- Verbindet den Container mit dem `proxy` Netzwerk
+- Startet den Container neu falls nötig
+- Prüft Health Checks
+
+#### 3. Manuelle Schritte
+
+**Container-Status prüfen:**
+```bash
+docker ps -a | grep portfolio-app
+docker logs portfolio-app --tail=50
+```
+
+**Proxy Netzwerk prüfen:**
+```bash
+docker network ls | grep proxy
+docker inspect portfolio-app | grep -A 10 Networks
+```
+
+**Container neu starten:**
+```bash
+cd /workspace/denshooter/portfolio
+docker compose -f docker-compose.production.yml restart portfolio
+```
+
+**Container mit Proxy-Netzwerk verbinden:**
+```bash
+# Falls Netzwerk fehlt
+docker network create proxy
+
+# Container neu erstellen
+docker compose -f docker-compose.production.yml up -d --force-recreate
+```
+
+#### 4. Nginx Proxy Manager Konfiguration prüfen
+
+1. **Gehe zu Nginx Proxy Manager** → Hosts → Proxy Hosts
+2. **Öffne die Konfiguration für `dk0.dev`**
+3. **Details Tab prüfen:**
+   - **Forward Hostname/IP:** Muss `portfolio-app` sein (NICHT `localhost` oder `127.0.0.1`)
+   - **Forward Port:** `3000`
+   - **Forward Scheme:** `http`
+4. **Advanced Tab prüfen:**
+   ```
+   proxy_set_header Host $host;
+   proxy_set_header X-Real-IP $remote_addr;
+   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+   proxy_set_header X-Forwarded-Proto $scheme;
+   ```
+
+#### 5. Container-Logs prüfen
+```bash
+# Alle Logs
+docker logs portfolio-app
+
+# Letzte 100 Zeilen
+docker logs portfolio-app --tail=100
+
+# Logs in Echtzeit
+docker logs portfolio-app -f
+```
+
+## React Hydration Error #418
+
+### Symptome
+- Browser Console zeigt: `Error: Minified React error #418`
+- Website funktioniert, aber es gibt Warnungen
+- Unterschiede zwischen Server- und Client-Rendering
+
+### Ursachen
+1. **Client-only Komponenten werden auf dem Server gerendert**
+2. **Unterschiedliche Daten zwischen Server und Client**
+3. **Browser-spezifische APIs auf dem Server**
+
+### Lösung
+
+**ActivityFeed Komponente:**
+- Die Komponente ist bereits als `"use client"` markiert
+- Verwendet `ClientOnly` Wrapper für client-only Features
+- Loading-State verhindert Hydration-Mismatches
+
+**Wenn der Fehler weiterhin auftritt:**
+1. Browser Cache leeren
+2. Hard Refresh (Ctrl+Shift+R / Cmd+Shift+R)
+3. Container-Logs auf React-Fehler prüfen
+
+## Activity Feed zeigt nur "Loading"
+
+### Ursachen
+1. **n8n Webhook nicht erreichbar** - `N8N_WEBHOOK_URL` ist nicht gesetzt oder falsch
+2. **API-Endpunkt gibt Fehler zurück** - `/api/n8n/status` funktioniert nicht
+3. **CORS-Probleme** - n8n blockiert Requests
+4. **Rate Limiting** - Zu viele Requests
+
+### Lösung
+
+**1. Environment Variables prüfen:**
+```bash
+docker exec portfolio-app printenv | grep N8N
+```
+
+**2. API-Endpunkt direkt testen:**
+```bash
+# Von außen
+curl https://dk0.dev/api/n8n/status
+
+# Von innen
+docker exec portfolio-app curl http://localhost:3000/api/n8n/status
+```
+
+**3. n8n Webhook testen:**
+```bash
+# Ersetze WEBHOOK_URL mit deiner tatsächlichen URL
+curl "https://n8n.dk0.dev/webhook/denshooter-71242/status"
+```
+
+**4. Gitea Variables prüfen:**
+- Gehe zu Gitea → Repository → Settings → Variables
+- Prüfe ob `N8N_WEBHOOK_URL`, `N8N_SECRET_TOKEN`, `N8N_API_KEY` gesetzt sind
+- Stelle sicher, dass diese auch in `docker-compose.production.yml` verwendet werden
+
+## Chat funktioniert nicht
+
+### Ursachen
+1. **n8n Webhook nicht erreichbar** - Gleiche Ursache wie Activity Feed
+2. **API-Endpunkt gibt 502 zurück** - Container-Problem
+3. **CORS-Probleme** - n8n blockiert Requests
+4. **Timeout** - n8n antwortet zu langsam
+
+### Lösung
+
+**1. API-Endpunkt testen:**
+```bash
+# POST Request testen
+curl -X POST https://dk0.dev/api/n8n/chat \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello"}'
+```
+
+**2. Container-Logs prüfen:**
+```bash
+docker logs portfolio-app | grep -i "chat\|n8n"
+```
+
+**3. n8n Webhook direkt testen:**
+```bash
+curl -X POST "https://n8n.dk0.dev/webhook/chat" \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello", "history": []}'
+```
+
+## Häufige Probleme und Lösungen
+
+### Problem: Container startet, aber Health Check schlägt fehl
+**Lösung:**
+```bash
+# Prüfe ob curl im Container verfügbar ist
+docker exec portfolio-app which curl
+
+# Teste Health Endpoint manuell
+docker exec portfolio-app curl -f http://localhost:3000/api/health
+```
+
+### Problem: Container läuft, aber Port 3000 ist nicht erreichbar
+**Lösung:**
+```bash
+# Prüfe Port-Mapping
+docker port portfolio-app
+
+# Teste von innen
+docker exec portfolio-app curl http://localhost:3000/api/health
+
+# Teste von außen (sollte funktionieren wenn Port gemappt ist)
+curl http://localhost:3000/api/health
+```
+
+### Problem: Proxy Netzwerk existiert nicht
+**Lösung:**
+```bash
+# Erstelle Proxy Netzwerk
+docker network create proxy
+
+# Verbinde Container
+docker network connect proxy portfolio-app
+
+# Oder Container neu erstellen
+docker compose -f docker-compose.production.yml up -d --force-recreate
+```
+
+### Problem: Nginx Proxy Manager kann Container nicht erreichen
+**Lösung:**
+1. Stelle sicher, dass beide im `proxy` Netzwerk sind:
+   ```bash
+   docker network inspect proxy
+   ```
+2. Prüfe Nginx Proxy Manager Container:
+   ```bash
+   docker ps | grep nginx
+   docker inspect <nginx-container> | grep -A 10 Networks
+   ```
+3. Teste Verbindung von Nginx Container zu Portfolio Container:
+   ```bash
+   docker exec <nginx-container> ping portfolio-app
+   ```
+
+## Nützliche Befehle
+
+```bash
+# Container-Status
+docker ps -a | grep portfolio
+
+# Container-Logs
+docker logs portfolio-app --tail=100 -f
+
+# Container-Netzwerke
+docker inspect portfolio-app | grep -A 20 Networks
+
+# Health Check Status
+docker inspect portfolio-app --format='{{.State.Health.Status}}'
+
+# Environment Variables
+docker exec portfolio-app printenv
+
+# Shell im Container öffnen
+docker exec -it portfolio-app sh
+
+# Container neu starten
+docker compose -f docker-compose.production.yml restart portfolio
+
+# Container neu erstellen
+docker compose -f docker-compose.production.yml up -d --force-recreate
+
+# Alle Container stoppen
+docker compose -f docker-compose.production.yml down
+
+# Container mit Logs starten
+docker compose -f docker-compose.production.yml up
+```
+
+## Support
+
+Wenn die Probleme weiterhin bestehen:
+1. Führe `./scripts/diagnose-production.sh` aus
+2. Speichere die Ausgabe
+3. Prüfe Container-Logs: `docker logs portfolio-app --tail=100`
+4. Prüfe Nginx Proxy Manager Logs
+5. Erstelle ein Issue mit allen Informationen
--- a/scripts/diagnose-production.sh
+++ b/scripts/diagnose-production.sh
@@ -0,0 +1,158 @@
+#!/bin/bash
+# Production diagnosis script
+# Checks container status, network connectivity, and API endpoints
+
+set -e
+
+echo "🔍 Production Diagnosis Script"
+echo "=============================="
+echo ""
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Check if docker is running
+if ! docker info > /dev/null 2>&1; then
+    echo -e "${RED}❌ Docker is not running${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}✅ Docker is running${NC}"
+echo ""
+
+# Check container status
+echo "📦 Container Status:"
+echo "-------------------"
+CONTAINER_ID=$(docker ps -q -f "name=portfolio-app")
+if [ -z "$CONTAINER_ID" ]; then
+    echo -e "${RED}❌ portfolio-app container is not running${NC}"
+    echo ""
+    echo "Checking for stopped containers:"
+    docker ps -a -f "name=portfolio-app" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
+    exit 1
+else
+    echo -e "${GREEN}✅ Container is running (ID: ${CONTAINER_ID})${NC}"
+    docker ps -f "name=portfolio-app" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}\t{{.Health}}"
+fi
+echo ""
+
+# Check container health
+echo "🏥 Container Health:"
+echo "-------------------"
+HEALTH=$(docker inspect portfolio-app --format='{{.State.Health.Status}}' 2>/dev/null || echo "no-healthcheck")
+STATUS=$(docker inspect portfolio-app --format='{{.State.Status}}' 2>/dev/null || echo "unknown")
+echo "Status: $STATUS"
+echo "Health: $HEALTH"
+echo ""
+
+# Check networks
+echo "🌐 Network Connectivity:"
+echo "----------------------"
+if docker network ls | grep -q "proxy"; then
+    echo -e "${GREEN}✅ 'proxy' network exists${NC}"
+    if docker inspect portfolio-app --format='{{range $net, $conf := .NetworkSettings.Networks}}{{$net}} {{end}}' | grep -q "proxy"; then
+        echo -e "${GREEN}✅ Container is connected to 'proxy' network${NC}"
+    else
+        echo -e "${YELLOW}⚠️  Container is NOT connected to 'proxy' network${NC}"
+        echo "Connected networks:"
+        docker inspect portfolio-app --format='{{range $net, $conf := .NetworkSettings.Networks}}{{$net}} {{end}}'
+    fi
+else
+    echo -e "${RED}❌ 'proxy' network does not exist${NC}"
+    echo "Creating proxy network..."
+    docker network create proxy || echo "Failed to create network (may already exist)"
+fi
+echo ""
+
+# Check port mapping
+echo "🔌 Port Mapping:"
+echo "---------------"
+PORT_MAPPING=$(docker port portfolio-app 2>/dev/null | grep 3000 || echo "No port mapping found")
+if [ -n "$PORT_MAPPING" ]; then
+    echo -e "${GREEN}✅ Port mapping: $PORT_MAPPING${NC}"
+else
+    echo -e "${RED}❌ No port mapping found for port 3000${NC}"
+fi
+echo ""
+
+# Test from inside container
+echo "🧪 Testing from inside container:"
+echo "-------------------------------"
+if docker exec portfolio-app curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
+    echo -e "${GREEN}✅ Health endpoint responds from inside container${NC}"
+    docker exec portfolio-app curl -s http://localhost:3000/api/health | head -5
+else
+    echo -e "${RED}❌ Health endpoint does not respond from inside container${NC}"
+    echo "Container logs (last 20 lines):"
+    docker logs portfolio-app --tail=20
+fi
+echo ""
+
+# Test from host
+echo "🧪 Testing from host:"
+echo "-------------------"
+if curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
+    echo -e "${GREEN}✅ Health endpoint responds from host${NC}"
+    curl -s http://localhost:3000/api/health | head -5
+else
+    echo -e "${RED}❌ Health endpoint does not respond from host${NC}"
+    echo "This is normal if the container is only accessible via proxy network"
+fi
+echo ""
+
+# Check environment variables
+echo "🔐 Environment Variables:"
+echo "------------------------"
+echo "N8N_WEBHOOK_URL: $(docker exec portfolio-app printenv N8N_WEBHOOK_URL 2>/dev/null | grep -v '^$' || echo 'NOT SET')"
+echo "N8N_SECRET_TOKEN: $(docker exec portfolio-app printenv N8N_SECRET_TOKEN 2>/dev/null | grep -v '^$' | sed 's/./*/g' || echo 'NOT SET')"
+echo "N8N_API_KEY: $(docker exec portfolio-app printenv N8N_API_KEY 2>/dev/null | grep -v '^$' | sed 's/./*/g' || echo 'NOT SET')"
+echo "NODE_ENV: $(docker exec portfolio-app printenv NODE_ENV 2>/dev/null || echo 'NOT SET')"
+echo "NEXT_PUBLIC_BASE_URL: $(docker exec portfolio-app printenv NEXT_PUBLIC_BASE_URL 2>/dev/null || echo 'NOT SET')"
+echo ""
+
+# Check container logs for errors
+echo "📋 Recent Container Logs (last 30 lines):"
+echo "----------------------------------------"
+docker logs portfolio-app --tail=30 2>&1 | tail -30
+echo ""
+
+# Check API endpoints
+echo "🌐 Testing API Endpoints:"
+echo "------------------------"
+ENDPOINTS=("/api/health" "/api/n8n/status" "/api/n8n/chat")
+for endpoint in "${ENDPOINTS[@]}"; do
+    echo -n "Testing $endpoint: "
+    if docker exec portfolio-app curl -f -s --max-time 5 "http://localhost:3000${endpoint}" > /dev/null 2>&1; then
+        echo -e "${GREEN}✅ OK${NC}"
+    else
+        echo -e "${RED}❌ FAILED${NC}"
+    fi
+done
+echo ""
+
+# Summary
+echo "📊 Summary:"
+echo "---------"
+if [ "$STATUS" == "running" ] && [ "$HEALTH" == "healthy" ]; then
+    echo -e "${GREEN}✅ Container appears to be healthy${NC}"
+    echo ""
+    echo "If you're still seeing 502 errors:"
+    echo "1. Check Nginx Proxy Manager configuration"
+    echo "2. Ensure the proxy host points to: portfolio-app:3000 (not localhost:3000)"
+    echo "3. Ensure the proxy network is correctly configured"
+    echo "4. Check Nginx Proxy Manager logs"
+else
+    echo -e "${RED}❌ Container has issues${NC}"
+    echo ""
+    echo "Recommended actions:"
+    if [ "$STATUS" != "running" ]; then
+        echo "1. Restart the container: docker compose -f docker-compose.production.yml restart portfolio"
+    fi
+    if [ "$HEALTH" != "healthy" ]; then
+        echo "2. Check container logs: docker logs portfolio-app --tail=50"
+        echo "3. Check if the application is starting correctly"
+    fi
+fi
--- a/scripts/fix-production.sh
+++ b/scripts/fix-production.sh
@@ -0,0 +1,118 @@
+#!/bin/bash
+# Quick fix script for production issues
+# Ensures proxy network exists and container is properly connected
+
+set -e
+
+echo "🔧 Production Fix Script"
+echo "======================="
+echo ""
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+COMPOSE_FILE="docker-compose.production.yml"
+
+# Check if proxy network exists
+echo "🌐 Checking proxy network..."
+if docker network ls | grep -q "proxy"; then
+    echo -e "${GREEN}✅ 'proxy' network exists${NC}"
+else
+    echo -e "${YELLOW}⚠️  'proxy' network does not exist. Creating...${NC}"
+    docker network create proxy || {
+        echo -e "${RED}❌ Failed to create proxy network${NC}"
+        echo "This might be because Nginx Proxy Manager hasn't created it yet."
+        echo "Please ensure Nginx Proxy Manager is running and has created the 'proxy' network."
+        exit 1
+    }
+    echo -e "${GREEN}✅ 'proxy' network created${NC}"
+fi
+echo ""
+
+# Check if container is running
+echo "📦 Checking container status..."
+CONTAINER_ID=$(docker ps -q -f "name=portfolio-app")
+if [ -z "$CONTAINER_ID" ]; then
+    echo -e "${RED}❌ Container is not running${NC}"
+    echo "Starting container..."
+    docker compose -f $COMPOSE_FILE up -d
+    echo "Waiting for container to start..."
+    sleep 10
+else
+    echo -e "${GREEN}✅ Container is running${NC}"
+fi
+echo ""
+
+# Check if container is connected to proxy network
+echo "🔗 Checking network connectivity..."
+if docker inspect portfolio-app --format='{{range $net, $conf := .NetworkSettings.Networks}}{{$net}} {{end}}' | grep -q "proxy"; then
+    echo -e "${GREEN}✅ Container is connected to 'proxy' network${NC}"
+else
+    echo -e "${YELLOW}⚠️  Container is NOT connected to 'proxy' network${NC}"
+    echo "Connecting container to proxy network..."
+    
+    # Stop container
+    docker compose -f $COMPOSE_FILE stop portfolio
+    
+    # Connect to proxy network
+    docker network connect proxy portfolio-app || {
+        echo -e "${RED}❌ Failed to connect container to proxy network${NC}"
+        echo "Trying to recreate container..."
+        docker compose -f $COMPOSE_FILE up -d --force-recreate
+    }
+    
+    # Start container
+    docker compose -f $COMPOSE_FILE start portfolio
+    
+    echo -e "${GREEN}✅ Container recreated and connected to proxy network${NC}"
+fi
+echo ""
+
+# Wait for health check
+echo "⏳ Waiting for container to be healthy..."
+for i in {1..30}; do
+    HEALTH=$(docker inspect portfolio-app --format='{{.State.Health.Status}}' 2>/dev/null || echo "starting")
+    if [ "$HEALTH" == "healthy" ]; then
+        echo -e "${GREEN}✅ Container is healthy${NC}"
+        break
+    fi
+    if [ $i -eq 30 ]; then
+        echo -e "${YELLOW}⚠️  Container health check timeout${NC}"
+        echo "Container logs:"
+        docker logs portfolio-app --tail=30
+    else
+        echo "Waiting... ($i/30)"
+        sleep 2
+    fi
+done
+echo ""
+
+# Test API endpoints
+echo "🧪 Testing API endpoints..."
+if docker exec portfolio-app curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
+    echo -e "${GREEN}✅ Health endpoint is working${NC}"
+else
+    echo -e "${RED}❌ Health endpoint is not working${NC}"
+    echo "Container logs:"
+    docker logs portfolio-app --tail=50
+    exit 1
+fi
+echo ""
+
+# Summary
+echo "📊 Summary:"
+echo "---------"
+echo -e "${GREEN}✅ Production fix completed${NC}"
+echo ""
+echo "Next steps:"
+echo "1. Verify Nginx Proxy Manager configuration:"
+echo "   - Forward Hostname/IP: portfolio-app"
+echo "   - Forward Port: 3000"
+echo "   - Ensure 'proxy' network is selected"
+echo ""
+echo "2. Test the website: https://dk0.dev"
+echo ""
+echo "3. If still having issues, run: ./scripts/diagnose-production.sh"