MOBILE DEBUGGING STANDARDS - AI PROMPT

PURPOSE OF MOBILE DEBUGGING STANDARDS

The Mobile Debugging Problem

Silent failures waste hours - Uploads fail with no user feedback
Browser console is useless on phones - Users can't see JavaScript errors
Network issues are invisible - AJAX calls fail silently
File operations give no feedback - Photo uploads succeed or fail mysteriously
GPS problems are hidden - Location services fail without notification

What This Standard Provides

Visible error messages on phone screen - No more hidden console errors
Real-time operation feedback - Show upload progress, network status
Debugging information display - Function names, error details, timestamps
Progress indicators for long operations - GPS acquisition, file processing

CRITICAL MOBILE DEBUGGING PRINCIPLE:
If a user can't see what went wrong on their phone screen, you'll spend hours debugging
Every operation must provide visible feedback - success, failure, or progress

MANDATORY MOBILE ERROR DISPLAY SYSTEM

Core Error Display Function

function showMobileError(functionName, errorType, message, details = null) {
    /*
    MANDATORY: Add this function to every JavaScript file
    Shows large, visible error overlay on phone screen
    */
    
    try {
        console.log(`MOBILE ERROR: ${functionName} - ${errorType}: ${message}`);
        
        // Create visible error overlay on phone
        const errorDiv = document.createElement('div');
        errorDiv.id = 'mobile-error-display';
        errorDiv.style.cssText = `
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            background-color: #ff4444;
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
            z-index: 9999;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        `;
        
        errorDiv.innerHTML = `
            ERROR: ${functionName}
            ${errorType}: ${message}
            ${details ? `Details: ${details}` : ''}
            
        `;
        
        // Remove any existing error display
        const existing = document.getElementById('mobile-error-display');
        if (existing) existing.remove();
        
        document.body.appendChild(errorDiv);
        
        // Auto-remove after 10 seconds
        setTimeout(() => {
            if (document.getElementById('mobile-error-display')) {
                errorDiv.remove();
            }
        }, 10000);
        
    } catch (e) {
        // Fallback if error display fails
        alert(`ERROR: ${functionName} - ${message}`);
    }
}

Success Feedback Function

function showMobileSuccess(functionName, message, autoClose = true) {
    /*
    MANDATORY: Show success feedback for completed operations
    */
    
    try {
        console.log(`MOBILE SUCCESS: ${functionName} - ${message}`);
        
        const successDiv = document.createElement('div');
        successDiv.id = 'mobile-success-display';
        successDiv.style.cssText = `
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            background-color: #44aa44;
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            z-index: 9999;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        `;
        
        successDiv.innerHTML = `
            SUCCESS: ${functionName}
            ${message}
        `;
        
        // Remove any existing success display
        const existing = document.getElementById('mobile-success-display');
        if (existing) existing.remove();
        
        document.body.appendChild(successDiv);
        
        // Auto-remove after 3 seconds if autoClose is true
        if (autoClose) {
            setTimeout(() => {
                if (document.getElementById('mobile-success-display')) {
                    successDiv.remove();
                }
            }, 3000);
        }
        
    } catch (e) {
        console.log(`SUCCESS: ${functionName} - ${message}`);
    }
}

PROGRESS INDICATOR SYSTEM

Progress Display Function

function showMobileProgress(functionName, message, percentage = null) {
    /*
    MANDATORY: Show progress for long-running operations
    Use for file uploads, GPS acquisition, network requests
    */
    
    try {
        console.log(`MOBILE PROGRESS: ${functionName} - ${message} ${percentage ? percentage + '%' : ''}`);
        
        const progressDiv = document.createElement('div');
        progressDiv.id = 'mobile-progress-display';
        progressDiv.style.cssText = `
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            background-color: #4488cc;
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            z-index: 9999;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        `;
        
        let progressBar = '';
        if (percentage !== null) {
            progressBar = `
                
                    
                
            `;
        }
        
        progressDiv.innerHTML = `
            ${functionName}
            ${message}
            ${progressBar}
        `;
        
        // Remove any existing progress display
        const existing = document.getElementById('mobile-progress-display');
        if (existing) existing.remove();
        
        document.body.appendChild(progressDiv);
        
    } catch (e) {
        console.log(`PROGRESS: ${functionName} - ${message}`);
    }
}

function hideMobileProgress() {
    /*
    Call this when operation completes
    */
    const existing = document.getElementById('mobile-progress-display');
    if (existing) existing.remove();
}

FUNCTION WRAPPER PATTERNS

File Upload Function Template

function uploadFileWithDebug(file, endpoint) {
    /*
    MANDATORY PATTERN: Use this for all file upload functions
    */
    
    const functionName = 'uploadFileWithDebug';
    
    try {
        // Validation with visible feedback
        if (!file) {
            showMobileError(functionName, 'Validation Error', 'No file selected');
            return false;
        }
        
        if (file.size > 10 * 1024 * 1024) { // 10MB limit
            showMobileError(functionName, 'File Too Large', `File size: ${(file.size / 1024 / 1024).toFixed(1)}MB. Maximum: 10MB`);
            return false;
        }
        
        showMobileProgress(functionName, 'Starting upload...', 0);
        
        const formData = new FormData();
        formData.append('file', file);
        
        const xhr = new XMLHttpRequest();
        
        // Progress tracking
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentage = Math.round((e.loaded / e.total) * 100);
                showMobileProgress(functionName, `Uploading file...`, percentage);
            }
        });
        
        // Success handling
        xhr.addEventListener('load', function() {
            hideMobileProgress();
            
            if (xhr.status === 200) {
                showMobileSuccess(functionName, 'File uploaded successfully');
                // Handle success response
                try {
                    const response = JSON.parse(xhr.responseText);
                    console.log('Upload response:', response);
                } catch (e) {
                    showMobileError(functionName, 'Parse Error', 'Invalid server response');
                }
            } else {
                showMobileError(functionName, 'Server Error', `HTTP ${xhr.status}: ${xhr.statusText}`);
            }
        });
        
        // Error handling
        xhr.addEventListener('error', function() {
            hideMobileProgress();
            showMobileError(functionName, 'Network Error', 'Upload failed - check internet connection');
        });
        
        // Timeout handling
        xhr.addEventListener('timeout', function() {
            hideMobileProgress();
            showMobileError(functionName, 'Timeout Error', 'Upload took too long - try again');
        });
        
        xhr.timeout = 30000; // 30 second timeout
        xhr.open('POST', endpoint);
        xhr.send(formData);
        
    } catch (error) {
        hideMobileProgress();
        showMobileError(functionName, 'JavaScript Error', error.message, error.stack);
        return false;
    }
}

