Add debug logging to the app

Author: jay-bman725

changelog.md

@@ -1,6 +1,26 @@
 # Changelog
 **All dates are in YYYY/MM/DD (Year-Month-Day)**
 
+## [1.1.3] - 2025-06-06
+
+### Added
+- **Debug Logging System**: Comprehensive debug logging infrastructure for troubleshooting
+- Debug log file creation with automatic rotation (5MB max size, 5 file rotation)
+- Debug logs stored in application data directory (`userData/logs/debug.log`)
+- "Show Debug Logs" button in Settings panel for easy access to log files
+- Debug logging throughout main application processes including:
+  - Application startup and window creation
+  - API key operations and validation
+  - File selection and transcription workflows
+  - Audio processing and FFmpeg operations
+  - Settings management
+  - Update checking functionality
+
+### Enhanced
+- Improved troubleshooting capabilities for users and developers
+- Better error tracking and application state monitoring
+- Enhanced support workflow with detailed logging information
+
 ## [1.1.2] - 2025-06-06
 
 ### Changed

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "autocaption",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Automatic caption generation app using OpenAI Whisper",
   "main": "src/main.js",
   "scripts": {

package.json

@@ -65,6 +65,7 @@ class AutoCaptionApp {
         document.getElementById('save-settings-btn').addEventListener('click', () => this.saveSettings());
         document.getElementById('cancel-settings-btn').addEventListener('click', () => this.closeSettings());
         document.getElementById('manual-check-updates-btn').addEventListener('click', () => this.checkForUpdates());
+        document.getElementById('show-debug-logs-btn').addEventListener('click', () => this.openDebugLogs());
 
         // Modal backdrop click to close
         document.getElementById('settings-modal').addEventListener('click', (e) => {
@@ -397,6 +398,42 @@ class AutoCaptionApp {
         }
     }
 
+    async openDebugLogs() {
+        const button = document.getElementById('show-debug-logs-btn');
+        const originalText = button.innerHTML;
+        
+        // Show loading state
+        button.innerHTML = '<span>📄 Opening...</span>';
+        button.disabled = true;
+        
+        try {
+            const result = await window.electronAPI.openDebugLogs();
+            if (!result.success) {
+                console.error('Failed to open debug logs:', result.error);
+                // Show temporary error message
+                button.innerHTML = '<span>❌ Error</span>';
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                    button.disabled = false;
+                }, 2000);
+            } else {
+                // Show success message briefly
+                button.innerHTML = '<span>✅ Opened</span>';
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                    button.disabled = false;
+                }, 1500);
+            }
+        } catch (error) {
+            console.error('Error opening debug logs:', error);
+            button.innerHTML = '<span>❌ Error</span>';
+            setTimeout(() => {
+                button.innerHTML = originalText;
+                button.disabled = false;
+            }, 2000);
+        }
+    }
+
     updateLastCheckInfo() {
         const lastCheckInfo = document.getElementById('last-check-info');
         if (this.settings?.lastUpdateCheck) {

src/app.js

@@ -59,11 +59,20 @@ <h3>🔄 Updates</h3>
                         <div class="setting-group">
                             <h3>ℹ️ About</h3>
                             <div class="setting-item">
-                                <p><strong>Version:</strong> 1.1.2</p>
+                                <p><strong>Version:</strong> 1.1.3</p>
                                 <p><strong>Made with ❤️ by Jay</strong></p>
                                 <p>Using OpenAI Whisper for AI-powered transcription</p>
                             </div>
                         </div>
+                        <div class="setting-group">
+                            <h3>🐛 Debug</h3>
+                            <div class="setting-item">
+                                <button id="show-debug-logs-btn" class="btn btn-secondary">
+                                    <span>📄 Show Debug Logs</span>
+                                </button>
+                                <p class="setting-description">Open the debug log file to view detailed application logs for troubleshooting.</p>
+                            </div>
+                        </div>
                     </div>
                     <div class="modal-footer">
                         <button id="save-settings-btn" class="btn btn-primary">Save Settings</button>