Log pushed back to the server

Author: MrDesjardins

.env.example

@@ -128,3 +128,10 @@ ELEVENLABS_API_KEY=
 ELEVENLABS_VOICE_ID=pNInz6obpgDQGcFmaJgB
 # Directory to store weekly summary audio files
 WEEKLY_SUMMARY_AUDIO_DIR=/var/audio-summaries
+
+# Client-Side Logging (Optional)
+# Remote logging helps debug issues on mobile/car displays where console access is limited
+# Logs are batched and sent to the server at this interval (in milliseconds)
+# Lower values = more frequent updates (better for debugging), higher values = less server load
+# Default: 5000 (5 seconds)
+CLIENT_LOG_BATCH_INTERVAL=5000

config.py

@@ -107,6 +107,9 @@ class Config:
     elevenlabs_voice_id: str
     weekly_summary_audio_dir: str
 
+    # Client-side logging settings
+    client_log_batch_interval: int  # Milliseconds between log batches
+
     @classmethod
     def load_from_env(cls) -> "Config":
         """Load configuration from environment variables."""
@@ -195,6 +198,10 @@ def load_from_env(cls) -> "Config":
             weekly_summary_audio_dir=os.getenv(
                 "WEEKLY_SUMMARY_AUDIO_DIR", "/var/audio-summaries"
             ),
+            # Client-side logging settings
+            client_log_batch_interval=_parse_int(
+                os.getenv("CLIENT_LOG_BATCH_INTERVAL", "5000"), 5000, 1000, 60000
+            ),  # 1-60 seconds
         )
 
         # Validate configuration if transcription is enabled

main.py

@@ -189,6 +189,7 @@ def index(request: Request):
             and config.weekly_summary_enabled,
             "prefetch_threshold_seconds": config.prefetch_threshold_seconds,
             "trilium_url": config.trilium_url,
+            "client_log_batch_interval": config.client_log_batch_interval,
         },
     )
 

routes/admin.py

