b2in/public/_cabinet/LOGGING_README.md

Cabinet Digital Signage - Logging System

📋 Übersicht

Dieses erweiterte Logging-System ermöglicht es dir, alle Fehler und Events von den Android-Displays remote zu überwachen, ohne physischen Zugriff auf die Geräte zu benötigen.

🎯 Features

Automatisches Logging von:

• ✅ JavaScript-Fehler (Runtime Errors)
• ✅ Unhandled Promise Rejections (async/await Fehler)
• ✅ Console Errors & Warnings
• ✅ Resource Loading Failures (Videos, Bilder)
• ✅ Video Playback Errors (mit Media Error Codes)
• ✅ Network Status (Online/Offline Events)
• ✅ Video Stalling (Buffering-Probleme)
• ✅ Configuration Loading (API-Fehler)
• ✅ Heartbeat (alle 5 Minuten - zeigt dass Display läuft)

Log-Levels:

• FATAL - Kritische JavaScript-Fehler
• ERROR - Fehler (Video-Loading, Network, etc.)
• WARNING - Warnungen (Buffering, Connection Lost)
• INFO - Informationen (Heartbeat, Video Started, Config Loaded)

📂 Dateistruktur

public/_cabinet/
├── index.html              # Haupt-Display-Datei (mit Logging)
├── logger.php              # Backend-Endpoint für Logs
├── view-logs.php           # Web-Interface zum Ansehen der Logs
├── logs/                   # Log-Verzeichnis (wird automatisch erstellt)
│   ├── all_2026-01-19.log      # Alle Logs des Tages
│   ├── error_2026-01-19.log    # Nur Errors
│   ├── fatal_2026-01-19.log    # Nur Fatal Errors
│   ├── warning_2026-01-19.log  # Nur Warnings
│   ├── info_2026-01-19.log     # Nur Info
│   └── json_2026-01-19.log     # JSON Format (für Parsing)
└── LOGGING_README.md       # Diese Datei

🚀 Setup

1. Logs-Verzeichnis erstellen (falls nicht automatisch erstellt)

mkdir -p public/_cabinet/logs
chmod 755 public/_cabinet/logs

2. PHP-Konfiguration (falls nötig)

Stelle sicher, dass PHP Schreibrechte auf das logs/ Verzeichnis hat:

chown -R www-data:www-data public/_cabinet/logs
# ODER
chmod 777 public/_cabinet/logs  # Nur für Development!

3. Logs ansehen

Öffne im Browser:

https://cabinet.b2in.eu/view-logs.php

📊 Log-Viewer Features

Der view-logs.php bietet:

• 📈 Statistiken (Anzahl Fatal/Error/Warning/Info)
• 🎨 Farbcodierung nach Log-Level
• 🔍 Dateiauswahl (verschiedene Log-Dateien)
• ⚡ Auto-Refresh (alle 10 Sekunden)
• 📏 Zeilenanzahl wählbar (50/100/500/1000/alle)

🔒 Sicherheit

WICHTIG: Der Log-Viewer sollte in Produktion geschützt werden!

Option 1: .htaccess Passwortschutz

# In public/_cabinet/.htaccess
<Files "view-logs.php">
    AuthType Basic
    AuthName "Restricted Access"
    AuthUserFile /pfad/zu/.htpasswd
    Require valid-user
</Files>

Option 2: PHP Session-basiert

Füge am Anfang von view-logs.php hinzu:

<?php
session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    // Login-Formular oder Redirect
    header('Location: /login.php');
    exit;
}
?>

📝 Kontext-Informationen

Jeder Log-Eintrag enthält automatisch:

• Timestamp (ISO 8601)
• IP-Adresse des Displays
• User Agent (Browser/OS Info)
• Viewport (Display-Auflösung)
• Connection Status (online/offline)
• Aktuelles Video (Dateiname)
• Video Index (Position in Playlist)
• Footer Index (Aktueller Footer-Content)
• Playlist-Länge (Anzahl Videos)

🎮 Manuelle Logs

Du kannst auch manuell Logs aus dem JavaScript senden:

// Info Log
window.displayLogger.log('Meine Info-Nachricht', { 
    customData: 'wert' 
});

// Warning
window.displayLogger.warn('Warnung', { 
    reason: 'Irgendwas ist komisch' 
});

// Error
window.displayLogger.error('Fehler aufgetreten', { 
    errorCode: 123 
});

// Kontext setzen
window.displayLogger.setContext('customKey', 'customValue');

🔄 Log-Rotation

Logs werden automatisch rotiert:

• Separate Dateien pro Tag
• Automatische Löschung von Logs älter als 30 Tage
• Verschiedene Dateien pro Log-Level

📱 Debugging-Workflow

1. Problem entdeckt → Öffne view-logs.php
2. Wähle Log-Datei → z.B. error_2026-01-19.log
3. Schaue Statistiken → Wie viele Fehler pro Level?
4. Analysiere Logs → Welches Video? Welcher Footer? Welche IP?
5. Problem beheben → Update CMS oder Code
6. Monitoring → Aktiviere Auto-Refresh zum Live-Monitoring

🐛 Häufige Fehlertypen

MEDIA_ERR_NETWORK (Code 2)

• Ursache: Netzwerkprobleme beim Video-Laden
• Lösung: Prüfe Internetverbindung, Video-URL, Server-Erreichbarkeit

MEDIA_ERR_DECODE (Code 3)

• Ursache: Video-Codec nicht unterstützt oder Datei korrupt
• Lösung: Video neu encodieren (H.264, AAC)

MEDIA_ERR_SRC_NOT_SUPPORTED (Code 4)

• Ursache: Video-Format nicht unterstützt
• Lösung: Format zu MP4/WebM ändern

Promise Rejection

• Ursache: Async-Fehler (meist API-Calls)
• Lösung: Prüfe API-Endpoint, CORS-Settings

Stalled Video

• Ursache: Buffering-Probleme
• Lösung: Video-Bitrate reduzieren, Netzwerk prüfen

💡 Best Practices

1. Regelmäßig Logs checken - Mindestens 1x pro Woche
2. Statistiken beachten - Viele Errors/Warnings? → Aktion nötig
3. Heartbeat überwachen - Kommt alle 5 Min? Display läuft
4. JSON-Logs für Analyse - Nutze json_*.log für automatische Auswertung
5. Log-Level richtig nutzen:
   • FATAL → Sofort reagieren
   • ERROR → Zeitnah prüfen
   • WARNING → Im Auge behalten
   • INFO → Für Debugging

🔗 Integration mit Monitoring-Tools

Die JSON-Logs können einfach in Monitoring-Tools integriert werden:

# Alle Fatal Errors der letzten 24h
grep '"level":"FATAL"' public/_cabinet/logs/json_*.log

# Errors nach IP gruppieren
jq -r '.ip' public/_cabinet/logs/json_*.log | sort | uniq -c

# Häufigste Fehler
jq -r '.message' public/_cabinet/logs/json_*.log | sort | uniq -c | sort -rn

📞 Support

Bei Fragen oder Problemen:

1. Prüfe die Logs in view-logs.php
2. Schaue dir die Kontext-Informationen an
3. Prüfe ob andere Displays gleichen Fehler haben
4. Kontaktiere den Support mit Log-Auszug

---

Version: 1.2
Letztes Update: 2026-01-19