mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
apps/website/components/errors/EnhancedErrorBoundary.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import React, { Component, ReactNode, ErrorInfo } from 'react';
import React, { Component, ReactNode, ErrorInfo, useState, version } from 'react';
import { ApiError } from '@/lib/api/base/ApiError';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { DevErrorPanel } from './DevErrorPanel';
@@ -28,6 +28,15 @@ interface State {
isDev: boolean;
}
interface GridPilotWindow extends Window {
__GRIDPILOT_REACT_ERRORS__?: Array<{
error: Error;
errorInfo: ErrorInfo;
timestamp: string;
componentStack?: string;
}>;
}
/**
* Enhanced React Error Boundary with maximum developer transparency
* Integrates with GlobalErrorHandler and provides detailed debugging info
@@ -49,7 +58,7 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
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;
const digest = (error as Record<string, unknown>).digest;
if (typeof digest === 'string' && (
digest.startsWith('NEXT_REDIRECT') ||
digest.startsWith('NEXT_NOT_FOUND')
@@ -70,7 +79,7 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
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;
const digest = (error as Record<string, unknown>).digest;
if (typeof digest === 'string' && (
digest.startsWith('NEXT_REDIRECT') ||
digest.startsWith('NEXT_NOT_FOUND')
@@ -81,21 +90,26 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
}
// 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;
if (typeof window !== 'undefined') {
const gpWindow = window as unknown as GridPilotWindow;
const reactErrors = gpWindow.__GRIDPILOT_REACT_ERRORS__ || [];
gpWindow.__GRIDPILOT_REACT_ERRORS__ = [
...reactErrors,
{
error,
errorInfo,
timestamp: new Date().toISOString(),
componentStack: errorInfo.componentStack || undefined,
}
];
}
// Report to global error handler with enhanced context
const enhancedContext = {
...this.props.context,
source: 'react_error_boundary',
componentStack: errorInfo.componentStack,
reactVersion: React.version,
reactVersion: version,
componentName: this.getComponentName(errorInfo),
};
@@ -107,12 +121,6 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
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);
@@ -126,10 +134,6 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
}
}
componentWillUnmount(): void {
// Clean up if needed
}
/**
* Extract component name from error info
*/
@@ -146,108 +150,6 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
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
*/
@@ -265,7 +167,7 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
console.log('Component Stack:', errorInfo.componentStack);
console.log('React Context:', {
reactVersion: React.version,
reactVersion: version,
component: this.getComponentName(errorInfo),
timestamp: new Date().toISOString(),
});
@@ -273,28 +175,9 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
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) {
@@ -350,9 +233,9 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
* 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 [error, setError] = useState<Error | ApiError | null>(null);
const [errorInfo, setErrorInfo] = useState<ErrorInfo | null>(null);
const [isDev] = useState(process.env.NODE_ENV === 'development');
const handleError = (err: Error, info: ErrorInfo) => {
setError(err);
@@ -402,4 +285,4 @@ export function withEnhancedErrorBoundary<P extends object>(
);
WrappedComponent.displayName = `withEnhancedErrorBoundary(${Component.displayName || Component.name || 'Component'})`;
return WrappedComponent;
}
}