@@ -3,9 +3,13 @@
 """
 
 import logging
+from datetime import datetime
+from pathlib import Path
+from typing import List, Dict, Any
 from fastapi import APIRouter, HTTPException, Request
-from fastapi.responses import JSONResponse, HTMLResponse
+from fastapi.responses import JSONResponse, HTMLResponse, PlainTextResponse
 from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
 
 from config import get_config
 
@@ -14,6 +18,20 @@
 config = get_config()
 templates = Jinja2Templates(directory="templates")
 
+# Client logs storage
+CLIENT_LOGS_DIR = Path("/tmp/audio-stream-client-logs")
+CLIENT_LOGS_FILE = CLIENT_LOGS_DIR / "client.log"
+MAX_LOG_SIZE = 5 * 1024 * 1024  # 5MB
+
+
+class ClientLogEntry(BaseModel):
+    """Client-side log entry."""
+
+    level: str  # "log", "warn", "error", "debug"
+    message: str
+    timestamp: str
+    context: Dict[str, Any] = {}
+
 
 @router.get("/stats", response_class=HTMLResponse)
 async def stats_page(request: Request):
@@ -183,3 +201,90 @@ def get_llm_usage_summary_endpoint(
     except Exception as e:
         logger.error(f"Error getting LLM usage summary: {e}", exc_info=True)
         raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.post("/client-logs")
+async def receive_client_logs(logs: List[ClientLogEntry]) -> JSONResponse:
+    """
+    Receive logs from the client browser.
+
+    Stores logs in a rotating log file for debugging client-side issues,
+    especially useful for car displays and mobile devices where console
+    access is limited.
+    """
+    try:
+        # Ensure log directory exists
+        CLIENT_LOGS_DIR.mkdir(parents=True, exist_ok=True)
+
+        # Rotate log file if too large
+        if CLIENT_LOGS_FILE.exists() and CLIENT_LOGS_FILE.stat().st_size > MAX_LOG_SIZE:
+            backup_file = (
+                CLIENT_LOGS_DIR
+                / f"client.log.{datetime.now().strftime('%Y%m%d_%H%M%S')}"
+            )
+            CLIENT_LOGS_FILE.rename(backup_file)
+            logger.info(f"Rotated client logs to {backup_file}")
+
+        # Append logs to file
+        with open(CLIENT_LOGS_FILE, "a") as f:
+            for log_entry in logs:
+                log_line = (
+                    f"{log_entry.timestamp} [{log_entry.level.upper()}] "
+                    f"{log_entry.message}"
+                )
+                if log_entry.context:
+                    log_line += f" | Context: {log_entry.context}"
+                f.write(log_line + "\n")
+
+        logger.debug(f"Received {len(logs)} client log entries")
+        return JSONResponse({"status": "ok", "received": len(logs)})
+
+    except Exception as e:
+        logger.error(f"Error storing client logs: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/client-logs", response_class=PlainTextResponse)
+async def get_client_logs(lines: int = 100) -> str:
+    """
+    Get recent client-side logs.
+
+    Query parameters:
+    - lines: Number of lines to return (default: 100, max: 1000)
+
+    Returns plain text log file content.
+    """
+    try:
+        # Validate lines parameter
+        if lines > 1000:
+            lines = 1000
+
+        if not CLIENT_LOGS_FILE.exists():
+            return "No client logs available yet."
+
+        # Read last N lines
+        with open(CLIENT_LOGS_FILE, "r") as f:
+            all_lines = f.readlines()
+            recent_lines = all_lines[-lines:] if len(all_lines) > lines else all_lines
+
+        return "".join(recent_lines)
+
+    except Exception as e:
+        logger.error(f"Error reading client logs: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.delete("/client-logs")
+async def clear_client_logs() -> JSONResponse:
+    """Clear all client-side logs."""
+    try:
+        if CLIENT_LOGS_FILE.exists():
+            CLIENT_LOGS_FILE.unlink()
+            logger.info("Client logs cleared")
+            return JSONResponse({"status": "cleared", "message": "Client logs deleted"})
+        else:
+            return JSONResponse({"status": "ok", "message": "No logs to clear"})
+
+    except Exception as e:
+        logger.error(f"Error clearing client logs: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))

templates/index.html

@@ -219,6 +219,72 @@ <h2>
         const prefetchThresholdSeconds = {{ prefetch_threshold_seconds }};
         let prefetchTriggered = false;
 
+        // Remote logging for debugging on phone/car displays
+        const REMOTE_LOGGING_ENABLED = true;
+        const LOG_BATCH_INTERVAL = {{ client_log_batch_interval }}; // Milliseconds between log batches (configurable via .env)
+        let logBuffer = [];
+        let logBatchTimer = null;
+
+        // Remote logging function - sends logs to server
+        function remoteLog(level, message, context = {}) {
+            const timestamp = new Date().toISOString();
+
+            // Add to buffer
+            logBuffer.push({
+                level: level,
+                message: message,
+                timestamp: timestamp,
+                context: context
+            });
+
+            // Also log to console
+            const consoleMethod = console[level] || console.log;
+            if (Object.keys(context).length > 0) {
+                consoleMethod(`[${level.toUpperCase()}]`, message, context);
+            } else {
+                consoleMethod(`[${level.toUpperCase()}]`, message);
+            }
+
+            // Start batch timer if not already running
+            if (REMOTE_LOGGING_ENABLED && !logBatchTimer) {
+                logBatchTimer = setTimeout(flushLogs, LOG_BATCH_INTERVAL);
+            }
+        }
+
+        // Send buffered logs to server
+        async function flushLogs() {
+            if (logBuffer.length === 0) {
+                logBatchTimer = null;
+                return;
+            }
+
+            const logsToSend = [...logBuffer];
+            logBuffer = [];
+            logBatchTimer = null;
+
+            try {
+                await fetch('/admin/client-logs', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(logsToSend),
+                });
+            } catch (e) {
+                // Silently fail - don't want logging to break the app
+                console.debug('Failed to send remote logs:', e);
+            }
+        }
+
+        // Flush logs on page unload
+        window.addEventListener('beforeunload', () => {
+            if (logBuffer.length > 0) {
+                // Use sendBeacon for reliability during page unload
+                const blob = new Blob([JSON.stringify(logBuffer)], { type: 'application/json' });
+                navigator.sendBeacon('/admin/client-logs', blob);
+            }
+        });
+
         // Stream resilience configuration
         let retryCount = 0;
         let maxRetries = 50; // Increased for long network transitions (5G↔WiFi)
@@ -559,6 +625,53 @@ <h2>
             console.log('Stream loading suspended (browser buffered enough)');
         });
 
+        // Handle when duration becomes available
+        player.addEventListener('loadedmetadata', function () {
+            remoteLog('log', '[MediaSession] Metadata loaded', { duration: player.duration });
+
+            // Immediately set position state when duration becomes available
+            if ('mediaSession' in navigator && navigator.mediaSession.setPositionState) {
+                if (player.duration && !isNaN(player.duration) && isFinite(player.duration)) {
+                    try {
+                        navigator.mediaSession.setPositionState({
+                            duration: player.duration,
+                            playbackRate: player.playbackRate,
+                            position: player.currentTime
+                        });
+                        remoteLog('log', '[MediaSession] Initial position state set for car display', {
+                            duration: player.duration,
+                            position: player.currentTime
+                        });
+                    } catch (e) {
+                        remoteLog('warn', '[MediaSession] Failed to set initial position state', { error: e.message });
+                    }
+                }
+            }
+        });
+
+        player.addEventListener('durationchange', function () {
+            remoteLog('log', '[MediaSession] Duration changed', { duration: player.duration });
+
+            // Update position state when duration changes
+            if ('mediaSession' in navigator && navigator.mediaSession.setPositionState) {
+                if (player.duration && !isNaN(player.duration) && isFinite(player.duration)) {
+                    try {
+                        navigator.mediaSession.setPositionState({
+                            duration: player.duration,
+                            playbackRate: player.playbackRate,
+                            position: player.currentTime
+                        });
+                        remoteLog('log', '[MediaSession] Position state updated after duration change', {
+                            duration: player.duration,
+                            position: player.currentTime
+                        });
+                    } catch (e) {
+                        remoteLog('warn', '[MediaSession] Failed to update position state', { error: e.message });
+                    }
+                }
+            }
+        });
+
         // Prefetch next queue item when current track is nearing its end
         let lastPositionUpdate = 0;
         player.addEventListener('timeupdate', async function () {
@@ -577,6 +690,15 @@ <h2>
                         // Some browsers don't support this or have restrictions
                         console.debug('[MediaSession] setPositionState not supported or failed:', e.message);
                     }
+                } else {
+                    // Debug why position state isn't being set (only log once per 10 seconds)
+                    if (now - lastPositionUpdate > 10000) {
+                        remoteLog('warn', '[MediaSession] Cannot set position state', {
+                            duration: player.duration,
+                            isNaN: isNaN(player.duration),
+                            isFinite: isFinite(player.duration)
+                        });
+                    }
                 }
             }
 
@@ -688,7 +810,7 @@ <h2>
 
                 navigator.mediaSession.metadata = new MediaMetadata(metadataOptions);
 
-                console.log('[MediaSession] Updated metadata:', {
+                remoteLog('log', '[MediaSession] Updated metadata', {
                     title: metadataOptions.title,
                     artist: metadataOptions.artist,
                     hasArtwork: !!metadataOptions.artwork,
@@ -697,16 +819,16 @@ <h2>
             } catch (e) {
                 // Fallback: set metadata without artwork
                 // This fixes compatibility with strict car systems like Tesla
-                console.warn('[MediaSession] Failed to set metadata with artwork, trying without:', e);
+                remoteLog('warn', '[MediaSession] Failed to set metadata with artwork, trying without', { error: e.message });
                 try {
                     navigator.mediaSession.metadata = new MediaMetadata({
                         title: trackInfo.title || 'YouTube Audio',
                         artist: trackInfo.channel || 'YouTube',
                         album: 'YouTube Radio'
                     });
-                    console.log('[MediaSession] Set metadata without artwork (fallback)');
+                    remoteLog('log', '[MediaSession] Set metadata without artwork (fallback)');
                 } catch (fallbackError) {
-                    console.error('[MediaSession] Failed to set metadata even without artwork:', fallbackError);
+                    remoteLog('error', '[MediaSession] Failed to set metadata even without artwork', { error: fallbackError.message });
                 }
             }
 
@@ -729,6 +851,14 @@ <h2>
             navigator.mediaSession.setActionHandler('seekforward', (details) => {
                 player.currentTime = Math.max(0, player.currentTime + (details.seekOffset || 15));
             });
+
+            // Handle seek to specific position (for scrubber/progress bar in car displays)
+            navigator.mediaSession.setActionHandler('seekto', (details) => {
+                if (details.seekTime !== null && !isNaN(details.seekTime)) {
+                    player.currentTime = details.seekTime;
+                    remoteLog('log', '[MediaSession] Seeked to position', { seekTime: details.seekTime });
+                }
+            });
         }
 
         // Queue Management