server/php/diagnostic.php

<!DOCTYPE html>
<html>
<head>
    <title>Server Diagnostic - Multi-User Transcription</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 40px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test {
            background: white;
            padding: 20px;
            margin: 15px 0;
            border-radius: 5px;
            border-left: 4px solid #ccc;
        }
        .test.pass { border-color: #4CAF50; }
        .test.fail { border-color: #f44336; }
        .test.warn { border-color: #ff9800; }
        .test h3 {
            margin-top: 0;
            color: #333;
        }
        .test pre {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 3px;
            overflow-x: auto;
        }
        .status { font-weight: bold; }
        .pass .status { color: #4CAF50; }
        .fail .status { color: #f44336; }
        .warn .status { color: #ff9800; }
        h1 { color: #333; }
        .info { background: #e3f2fd; padding: 15px; border-radius: 5px; margin: 20px 0; }
    </style>
</head>
<body>
    <h1>🔧 Server Diagnostic</h1>

    <?php
    require_once 'config.php';

    // Test 1: PHP Version
    $php_version = phpversion();
    $php_ok = version_compare($php_version, '7.4.0', '>=');
    ?>
    <div class="test <?php echo $php_ok ? 'pass' : 'fail'; ?>">
        <h3>PHP Version</h3>
        <p class="status"><?php echo $php_ok ? '✓ PASS' : '✗ FAIL'; ?></p>
        <p>Version: <strong><?php echo $php_version; ?></strong></p>
        <?php if (!$php_ok): ?>
            <p>Minimum required: PHP 7.4.0</p>
        <?php endif; ?>
    </div>

    <?php
    // Test 2: Server API
    $server_api = php_sapi_name();
    $is_fpm = strpos($server_api, 'fpm') !== false;
    ?>
    <div class="test pass">
        <h3>Server API</h3>
        <p class="status">ℹ INFO</p>
        <p>SAPI: <strong><?php echo $server_api; ?></strong></p>
        <p>Type: <strong><?php echo $is_fpm ? 'PHP-FPM' : 'Other'; ?></strong></p>
        <?php if ($is_fpm): ?>
            <p class="info">✓ Running under PHP-FPM. Note: php_flag/php_value directives in .htaccess won't work. Configure PHP settings in php.ini or FPM pool config.</p>
        <?php endif; ?>
    </div>

    <?php
    // Test 3: Storage Directory
    $storage_exists = file_exists(STORAGE_DIR);
    $storage_writable = $storage_exists && is_writable(STORAGE_DIR);
    $storage_ok = $storage_exists && $storage_writable;
    ?>
    <div class="test <?php echo $storage_ok ? 'pass' : 'fail'; ?>">
        <h3>Storage Directory</h3>
        <p class="status"><?php echo $storage_ok ? '✓ PASS' : '✗ FAIL'; ?></p>
        <p>Path: <code><?php echo STORAGE_DIR; ?></code></p>
        <p>Exists: <?php echo $storage_exists ? 'Yes' : 'No'; ?></p>
        <p>Writable: <?php echo $storage_writable ? 'Yes' : 'No'; ?></p>
        <?php if (!$storage_ok): ?>
            <p><strong>Fix:</strong> Run: <code>mkdir -p <?php echo STORAGE_DIR; ?> && chmod 755 <?php echo STORAGE_DIR; ?></code></p>
        <?php endif; ?>
    </div>

    <?php
    // Test 4: Required PHP Extensions
    $required_extensions = ['json', 'mbstring'];
    $missing_extensions = [];
    foreach ($required_extensions as $ext) {
        if (!extension_loaded($ext)) {
            $missing_extensions[] = $ext;
        }
    }
    $extensions_ok = empty($missing_extensions);
    ?>
    <div class="test <?php echo $extensions_ok ? 'pass' : 'fail'; ?>">
        <h3>PHP Extensions</h3>
        <p class="status"><?php echo $extensions_ok ? '✓ PASS' : '✗ FAIL'; ?></p>
        <?php if ($extensions_ok): ?>
            <p>All required extensions loaded</p>
        <?php else: ?>
            <p>Missing extensions: <strong><?php echo implode(', ', $missing_extensions); ?></strong></p>
        <?php endif; ?>
    </div>

    <?php
    // Test 5: Server Info
    ?>
    <div class="test pass">
        <h3>Server Information</h3>
        <p class="status">ℹ INFO</p>
        <p>Server: <strong><?php echo $_SERVER['SERVER_SOFTWARE'] ?? 'Unknown'; ?></strong></p>
        <p>Document Root: <code><?php echo $_SERVER['DOCUMENT_ROOT'] ?? 'Unknown'; ?></code></p>
        <p>Script Path: <code><?php echo __DIR__; ?></code></p>
    </div>

    <?php
    // Test 6: API Endpoint Test
    ?>
    <div class="test pass">
        <h3>API Endpoint Test</h3>
        <p class="status">ℹ INFO</p>
        <p>Info endpoint: <a href="server.php?action=info" target="_blank">server.php?action=info</a></p>
        <p>Test this endpoint to verify the API is accessible</p>
    </div>

    <?php
    // Test 7: Server-Sent Events Test
    ?>
    <div class="test pass">
        <h3>Server-Sent Events (SSE) Test</h3>
        <p class="status">Testing...</p>
        <div id="sse-status">Connecting to SSE endpoint...</div>
        <div id="sse-log" style="background: #f5f5f5; padding: 10px; margin-top: 10px; border-radius: 3px; max-height: 200px; overflow-y: auto;"></div>
    </div>

    <div class="info">
        <h3>Common Issues & Solutions</h3>
        <ul>
            <li><strong>Disconnected Status:</strong> Check that server.php is accessible and SSE test above succeeds</li>
            <li><strong>403 Forbidden:</strong> Check file permissions (644 for files, 755 for directories)</li>
            <li><strong>500 Internal Server Error:</strong> Check PHP error logs for details</li>
            <li><strong>CORS Errors:</strong> Ensure ENABLE_CORS is true in config.php</li>
            <li><strong>PHP-FPM Issues:</strong> Check that PHP-FPM is running and configured correctly</li>
        </ul>
    </div>

    <script>
        // Test SSE connection
        const sseLog = document.getElementById('sse-log');
        const sseStatus = document.getElementById('sse-status');

        function log(message) {
            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);

            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('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>
</html>