streamer-tools/local-transcription
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive console debugging to SSE diagnostic test

Browse Source 
Enhanced JavaScript debugging with:
- Detailed connection state logging (CONNECTING/OPEN/CLOSED)
- EventSource object inspection
- Real-time readyState monitoring
- Verbose error information (type, target, readyState)
- URL and location details for troubleshooting
- Console grouping for organized output

This will help diagnose SSE connection issues by providing
detailed information in the browser console.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Josh Knapp
2025-12-26 13:57:28 -08:00
parent 54910a5df3
commit 50deaeae96
1 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
server/php/diagnostic.php
View File

@@ -162,43 +162,95 @@
const time = new Date().toLocaleTimeString();
sseLog.innerHTML += `[${time}] ${message}<br>`;
sseLog.scrollTop = sseLog.scrollHeight;
console.log(`[SSE Test] ${message}`);
}
// Create test room
const testRoom = 'diagnostic-test-' + Date.now();
const url = `server.php?action=stream&room=${encodeURIComponent(testRoom)}`;
console.group('SSE Connection Test');
console.log('Test Room:', testRoom);
console.log('Full URL:', url);
console.log('Current Location:', window.location.href);
console.log('Base URL:', window.location.origin + window.location.pathname.replace(/\/[^\/]*$/, '/'));
log(`Attempting to connect to: ${url}`);
try {
const eventSource = new EventSource(url);
eventSource.onopen = () => {
console.log('EventSource object created:', eventSource);
console.log('EventSource readyState:', eventSource.readyState, '(0=CONNECTING, 1=OPEN, 2=CLOSED)');
console.log('EventSource url:', eventSource.url);
eventSource.onopen = (event) => {
console.log('EventSource.onopen fired:', event);
console.log('ReadyState after open:', eventSource.readyState);
sseStatus.innerHTML = '<span style="color: #4CAF50; font-weight: bold;">✓ SSE Connected</span>';
log('✓ Connection established');
log('✓ Server-Sent Events are working');
// Close after successful connection
setTimeout(() => {
console.log('Closing EventSource after successful test');
eventSource.close();
log('Connection test complete - closing');
console.groupEnd();
}, 2000);
};
eventSource.onmessage = (event) => {
console.log('EventSource.onmessage:', event);
console.log('Message data:', event.data);
console.log('Event ID:', event.lastEventId);
log('Received message: ' + event.data);
};
eventSource.onerror = (error) => {
console.error('EventSource.onerror fired:', error);
console.error('ReadyState on error:', eventSource.readyState);
console.error('EventSource URL:', eventSource.url);
// Try to get more info from the error
console.error('Error type:', error.type);
console.error('Error target:', error.target);
console.error('Error currentTarget:', error.currentTarget);
// Check if it's a network error
if (eventSource.readyState === EventSource.CLOSED) {
console.error('Connection is CLOSED - this usually indicates a network error or server rejection');
} else if (eventSource.readyState === EventSource.CONNECTING) {
console.warn('Still CONNECTING - may be retrying');
}
sseStatus.innerHTML = '<span style="color: #f44336; font-weight: bold;">✗ SSE Failed</span>';
log('✗ Connection error occurred');
log('Error: ' + JSON.stringify(error));
log('Check browser console for more details');
log('ReadyState: ' + eventSource.readyState + ' (0=CONNECTING, 1=OPEN, 2=CLOSED)');
log('Check browser console for detailed error information');
eventSource.close();
console.groupEnd();
};
// Monitor readyState changes
let lastReadyState = eventSource.readyState;
const stateMonitor = setInterval(() => {
if (eventSource.readyState !== lastReadyState) {
console.log('ReadyState changed:', lastReadyState, '→', eventSource.readyState);
lastReadyState = eventSource.readyState;
}
if (eventSource.readyState === EventSource.CLOSED) {
clearInterval(stateMonitor);
}
}, 100);
} catch (error) {
console.error('Exception creating EventSource:', error);
console.error('Error stack:', error.stack);
sseStatus.innerHTML = '<span style="color: #f44336; font-weight: bold;">✗ SSE Error</span>';
log('✗ Exception: ' + error.message);
console.groupEnd();
}
</script>
</body>