405 lines
13 KiB
TypeScript
405 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import React, { Component, ReactNode, ErrorInfo } from 'react';
|
|
import { ApiError } from '@/lib/api/base/ApiError';
|
|
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
|
|
import { DevErrorPanel } from './DevErrorPanel';
|
|
import { ErrorDisplay } from './ErrorDisplay';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
fallback?: ReactNode;
|
|
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
|
onReset?: () => void;
|
|
/**
|
|
* Whether to show the enhanced dev overlay
|
|
*/
|
|
enableDevOverlay?: boolean;
|
|
/**
|
|
* Additional context to include with errors
|
|
*/
|
|
context?: Record<string, unknown>;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error: Error | ApiError | null;
|
|
errorInfo: ErrorInfo | null;
|
|
isDev: boolean;
|
|
}
|
|
|
|
/**
|
|
* Enhanced React Error Boundary with maximum developer transparency
|
|
* Integrates with GlobalErrorHandler and provides detailed debugging info
|
|
*/
|
|
export class EnhancedErrorBoundary extends Component<Props, State> {
|
|
private globalErrorHandler: ReturnType<typeof getGlobalErrorHandler>;
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = {
|
|
hasError: false,
|
|
error: null,
|
|
errorInfo: null,
|
|
isDev: process.env.NODE_ENV === 'development',
|
|
};
|
|
this.globalErrorHandler = getGlobalErrorHandler();
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error): State {
|
|
// Don't catch Next.js navigation errors (redirect, notFound, etc.)
|
|
if (error && typeof error === 'object' && 'digest' in error) {
|
|
const digest = (error as any).digest;
|
|
if (typeof digest === 'string' && (
|
|
digest.startsWith('NEXT_REDIRECT') ||
|
|
digest.startsWith('NEXT_NOT_FOUND')
|
|
)) {
|
|
// Re-throw Next.js navigation errors so they can be handled properly
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
return {
|
|
hasError: true,
|
|
error,
|
|
errorInfo: null,
|
|
isDev: process.env.NODE_ENV === 'development',
|
|
};
|
|
}
|
|
|
|
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
|
|
// Don't catch Next.js navigation errors (redirect, notFound, etc.)
|
|
if (error && typeof error === 'object' && 'digest' in error) {
|
|
const digest = (error as any).digest;
|
|
if (typeof digest === 'string' && (
|
|
digest.startsWith('NEXT_REDIRECT') ||
|
|
digest.startsWith('NEXT_NOT_FOUND')
|
|
)) {
|
|
// Re-throw Next.js navigation errors so they can be handled properly
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// Add to React error history
|
|
const reactErrors = (window as any).__GRIDPILOT_REACT_ERRORS__ || [];
|
|
reactErrors.push({
|
|
error,
|
|
errorInfo,
|
|
timestamp: new Date().toISOString(),
|
|
componentStack: errorInfo.componentStack,
|
|
});
|
|
(window as any).__GRIDPILOT_REACT_ERRORS__ = reactErrors;
|
|
|
|
// Report to global error handler with enhanced context
|
|
const enhancedContext = {
|
|
...this.props.context,
|
|
source: 'react_error_boundary',
|
|
componentStack: errorInfo.componentStack,
|
|
reactVersion: React.version,
|
|
componentName: this.getComponentName(errorInfo),
|
|
};
|
|
|
|
// Use global error handler for maximum transparency
|
|
this.globalErrorHandler.report(error, enhancedContext);
|
|
|
|
// Call custom error handler if provided
|
|
if (this.props.onError) {
|
|
this.props.onError(error, errorInfo);
|
|
}
|
|
|
|
// Show dev overlay if enabled
|
|
if (this.props.enableDevOverlay && this.state.isDev) {
|
|
// The global handler will show the overlay, but we can add additional React-specific info
|
|
this.showReactDevOverlay(error, errorInfo);
|
|
}
|
|
|
|
// Log to console with maximum detail
|
|
if (this.state.isDev) {
|
|
this.logReactErrorWithMaximumDetail(error, errorInfo);
|
|
}
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
// Initialize global error handler if not already done
|
|
if (this.props.enableDevOverlay && this.state.isDev) {
|
|
this.globalErrorHandler.initialize();
|
|
}
|
|
}
|
|
|
|
componentWillUnmount(): void {
|
|
// Clean up if needed
|
|
}
|
|
|
|
/**
|
|
* Extract component name from error info
|
|
*/
|
|
private getComponentName(errorInfo: ErrorInfo): string | undefined {
|
|
try {
|
|
const stack = errorInfo.componentStack;
|
|
if (stack) {
|
|
const match = stack.match(/at (\w+)/);
|
|
return match ? match[1] : undefined;
|
|
}
|
|
} catch {
|
|
// Ignore
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
/**
|
|
* Show React-specific dev overlay
|
|
*/
|
|
private showReactDevOverlay(error: Error, errorInfo: ErrorInfo): void {
|
|
const existingOverlay = document.getElementById('gridpilot-react-overlay');
|
|
if (existingOverlay) {
|
|
this.updateReactDevOverlay(existingOverlay, error, errorInfo);
|
|
return;
|
|
}
|
|
|
|
const overlay = document.createElement('div');
|
|
overlay.id = 'gridpilot-react-overlay';
|
|
overlay.style.cssText = `
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 80vh;
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 12px;
|
|
z-index: 999998;
|
|
overflow: auto;
|
|
padding: 20px;
|
|
border: 3px solid #ff6600;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 40px rgba(255, 102, 0, 0.6);
|
|
`;
|
|
|
|
this.updateReactDevOverlay(overlay, error, errorInfo);
|
|
document.body.appendChild(overlay);
|
|
|
|
// Add keyboard shortcut to dismiss
|
|
const dismissHandler = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
overlay.remove();
|
|
document.removeEventListener('keydown', dismissHandler);
|
|
}
|
|
};
|
|
document.addEventListener('keydown', dismissHandler);
|
|
}
|
|
|
|
/**
|
|
* Update React dev overlay
|
|
*/
|
|
private updateReactDevOverlay(overlay: HTMLElement, error: Error, errorInfo: ErrorInfo): void {
|
|
overlay.innerHTML = `
|
|
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
|
|
<h2 style="color: #ff6600; margin: 0; font-size: 18px;">⚛️ React Component Error</h2>
|
|
<button onclick="this.parentElement.parentElement.remove()"
|
|
style="background: #ff6600; color: white; border: none; padding: 6px 12px; cursor: pointer; border-radius: 4px; font-weight: bold;">
|
|
CLOSE
|
|
</button>
|
|
</div>
|
|
|
|
<div style="background: #000; padding: 12px; border-radius: 4px; margin-bottom: 15px; border-left: 3px solid #ff6600;">
|
|
<div style="color: #ff6600; font-weight: bold; margin-bottom: 5px;">Error Message</div>
|
|
<div style="color: #fff;">${error.message}</div>
|
|
</div>
|
|
|
|
<div style="background: #000; padding: 12px; border-radius: 4px; margin-bottom: 15px; border-left: 3px solid #00aaff;">
|
|
<div style="color: #00aaff; font-weight: bold; margin-bottom: 5px;">Component Stack Trace</div>
|
|
<pre style="margin: 0; white-space: pre-wrap; color: #888;">${errorInfo.componentStack || 'No component stack available'}</pre>
|
|
</div>
|
|
|
|
<div style="background: #000; padding: 12px; border-radius: 4px; margin-bottom: 15px; border-left: 3px solid #ffaa00;">
|
|
<div style="color: #ffaa00; font-weight: bold; margin-bottom: 5px;">JavaScript Stack Trace</div>
|
|
<pre style="margin: 0; white-space: pre-wrap; color: #888; overflow-x: auto;">${error.stack || 'No stack trace available'}</pre>
|
|
</div>
|
|
|
|
<div style="background: #000; padding: 12px; border-radius: 4px; margin-bottom: 15px; border-left: 3px solid #00ff88;">
|
|
<div style="color: #00ff88; font-weight: bold; margin-bottom: 5px;">React Information</div>
|
|
<div style="line-height: 1.6; color: #888;">
|
|
<div>React Version: ${React.version}</div>
|
|
<div>Error Boundary: Active</div>
|
|
<div>Timestamp: ${new Date().toLocaleTimeString()}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: #000; padding: 12px; border-radius: 4px; border-left: 3px solid #aa00ff;">
|
|
<div style="color: #aa00ff; font-weight: bold; margin-bottom: 5px;">Quick Actions</div>
|
|
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
|
<button onclick="navigator.clipboard.writeText(\`${error.message}\n\nComponent Stack:\n${errorInfo.componentStack}\n\nStack:\n${error.stack}\`)"
|
|
style="background: #0066cc; color: white; border: none; padding: 6px 10px; cursor: pointer; border-radius: 4px; font-size: 11px;">
|
|
📋 Copy Details
|
|
</button>
|
|
<button onclick="window.location.reload()"
|
|
style="background: #cc6600; color: white; border: none; padding: 6px 10px; cursor: pointer; border-radius: 4px; font-size: 11px;">
|
|
🔄 Reload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 15px; padding: 10px; background: #222; border-radius: 4px; border-left: 3px solid #888; font-size: 11px; color: #888;">
|
|
💡 This React error boundary caught a component rendering error. Check the console for additional details from the global error handler.
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Log React error with maximum detail
|
|
*/
|
|
private logReactErrorWithMaximumDetail(error: Error, errorInfo: ErrorInfo): void {
|
|
console.groupCollapsed('%c[REACT ERROR BOUNDARY] Component Rendering Failed',
|
|
'color: #ff6600; font-weight: bold; font-size: 14px;'
|
|
);
|
|
|
|
console.log('Error Details:', {
|
|
message: error.message,
|
|
name: error.name,
|
|
stack: error.stack,
|
|
});
|
|
|
|
console.log('Component Stack:', errorInfo.componentStack);
|
|
|
|
console.log('React Context:', {
|
|
reactVersion: React.version,
|
|
component: this.getComponentName(errorInfo),
|
|
timestamp: new Date().toISOString(),
|
|
});
|
|
|
|
console.log('Props:', this.props);
|
|
console.log('State:', this.state);
|
|
|
|
// Show component hierarchy if available
|
|
try {
|
|
const hierarchy = this.getComponentHierarchy();
|
|
if (hierarchy) {
|
|
console.log('Component Hierarchy:', hierarchy);
|
|
}
|
|
} catch {
|
|
// Ignore hierarchy extraction errors
|
|
}
|
|
|
|
console.groupEnd();
|
|
}
|
|
|
|
/**
|
|
* Attempt to extract component hierarchy (for debugging)
|
|
*/
|
|
private getComponentHierarchy(): string | null {
|
|
// This is a simplified version - in practice, you might want to use React DevTools
|
|
// or other methods to get the full component tree
|
|
return null;
|
|
}
|
|
|
|
resetError = (): void => {
|
|
this.setState({ hasError: false, error: null, errorInfo: null });
|
|
if (this.props.onReset) {
|
|
this.props.onReset();
|
|
}
|
|
};
|
|
|
|
render(): ReactNode {
|
|
if (this.state.hasError && this.state.error) {
|
|
if (this.props.fallback) {
|
|
return this.props.fallback;
|
|
}
|
|
|
|
// Show different UI based on environment
|
|
if (this.state.isDev) {
|
|
return (
|
|
<DevErrorPanel
|
|
error={this.state.error instanceof ApiError ? this.state.error : new ApiError(
|
|
this.state.error.message,
|
|
'UNKNOWN_ERROR',
|
|
{
|
|
timestamp: new Date().toISOString(),
|
|
source: 'react_error_boundary',
|
|
},
|
|
this.state.error
|
|
)}
|
|
onReset={this.resetError}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ErrorDisplay
|
|
error={this.state.error instanceof ApiError ? this.state.error : new ApiError(
|
|
this.state.error.message,
|
|
'UNKNOWN_ERROR',
|
|
{
|
|
timestamp: new Date().toISOString(),
|
|
source: 'react_error_boundary',
|
|
},
|
|
this.state.error
|
|
)}
|
|
onRetry={this.resetError}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Hook-based alternative for functional components
|
|
*/
|
|
export function useEnhancedErrorBoundary() {
|
|
const [error, setError] = React.useState<Error | ApiError | null>(null);
|
|
const [errorInfo, setErrorInfo] = React.useState<ErrorInfo | null>(null);
|
|
const [isDev] = React.useState(process.env.NODE_ENV === 'development');
|
|
|
|
const handleError = (err: Error, info: ErrorInfo) => {
|
|
setError(err);
|
|
setErrorInfo(info);
|
|
|
|
// Report to global handler
|
|
const globalHandler = getGlobalErrorHandler();
|
|
globalHandler.report(err, {
|
|
source: 'react_hook_boundary',
|
|
componentStack: info.componentStack,
|
|
});
|
|
};
|
|
|
|
const reset = () => {
|
|
setError(null);
|
|
setErrorInfo(null);
|
|
};
|
|
|
|
return {
|
|
error,
|
|
errorInfo,
|
|
isDev,
|
|
handleError,
|
|
reset,
|
|
ErrorBoundary: ({ children, enableDevOverlay }: { children: ReactNode; enableDevOverlay?: boolean }) => (
|
|
<EnhancedErrorBoundary
|
|
onError={handleError}
|
|
enableDevOverlay={enableDevOverlay}
|
|
>
|
|
{children}
|
|
</EnhancedErrorBoundary>
|
|
),
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Higher-order component wrapper for easy usage
|
|
*/
|
|
export function withEnhancedErrorBoundary<P extends object>(
|
|
Component: React.ComponentType<P>,
|
|
options: Omit<Props, 'children'> = {}
|
|
): React.FC<P> {
|
|
const WrappedComponent = (props: P) => (
|
|
<EnhancedErrorBoundary {...options}>
|
|
<Component {...props} />
|
|
</EnhancedErrorBoundary>
|
|
);
|
|
WrappedComponent.displayName = `withEnhancedErrorBoundary(${Component.displayName || Component.name || 'Component'})`;
|
|
return WrappedComponent;
|
|
} |