347 lines
16 KiB
TypeScript
347 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import { ApiError } from '@/lib/api/base/ApiError';
|
||
import { connectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
|
||
import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
|
||
import { useState, useEffect } from 'react';
|
||
import { X, RefreshCw, Copy, Terminal, Activity, AlertTriangle } from 'lucide-react';
|
||
|
||
interface DevErrorPanelProps {
|
||
error: ApiError;
|
||
onReset: () => void;
|
||
}
|
||
|
||
/**
|
||
* Developer-focused error panel with detailed debugging information
|
||
*/
|
||
export function DevErrorPanel({ error, onReset }: DevErrorPanelProps) {
|
||
const [connectionStatus, setConnectionStatus] = useState(connectionMonitor.getHealth());
|
||
const [circuitBreakers, setCircuitBreakers] = useState(CircuitBreakerRegistry.getInstance().getStatus());
|
||
const [copied, setCopied] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// Update status on mount
|
||
const health = connectionMonitor.getHealth();
|
||
setConnectionStatus(health);
|
||
setCircuitBreakers(CircuitBreakerRegistry.getInstance().getStatus());
|
||
|
||
// Listen for status changes
|
||
const handleStatusChange = () => {
|
||
setConnectionStatus(connectionMonitor.getHealth());
|
||
setCircuitBreakers(CircuitBreakerRegistry.getInstance().getStatus());
|
||
};
|
||
|
||
connectionMonitor.on('success', handleStatusChange);
|
||
connectionMonitor.on('failure', handleStatusChange);
|
||
connectionMonitor.on('connected', handleStatusChange);
|
||
connectionMonitor.on('disconnected', handleStatusChange);
|
||
connectionMonitor.on('degraded', handleStatusChange);
|
||
|
||
return () => {
|
||
connectionMonitor.off('success', handleStatusChange);
|
||
connectionMonitor.off('failure', handleStatusChange);
|
||
connectionMonitor.off('connected', handleStatusChange);
|
||
connectionMonitor.off('disconnected', handleStatusChange);
|
||
connectionMonitor.off('degraded', handleStatusChange);
|
||
};
|
||
}, []);
|
||
|
||
const copyToClipboard = async () => {
|
||
const debugInfo = {
|
||
error: {
|
||
type: error.type,
|
||
message: error.message,
|
||
context: error.context,
|
||
stack: error.stack,
|
||
},
|
||
connection: connectionStatus,
|
||
circuitBreakers,
|
||
timestamp: new Date().toISOString(),
|
||
userAgent: navigator.userAgent,
|
||
url: window.location.href,
|
||
};
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2));
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 2000);
|
||
} catch (err) {
|
||
// Silent failure for clipboard operations
|
||
}
|
||
};
|
||
|
||
const triggerHealthCheck = async () => {
|
||
await connectionMonitor.performHealthCheck();
|
||
setConnectionStatus(connectionMonitor.getHealth());
|
||
};
|
||
|
||
const resetCircuitBreakers = () => {
|
||
CircuitBreakerRegistry.getInstance().resetAll();
|
||
setCircuitBreakers(CircuitBreakerRegistry.getInstance().getStatus());
|
||
};
|
||
|
||
const getSeverityColor = (type: string) => {
|
||
switch (error.getSeverity()) {
|
||
case 'error': return 'bg-red-500/20 text-red-400 border-red-500/40';
|
||
case 'warn': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/40';
|
||
case 'info': return 'bg-blue-500/20 text-blue-400 border-blue-500/40';
|
||
default: return 'bg-gray-500/20 text-gray-400 border-gray-500/40';
|
||
}
|
||
};
|
||
|
||
const reliability = connectionMonitor.getReliability();
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 overflow-auto bg-deep-graphite p-4 font-mono text-sm">
|
||
<div className="max-w-6xl mx-auto space-y-4">
|
||
{/* Header */}
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg p-4 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<Terminal className="w-5 h-5 text-primary-blue" />
|
||
<h2 className="text-lg font-bold text-white">API Error Debug Panel</h2>
|
||
<span className={`px-2 py-1 rounded border text-xs ${getSeverityColor(error.type)}`}>
|
||
{error.type}
|
||
</span>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={copyToClipboard}
|
||
className="px-3 py-1 bg-iron-gray hover:bg-charcoal-outline border border-charcoal-outline rounded text-gray-300 flex items-center gap-2"
|
||
title="Copy debug info"
|
||
>
|
||
<Copy className="w-4 h-4" />
|
||
{copied ? 'Copied!' : 'Copy'}
|
||
</button>
|
||
<button
|
||
onClick={onReset}
|
||
className="px-3 py-1 bg-primary-blue hover:bg-primary-blue/80 text-white rounded flex items-center gap-2"
|
||
>
|
||
<X className="w-4 h-4" />
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error Details */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||
<div className="space-y-4">
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg overflow-hidden">
|
||
<div className="bg-charcoal-outline px-4 py-2 font-semibold text-white flex items-center gap-2">
|
||
<AlertTriangle className="w-4 h-4" />
|
||
Error Details
|
||
</div>
|
||
<div className="p-4 space-y-2 text-xs">
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Type:</span>
|
||
<span className="col-span-2 text-red-400 font-bold">{error.type}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Message:</span>
|
||
<span className="col-span-2 text-gray-300">{error.message}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Endpoint:</span>
|
||
<span className="col-span-2 text-blue-400">{error.context.endpoint || 'N/A'}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Method:</span>
|
||
<span className="col-span-2 text-yellow-400">{error.context.method || 'N/A'}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Status:</span>
|
||
<span className="col-span-2">{error.context.statusCode || 'N/A'}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Retry Count:</span>
|
||
<span className="col-span-2">{error.context.retryCount || 0}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Timestamp:</span>
|
||
<span className="col-span-2 text-gray-500">{error.context.timestamp}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Retryable:</span>
|
||
<span className={`col-span-2 ${error.isRetryable() ? 'text-green-400' : 'text-red-400'}`}>
|
||
{error.isRetryable() ? 'Yes' : 'No'}
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Connectivity:</span>
|
||
<span className={`col-span-2 ${error.isConnectivityIssue() ? 'text-red-400' : 'text-green-400'}`}>
|
||
{error.isConnectivityIssue() ? 'Yes' : 'No'}
|
||
</span>
|
||
</div>
|
||
{error.context.troubleshooting && (
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Troubleshoot:</span>
|
||
<span className="col-span-2 text-yellow-400">{error.context.troubleshooting}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Connection Status */}
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg overflow-hidden">
|
||
<div className="bg-charcoal-outline px-4 py-2 font-semibold text-white flex items-center gap-2">
|
||
<Activity className="w-4 h-4" />
|
||
Connection Health
|
||
</div>
|
||
<div className="p-4 space-y-2 text-xs">
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Status:</span>
|
||
<span className={`col-span-2 font-bold ${
|
||
connectionStatus.status === 'connected' ? 'text-green-400' :
|
||
connectionStatus.status === 'degraded' ? 'text-yellow-400' :
|
||
'text-red-400'
|
||
}`}>
|
||
{connectionStatus.status.toUpperCase()}
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Reliability:</span>
|
||
<span className="col-span-2">{reliability.toFixed(2)}%</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Total Requests:</span>
|
||
<span className="col-span-2">{connectionStatus.totalRequests}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Successful:</span>
|
||
<span className="col-span-2 text-green-400">{connectionStatus.successfulRequests}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Failed:</span>
|
||
<span className="col-span-2 text-red-400">{connectionStatus.failedRequests}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Consecutive Failures:</span>
|
||
<span className="col-span-2">{connectionStatus.consecutiveFailures}</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Avg Response:</span>
|
||
<span className="col-span-2">{connectionStatus.averageResponseTime.toFixed(2)}ms</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<span className="text-gray-500">Last Check:</span>
|
||
<span className="col-span-2 text-gray-500">
|
||
{connectionStatus.lastCheck?.toLocaleTimeString() || 'Never'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column */}
|
||
<div className="space-y-4">
|
||
{/* Circuit Breakers */}
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg overflow-hidden">
|
||
<div className="bg-charcoal-outline px-4 py-2 font-semibold text-white flex items-center gap-2">
|
||
<span className="text-lg">⚡</span>
|
||
Circuit Breakers
|
||
</div>
|
||
<div className="p-4">
|
||
{Object.keys(circuitBreakers).length === 0 ? (
|
||
<div className="text-gray-500 text-center py-4">No circuit breakers active</div>
|
||
) : (
|
||
<div className="space-y-2 text-xs max-h-48 overflow-auto">
|
||
{Object.entries(circuitBreakers).map(([endpoint, status]) => (
|
||
<div key={endpoint} className="flex items-center justify-between p-2 bg-deep-graphite rounded border border-charcoal-outline">
|
||
<span className="text-blue-400 truncate flex-1">{endpoint}</span>
|
||
<span className={`px-2 py-1 rounded ${
|
||
status.state === 'CLOSED' ? 'bg-green-500/20 text-green-400' :
|
||
status.state === 'OPEN' ? 'bg-red-500/20 text-red-400' :
|
||
'bg-yellow-500/20 text-yellow-400'
|
||
}`}>
|
||
{status.state}
|
||
</span>
|
||
<span className="text-gray-500 ml-2">{status.failures} failures</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg overflow-hidden">
|
||
<div className="bg-charcoal-outline px-4 py-2 font-semibold text-white">
|
||
Actions
|
||
</div>
|
||
<div className="p-4 space-y-2">
|
||
<button
|
||
onClick={triggerHealthCheck}
|
||
className="w-full px-3 py-2 bg-primary-blue hover:bg-primary-blue/80 text-white rounded flex items-center justify-center gap-2"
|
||
>
|
||
<RefreshCw className="w-4 h-4" />
|
||
Run Health Check
|
||
</button>
|
||
<button
|
||
onClick={resetCircuitBreakers}
|
||
className="w-full px-3 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded flex items-center justify-center gap-2"
|
||
>
|
||
<span className="text-lg">🔄</span>
|
||
Reset Circuit Breakers
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
connectionMonitor.reset();
|
||
setConnectionStatus(connectionMonitor.getHealth());
|
||
}}
|
||
className="w-full px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded flex items-center justify-center gap-2"
|
||
>
|
||
<span className="text-lg">🗑️</span>
|
||
Reset Connection Stats
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Fixes */}
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg overflow-hidden">
|
||
<div className="bg-charcoal-outline px-4 py-2 font-semibold text-white">
|
||
Quick Fixes
|
||
</div>
|
||
<div className="p-4 space-y-2 text-xs">
|
||
<div className="text-gray-400">Common solutions:</div>
|
||
<ul className="list-disc list-inside space-y-1 text-gray-300">
|
||
<li>Check API server is running</li>
|
||
<li>Verify CORS configuration</li>
|
||
<li>Check environment variables</li>
|
||
<li>Review network connectivity</li>
|
||
<li>Check API rate limits</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Raw Error */}
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg overflow-hidden">
|
||
<div className="bg-charcoal-outline px-4 py-2 font-semibold text-white">
|
||
Raw Error
|
||
</div>
|
||
<div className="p-4">
|
||
<pre className="text-xs text-gray-400 overflow-auto max-h-32 bg-deep-graphite p-2 rounded">
|
||
{JSON.stringify({
|
||
type: error.type,
|
||
message: error.message,
|
||
context: error.context,
|
||
}, null, 2)}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Console Output */}
|
||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg overflow-hidden">
|
||
<div className="bg-charcoal-outline px-4 py-2 font-semibold text-white flex items-center gap-2">
|
||
<Terminal className="w-4 h-4" />
|
||
Console Output
|
||
</div>
|
||
<div className="p-4 bg-deep-graphite font-mono text-xs">
|
||
<div className="text-gray-500 mb-2">{'>'} {error.getDeveloperMessage()}</div>
|
||
<div className="text-gray-600">Check browser console for full stack trace and additional debug info.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |