olemd/skyview
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases 11 Packages Wiki Activity Actions

fix: Clean up excessive debug logging in JavaScript console

Browse source 
- Add conditional verbose logging controlled by ?verbose URL param or localStorage
- Reduce frequent WebSocket message logging to verbose mode only
- Minimize aircraft position update logging to prevent console spam
- Make 3D radar initialization logging conditional on verbose flag
- Reduce WebSocket message counter frequency from every 10 to every 500 messages
- Preserve important error messages and connection status logging

Users can enable verbose logging with:
- URL parameter: http://localhost:8080?verbose
- localStorage: localStorage.setItem('skyview-verbose', 'true')

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-09-01 20:30:41 +02:00
commit 2ba2192044
3 changed files with 90 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

110
assets/static/js/app.js
View file

@ -28,6 +28,14 @@ class SkyView {
this.selectedAircraft = null; this.selectedAircraft = null;
this.selectedTrailEnabled = false; this.selectedTrailEnabled = false;
// Debug/verbose logging control
// Enable verbose logging with: ?verbose in URL or localStorage.setItem('skyview-verbose', 'true')
const urlParams = new URLSearchParams(window.location.search);
this.verbose = urlParams.has('verbose') || localStorage.getItem('skyview-verbose') === 'true';
// Set global verbose flag for other modules
window.skyviewVerbose = this.verbose;
this.init(); this.init();
} }
@ -228,7 +236,10 @@ class SkyView {
handleWebSocketMessage(message) { handleWebSocketMessage(message) {
const aircraftCount = Object.keys(message.data.aircraft || {}).length; const aircraftCount = Object.keys(message.data.aircraft || {}).length;
console.debug(`WebSocket message: ${message.type}, ${aircraftCount} aircraft, timestamp: ${message.timestamp}`); // Only log WebSocket messages in verbose mode
if (this.verbose) {
console.debug(`WebSocket message: ${message.type}, ${aircraftCount} aircraft, timestamp: ${message.timestamp}`);
}
switch (message.type) { switch (message.type) {
case 'initial_data': case 'initial_data':
@ -247,7 +258,10 @@ class SkyView {
updateData(data) { updateData(data) {
// Update all managers with new data - ORDER MATTERS // Update all managers with new data - ORDER MATTERS
console.debug(`Updating data: ${Object.keys(data.aircraft || {}).length} aircraft`); // Only log data updates in verbose mode
if (this.verbose) {
console.debug(`Updating data: ${Object.keys(data.aircraft || {}).length} aircraft`);
}
this.uiManager.updateData(data); this.uiManager.updateData(data);
this.aircraftManager.updateAircraftData(data); this.aircraftManager.updateAircraftData(data);
@ -277,7 +291,10 @@ class SkyView {
this.update3DRadar(); this.update3DRadar();
} }
console.debug(`Data update complete: ${this.aircraftManager.aircraftMarkers.size} markers displayed`); // Only log completion messages in verbose mode
if (this.verbose) {
console.debug(`Data update complete: ${this.aircraftManager.aircraftMarkers.size} markers displayed`);
}
} }
// View switching // View switching
@ -377,7 +394,9 @@ class SkyView {
// 3D Radar (basic implementation) // 3D Radar (basic implementation)
initialize3DRadar() { initialize3DRadar() {
console.log('🚀 Starting 3D radar initialization'); if (this.verbose) {
console.log('🚀 Starting 3D radar initialization');
}
try { try {
const container = document.getElementById('radar3d-container'); const container = document.getElementById('radar3d-container');
@ -386,23 +405,28 @@ class SkyView {
return; return;
} }
console.log('✅ Container found:', container, 'Size:', container.clientWidth, 'x', container.clientHeight); if (this.verbose) {
console.log('✅ Container found:', container, 'Size:', container.clientWidth, 'x', container.clientHeight);
// Check if container is visible
const containerStyles = window.getComputedStyle(container); // Check if container is visible
console.log('📋 Container styles:', { const containerStyles = window.getComputedStyle(container);
display: containerStyles.display, console.log('📋 Container styles:', {
visibility: containerStyles.visibility, display: containerStyles.display,
width: containerStyles.width, visibility: containerStyles.visibility,
height: containerStyles.height width: containerStyles.width,
}); height: containerStyles.height
});
}
// Check if Three.js is available // Check if Three.js is available
if (typeof THREE === 'undefined') { if (typeof THREE === 'undefined') {
console.error('❌ Three.js is not available'); console.error('❌ Three.js is not available');
return; return;
} }
console.log('✅ Three.js available, version:', THREE.REVISION);
if (this.verbose) {
console.log('✅ Three.js available, version:', THREE.REVISION);
}
// Quick WebGL test // Quick WebGL test
const testCanvas = document.createElement('canvas'); const testCanvas = document.createElement('canvas');
@ -412,7 +436,10 @@ class SkyView {
container.innerHTML = '<div style="color: red; padding: 20px; text-align: center;">WebGL not supported. Please use a modern browser that supports WebGL.</div>'; container.innerHTML = '<div style="color: red; padding: 20px; text-align: center;">WebGL not supported. Please use a modern browser that supports WebGL.</div>';
return; return;
} }
console.log('✅ WebGL is supported');
if (this.verbose) {
console.log('✅ WebGL is supported');
}
// Check container dimensions first // Check container dimensions first
if (container.clientWidth === 0 || container.clientHeight === 0) { if (container.clientWidth === 0 || container.clientHeight === 0) {
@ -420,7 +447,9 @@ class SkyView {
// Force minimum size for initialization // Force minimum size for initialization
const width = Math.max(container.clientWidth, 800); const width = Math.max(container.clientWidth, 800);
const height = Math.max(container.clientHeight, 600); const height = Math.max(container.clientHeight, 600);
console.log('📐 Using forced dimensions:', width, 'x', height); if (this.verbose) {
console.log('📐 Using forced dimensions:', width, 'x', height);
}
// Create scene with forced dimensions // Create scene with forced dimensions
this.radar3d = { this.radar3d = {
@ -447,11 +476,13 @@ class SkyView {
this.radar3d.renderer.setSize(container.clientWidth, container.clientHeight); this.radar3d.renderer.setSize(container.clientWidth, container.clientHeight);
} }
console.log('✅ Three.js objects created:', { if (this.verbose) {
scene: this.radar3d.scene, console.log('✅ Three.js objects created:', {
camera: this.radar3d.camera, scene: this.radar3d.scene,
renderer: this.radar3d.renderer camera: this.radar3d.camera,
}); renderer: this.radar3d.renderer
});
}
// Check WebGL context // Check WebGL context
const rendererGL = this.radar3d.renderer.getContext(); const rendererGL = this.radar3d.renderer.getContext();
@ -459,11 +490,17 @@ class SkyView {
console.error('❌ Failed to get WebGL context'); console.error('❌ Failed to get WebGL context');
return; return;
} }
console.log('✅ WebGL context created');
if (this.verbose) {
console.log('✅ WebGL context created');
}
this.radar3d.renderer.setClearColor(0x0a0a0a, 0.9); this.radar3d.renderer.setClearColor(0x0a0a0a, 0.9);
container.appendChild(this.radar3d.renderer.domElement); container.appendChild(this.radar3d.renderer.domElement);
console.log('✅ Renderer added to container');
if (this.verbose) {
console.log('✅ Renderer added to container');
}
// Add lighting - ensure the scene is visible // Add lighting - ensure the scene is visible
const ambientLight = new THREE.AmbientLight(0x404040, 1.0); // Increased intensity const ambientLight = new THREE.AmbientLight(0x404040, 1.0); // Increased intensity
@ -483,7 +520,9 @@ class SkyView {
this.radar3d.camera.lookAt(0, 0, 0); this.radar3d.camera.lookAt(0, 0, 0);
// Add controls // Add controls
console.log('🎮 Adding OrbitControls...'); if (this.verbose) {
console.log('🎮 Adding OrbitControls...');
}
if (typeof OrbitControls === 'undefined') { if (typeof OrbitControls === 'undefined') {
console.error('❌ OrbitControls not available'); console.error('❌ OrbitControls not available');
return; return;
@ -492,7 +531,10 @@ class SkyView {
this.radar3d.controls = new OrbitControls(this.radar3d.camera, this.radar3d.renderer.domElement); this.radar3d.controls = new OrbitControls(this.radar3d.camera, this.radar3d.renderer.domElement);
this.radar3d.controls.enableDamping = true; this.radar3d.controls.enableDamping = true;
this.radar3d.controls.dampingFactor = 0.05; this.radar3d.controls.dampingFactor = 0.05;
console.log('✅ OrbitControls added');
if (this.verbose) {
console.log('✅ OrbitControls added');
}
// Store default camera position for reset functionality // Store default camera position for reset functionality
this.radar3d.defaultPosition = { x: 0, y: 50, z: 50 }; this.radar3d.defaultPosition = { x: 0, y: 50, z: 50 };
@ -530,11 +572,13 @@ class SkyView {
cube.position.set(10, 1, 10); cube.position.set(10, 1, 10);
this.radar3d.scene.add(cube); this.radar3d.scene.add(cube);
console.log('3D Radar initialized successfully', { if (this.verbose) {
scene: this.radar3d.scene, console.log('3D Radar initialized successfully', {
camera: this.radar3d.camera, scene: this.radar3d.scene,
renderer: this.radar3d.renderer camera: this.radar3d.camera,
}); renderer: this.radar3d.renderer
});
}
// Start render loop // Start render loop
this.render3DRadar(); this.render3DRadar();
@ -697,7 +741,9 @@ class SkyView {
if (response.ok) { if (response.ok) {
const origin = await response.json(); const origin = await response.json();
this.radar3d.origin = origin; this.radar3d.origin = origin;
console.log('3D Radar origin set to:', origin); if (this.verbose) {
console.log('3D Radar origin set to:', origin);
}
} }
} catch (error) { } catch (error) {
console.warn('Failed to fetch origin, using fallback:', error); console.warn('Failed to fetch origin, using fallback:', error);

14
assets/static/js/modules/aircraft-manager.js
View file

@ -109,8 +109,8 @@ export class AircraftManager {
this.aircraftData.set(icao, aircraft); this.aircraftData.set(icao, aircraft);
} }
// Debug logging for track propagation issues // Debug logging for track propagation issues (only if significant changes)
if (newCount > 0 || positionChanges > 0) { if (newCount > 0 || (positionChanges > 5 && window.skyviewVerbose)) {
console.debug(`Aircraft update: ${newCount} new, ${updatedCount} updated, ${positionChanges} position changes`); console.debug(`Aircraft update: ${newCount} new, ${updatedCount} updated, ${positionChanges} position changes`);
} }
} }
@ -167,7 +167,10 @@ export class AircraftManager {
// If no coordinates, we still want to process for other updates (trails, etc.) // If no coordinates, we still want to process for other updates (trails, etc.)
} }
console.debug(`Markers update complete: ${this.aircraftMarkers.size} active markers, ${this.aircraftData.size} aircraft`); // Only log marker updates in verbose mode
if (window.skyviewVerbose) {
console.debug(`Markers update complete: ${this.aircraftMarkers.size} active markers, ${this.aircraftData.size} aircraft`);
}
} }
updateAircraftMarker(icao, aircraft) { updateAircraftMarker(icao, aircraft) {
@ -196,7 +199,10 @@ export class AircraftManager {
if (positionChanged) { if (positionChanged) {
// Debug significant position updates // Debug significant position updates
console.debug(`Position change for ${icao}: [${pos[0].toFixed(4)}, ${pos[1].toFixed(4)}] (was [${oldPos.lat.toFixed(4)}, ${oldPos.lng.toFixed(4)}])`); // Only log individual position changes in verbose mode
if (window.skyviewVerbose) {
console.debug(`Position change for ${icao}: [${pos[0].toFixed(4)}, ${pos[1].toFixed(4)}] (was [${oldPos.lat.toFixed(4)}, ${oldPos.lng.toFixed(4)}])`);
}
} }
// Check if icon needs to be updated (track rotation, aircraft type, or ground status changes) // Check if icon needs to be updated (track rotation, aircraft type, or ground status changes)

4
assets/static/js/modules/websocket.js
View file

@ -53,8 +53,8 @@ export class WebSocketManager {
this.lastMessageTime = Date.now(); this.lastMessageTime = Date.now();
this.messageCount++; this.messageCount++;
// Log message reception for debugging // Only log message counts in verbose mode and less frequently
if (this.messageCount % 10 === 0) { if (window.skyviewVerbose && this.messageCount % 500 === 0) {
console.debug(`Received ${this.messageCount} WebSocket messages`); console.debug(`Received ${this.messageCount} WebSocket messages`);
} }