GPS Acquisition Function Template

function getLocationWithDebug() {
    /*
    MANDATORY PATTERN: Use this for all GPS/location functions
    */
    
    const functionName = 'getLocationWithDebug';
    
    try {
        if (!navigator.geolocation) {
            showMobileError(functionName, 'Not Supported', 'GPS not available on this device');
            return false;
        }
        
        showMobileProgress(functionName, 'Requesting location permission...');
        
        const options = {
            enableHighAccuracy: true,
            timeout: 15000,
            maximumAge: 60000
        };
        
        navigator.geolocation.getCurrentPosition(
            function(position) {
                hideMobileProgress();
                const accuracy = Math.round(position.coords.accuracy);
                showMobileSuccess(functionName, `Location acquired (accuracy: ${accuracy}m)`);
                
                console.log('GPS Position:', {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                    accuracy: accuracy
                });
                
                // Handle successful location
                handleLocationSuccess(position);
            },
            function(error) {
                hideMobileProgress();
                let errorMessage = 'Unknown GPS error';
                
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMessage = 'Location permission denied - enable in browser settings';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMessage = 'Location unavailable - check GPS/WiFi';
                        break;
                    case error.TIMEOUT:
                        errorMessage = 'Location timeout - try again';
                        break;
                }
                
                showMobileError(functionName, 'GPS Error', errorMessage, `Error code: ${error.code}`);
            },
            options
        );
        
    } catch (error) {
        hideMobileProgress();
        showMobileError(functionName, 'JavaScript Error', error.message);
        return false;
    }
}

AJAX Request Function Template

function fetchWithDebug(url, options = {}) {
    /*
    MANDATORY PATTERN: Use this for all AJAX/fetch requests
    */
    
    const functionName = 'fetchWithDebug';
    const method = options.method || 'GET';
    
    try {
        showMobileProgress(functionName, `${method} request to ${url}...`);
        
        // Add timeout to fetch
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
        
        fetch(url, {
            ...options,
            signal: controller.signal
        })
        .then(response => {
            clearTimeout(timeoutId);
            hideMobileProgress();
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            showMobileSuccess(functionName, `${method} request successful`);
            return response.json();
        })
        .then(data => {
            console.log('AJAX Response:', data);
            // Handle successful response
            return data;
        })
        .catch(error => {
            clearTimeout(timeoutId);
            hideMobileProgress();
            
            let errorMessage = error.message;
            if (error.name === 'AbortError') {
                errorMessage = 'Request timeout - try again';
            } else if (!navigator.onLine) {
                errorMessage = 'No internet connection';
            }
            
            showMobileError(functionName, 'Network Error', errorMessage, `URL: ${url}`);
            throw error;
        });
        
    } catch (error) {
        hideMobileProgress();
        showMobileError(functionName, 'JavaScript Error', error.message);
        throw error;
    }
}

IMPLEMENTATION REQUIREMENTS

Add to Every JavaScript File

Include error display functions at the top of every file
Wrap problematic functions with debug versions
Add progress indicators to all long-running operations
Show visible feedback for every user action

Common Operations That Need Debug Wrappers

File uploads - Photos, documents, any file handling
GPS operations - Location acquisition, accuracy checking
AJAX requests - API calls, form submissions
Form processing - Validation, submission, response handling
Camera access - Photo capture, video recording
Local storage - Saving/loading user data

Debug Display Rules

Always show function name - User knows what failed
Include specific error details - Not just "error occurred"
Add timestamps - When did it happen
Show progress for operations over 2 seconds
Auto-close success messages - Keep errors until dismissed

MOBILE DEBUGGING CHECKLIST:
☐ Error display functions added to all JavaScript files
☐ File upload functions show progress and errors
☐ GPS functions show permission status and accuracy
☐ AJAX calls show network status and response codes
☐ All user actions provide visible feedback
☐ Console.log messages for debugging reference
☐ Error messages include function names and details

TIME SAVINGS IMPACT

Before Mobile Debug Standards

Silent upload failures - 2-4 hours debugging
GPS permission issues - 1-3 hours troubleshooting
Network request failures - 1-2 hours finding the problem
File processing errors - 2-6 hours of trial and error

After Mobile Debug Standards

Immediate error visibility - Problems obvious in seconds
Clear progress feedback - Users know what's happening
Specific error messages - Know exactly what failed and why
Function-level debugging - Pinpoint errors to exact location

RESULT: SAVE 5-10 HOURS PER DEBUGGING SESSION
Mobile debugging goes from guesswork to systematic problem solving
Users get clear feedback instead of mysterious silent failures