365 lines
12 KiB
TypeScript
365 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Bug, X, Settings, Shield, Activity } from 'lucide-react';
|
|
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
|
|
import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
|
|
|
|
interface DebugModeToggleProps {
|
|
/**
|
|
* Whether to show the toggle (auto-detected from environment)
|
|
*/
|
|
show?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Debug Mode Toggle Component
|
|
* Provides a floating interface to control debug features and view real-time metrics
|
|
*/
|
|
export function DebugModeToggle({ show }: DebugModeToggleProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [debugEnabled, setDebugEnabled] = useState(false);
|
|
const [metrics, setMetrics] = useState({
|
|
errors: 0,
|
|
apiRequests: 0,
|
|
apiFailures: 0,
|
|
});
|
|
|
|
const isDev = process.env.NODE_ENV === 'development';
|
|
const shouldShow = show ?? isDev;
|
|
|
|
useEffect(() => {
|
|
if (!shouldShow) return;
|
|
|
|
// Load debug state from localStorage
|
|
const saved = localStorage.getItem('gridpilot_debug_enabled');
|
|
if (saved === 'true') {
|
|
setDebugEnabled(true);
|
|
initializeDebugFeatures();
|
|
}
|
|
|
|
// Update metrics every 2 seconds
|
|
const interval = setInterval(updateMetrics, 2000);
|
|
return () => clearInterval(interval);
|
|
}, [shouldShow]);
|
|
|
|
useEffect(() => {
|
|
// Save debug state
|
|
if (shouldShow) {
|
|
localStorage.setItem('gridpilot_debug_enabled', debugEnabled.toString());
|
|
}
|
|
}, [debugEnabled, shouldShow]);
|
|
|
|
const updateMetrics = () => {
|
|
if (!debugEnabled) return;
|
|
|
|
const globalHandler = getGlobalErrorHandler();
|
|
const apiLogger = getGlobalApiLogger();
|
|
|
|
const errorStats = globalHandler.getStats();
|
|
const apiStats = apiLogger.getStats();
|
|
|
|
setMetrics({
|
|
errors: errorStats.total,
|
|
apiRequests: apiStats.total,
|
|
apiFailures: apiStats.failed,
|
|
});
|
|
};
|
|
|
|
const initializeDebugFeatures = () => {
|
|
const globalHandler = getGlobalErrorHandler();
|
|
const apiLogger = getGlobalApiLogger();
|
|
|
|
// Initialize global error handler
|
|
globalHandler.initialize();
|
|
|
|
// Override fetch with logging
|
|
if (!(window as any).__GRIDPILOT_FETCH_LOGGED__) {
|
|
const loggedFetch = apiLogger.createLoggedFetch();
|
|
window.fetch = loggedFetch as any;
|
|
(window as any).__GRIDPILOT_FETCH_LOGGED__ = true;
|
|
}
|
|
|
|
// Expose to window for easy access
|
|
(window as any).__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
|
|
(window as any).__GRIDPILOT_API_LOGGER__ = apiLogger;
|
|
|
|
console.log('%c[DEBUG MODE] Enabled', 'color: #00ff88; font-weight: bold; font-size: 14px;');
|
|
console.log('Available globals:', {
|
|
__GRIDPILOT_GLOBAL_HANDLER__: globalHandler,
|
|
__GRIDPILOT_API_LOGGER__: apiLogger,
|
|
__GRIDPILOT_REACT_ERRORS__: (window as any).__GRIDPILOT_REACT_ERRORS__ || [],
|
|
});
|
|
};
|
|
|
|
const toggleDebug = () => {
|
|
const newEnabled = !debugEnabled;
|
|
setDebugEnabled(newEnabled);
|
|
|
|
if (newEnabled) {
|
|
initializeDebugFeatures();
|
|
} else {
|
|
// Disable debug features
|
|
const globalHandler = getGlobalErrorHandler();
|
|
globalHandler.destroy();
|
|
|
|
console.log('%c[DEBUG MODE] Disabled', 'color: #ff4444; font-weight: bold; font-size: 14px;');
|
|
}
|
|
};
|
|
|
|
const triggerTestError = () => {
|
|
if (!debugEnabled) return;
|
|
|
|
// Trigger a test API error
|
|
const testError = new Error('This is a test error for debugging');
|
|
(testError as any).type = 'TEST_ERROR';
|
|
|
|
const globalHandler = getGlobalErrorHandler();
|
|
globalHandler.report(testError, { test: true, timestamp: Date.now() });
|
|
|
|
console.log('%c[TEST] Error triggered', 'color: #ffaa00; font-weight: bold;', testError);
|
|
};
|
|
|
|
const triggerTestApiCall = async () => {
|
|
if (!debugEnabled) return;
|
|
|
|
try {
|
|
// This will fail and be logged
|
|
await fetch('https://httpstat.us/500');
|
|
} catch (error) {
|
|
// Already logged by interceptor
|
|
console.log('%c[TEST] API call completed', 'color: #00aaff; font-weight: bold;');
|
|
}
|
|
};
|
|
|
|
const clearAllLogs = () => {
|
|
const globalHandler = getGlobalErrorHandler();
|
|
const apiLogger = getGlobalApiLogger();
|
|
|
|
globalHandler.clearHistory();
|
|
apiLogger.clearHistory();
|
|
|
|
setMetrics({ errors: 0, apiRequests: 0, apiFailures: 0 });
|
|
|
|
console.log('%c[DEBUG] All logs cleared', 'color: #00ff88; font-weight: bold;');
|
|
};
|
|
|
|
const copyDebugInfo = async () => {
|
|
const globalHandler = getGlobalErrorHandler();
|
|
const apiLogger = getGlobalApiLogger();
|
|
|
|
const debugInfo = {
|
|
timestamp: new Date().toISOString(),
|
|
environment: {
|
|
mode: process.env.NODE_ENV,
|
|
appMode: process.env.NEXT_PUBLIC_GRIDPILOT_MODE,
|
|
version: process.env.NEXT_PUBLIC_APP_VERSION,
|
|
},
|
|
browser: {
|
|
userAgent: navigator.userAgent,
|
|
language: navigator.language,
|
|
platform: navigator.platform,
|
|
},
|
|
errors: globalHandler.getStats(),
|
|
api: apiLogger.getStats(),
|
|
reactErrors: (window as any).__GRIDPILOT_REACT_ERRORS__ || [],
|
|
};
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2));
|
|
console.log('%c[DEBUG] Debug info copied to clipboard', 'color: #00ff88; font-weight: bold;');
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err);
|
|
}
|
|
};
|
|
|
|
if (!shouldShow) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-4 left-4 z-50">
|
|
{/* Main Toggle Button */}
|
|
{!isOpen && (
|
|
<button
|
|
onClick={() => setIsOpen(true)}
|
|
className={`p-3 rounded-full shadow-lg transition-all ${
|
|
debugEnabled
|
|
? 'bg-green-600 hover:bg-green-700 text-white'
|
|
: 'bg-iron-gray hover:bg-charcoal-outline text-gray-300'
|
|
}`}
|
|
title={debugEnabled ? 'Debug Mode Active' : 'Enable Debug Mode'}
|
|
>
|
|
<Bug className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
|
|
{/* Debug Panel */}
|
|
{isOpen && (
|
|
<div className="w-80 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-3 py-2 bg-iron-gray/50 border-b border-charcoal-outline">
|
|
<div className="flex items-center gap-2">
|
|
<Bug className="w-4 h-4 text-green-400" />
|
|
<span className="text-sm font-semibold text-white">Debug Control</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="p-1 hover:bg-charcoal-outline rounded"
|
|
>
|
|
<X className="w-4 h-4 text-gray-400" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-3 space-y-3">
|
|
{/* Debug Toggle */}
|
|
<div className="flex items-center justify-between bg-iron-gray/30 p-2 rounded border border-charcoal-outline">
|
|
<div className="flex items-center gap-2">
|
|
<Shield className={`w-4 h-4 ${debugEnabled ? 'text-green-400' : 'text-gray-500'}`} />
|
|
<span className="text-sm font-medium">Debug Mode</span>
|
|
</div>
|
|
<button
|
|
onClick={toggleDebug}
|
|
className={`px-3 py-1 rounded text-xs font-bold transition-colors ${
|
|
debugEnabled
|
|
? 'bg-green-600 text-white hover:bg-green-700'
|
|
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
|
}`}
|
|
>
|
|
{debugEnabled ? 'ON' : 'OFF'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Metrics */}
|
|
{debugEnabled && (
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
|
|
<div className="text-[10px] text-gray-500">Errors</div>
|
|
<div className="text-lg font-bold text-red-400">{metrics.errors}</div>
|
|
</div>
|
|
<div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
|
|
<div className="text-[10px] text-gray-500">API</div>
|
|
<div className="text-lg font-bold text-blue-400">{metrics.apiRequests}</div>
|
|
</div>
|
|
<div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
|
|
<div className="text-[10px] text-gray-500">Failures</div>
|
|
<div className="text-lg font-bold text-yellow-400">{metrics.apiFailures}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
{debugEnabled && (
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-semibold text-gray-400">Test Actions</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={triggerTestError}
|
|
className="px-2 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded text-xs font-medium"
|
|
>
|
|
Test Error
|
|
</button>
|
|
<button
|
|
onClick={triggerTestApiCall}
|
|
className="px-2 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-xs font-medium"
|
|
>
|
|
Test API
|
|
</button>
|
|
</div>
|
|
|
|
<div className="text-xs font-semibold text-gray-400 mt-2">Utilities</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={copyDebugInfo}
|
|
className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded text-xs font-medium border border-charcoal-outline"
|
|
>
|
|
Copy Info
|
|
</button>
|
|
<button
|
|
onClick={clearAllLogs}
|
|
className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded text-xs font-medium border border-charcoal-outline"
|
|
>
|
|
Clear Logs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Links */}
|
|
{debugEnabled && (
|
|
<div className="space-y-1">
|
|
<div className="text-xs font-semibold text-gray-400">Quick Access</div>
|
|
<div className="text-[10px] text-gray-500 font-mono space-y-0.5">
|
|
<div>• window.__GRIDPILOT_GLOBAL_HANDLER__</div>
|
|
<div>• window.__GRIDPILOT_API_LOGGER__</div>
|
|
<div>• window.__GRIDPILOT_REACT_ERRORS__</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Status */}
|
|
<div className="text-[10px] text-gray-500 text-center pt-2 border-t border-charcoal-outline">
|
|
{debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
|
|
{isDev && ' • Development Environment'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Hook for programmatic debug control
|
|
*/
|
|
export function useDebugMode() {
|
|
const [debugEnabled, setDebugEnabled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem('gridpilot_debug_enabled');
|
|
setDebugEnabled(saved === 'true');
|
|
}, []);
|
|
|
|
const enable = () => {
|
|
setDebugEnabled(true);
|
|
localStorage.setItem('gridpilot_debug_enabled', 'true');
|
|
|
|
// Initialize debug features
|
|
const globalHandler = getGlobalErrorHandler();
|
|
globalHandler.initialize();
|
|
|
|
const apiLogger = getGlobalApiLogger();
|
|
if (!(window as any).__GRIDPILOT_FETCH_LOGGED__) {
|
|
const loggedFetch = apiLogger.createLoggedFetch();
|
|
window.fetch = loggedFetch as any;
|
|
(window as any).__GRIDPILOT_FETCH_LOGGED__ = true;
|
|
}
|
|
|
|
(window as any).__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
|
|
(window as any).__GRIDPILOT_API_LOGGER__ = apiLogger;
|
|
};
|
|
|
|
const disable = () => {
|
|
setDebugEnabled(false);
|
|
localStorage.setItem('gridpilot_debug_enabled', 'false');
|
|
|
|
const globalHandler = getGlobalErrorHandler();
|
|
globalHandler.destroy();
|
|
};
|
|
|
|
const toggle = () => {
|
|
if (debugEnabled) {
|
|
disable();
|
|
} else {
|
|
enable();
|
|
}
|
|
};
|
|
|
|
return {
|
|
enabled: debugEnabled,
|
|
enable,
|
|
disable,
|
|
toggle,
|
|
};
|
|
} |