Spaces:
Running
Running
File size: 4,872 Bytes
afd56bc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | import { Component, ErrorInfo, ReactNode } from 'react';
interface Props {
children: ReactNode;
/** Opcjonalny custom fallback UI. Jeśli nie podany — wyświetla domyślny ekran błędu. */
fallback?: ReactNode;
/** Nazwa kontekstu — pomaga w logowaniu (np. "GeneratorPanel", "AuditPanel") */
context?: string;
}
interface State {
hasError: boolean;
error: Error | null;
errorInfo: ErrorInfo | null;
}
/**
* React Error Boundary — globalny łapacz błędów komponentów.
*
* Użycie:
* <ErrorBoundary context="GeneratorPanel">
* <AIGeneratorPanel />
* </ErrorBoundary>
*
* Krytyczny wymóg Beta 1.0 — bez tego crash komponentu = biały ekran.
* Zgodność: React 18+, wymaga klasy (hooks nie obsługują componentDidCatch).
*/
export class ErrorBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { hasError: false, error: null, errorInfo: null };
}
static getDerivedStateFromError(error: Error): Partial<State> {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
const context = this.props.context || 'unknown';
console.error(`[ErrorBoundary][${context}] Caught error:`, error, errorInfo);
this.setState({ errorInfo });
// Opcjonalne wysłanie do serwisu monitoringu (Sentry / LangSmith)
try {
if (typeof window !== 'undefined' && (window as any).Sentry) {
(window as any).Sentry.captureException(error, {
extra: { context, componentStack: errorInfo.componentStack },
});
}
} catch {
// Sentry niedostępny — ignoruj
}
}
handleReset = () => {
this.setState({ hasError: false, error: null, errorInfo: null });
};
render() {
if (this.state.hasError) {
if (this.props.fallback) {
return this.props.fallback;
}
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '200px',
padding: '2rem',
background: 'rgba(239,68,68,0.05)',
border: '1px solid rgba(239,68,68,0.2)',
borderRadius: '12px',
margin: '1rem',
textAlign: 'center',
}}>
<div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>⚠️</div>
<h3 style={{ color: '#f87171', fontWeight: 700, marginBottom: '0.5rem' }}>
Wystąpił nieoczekiwany błąd
</h3>
<p style={{ color: 'var(--text-muted)', fontSize: '0.875rem', maxWidth: '400px', marginBottom: '1.5rem' }}>
{this.state.error?.message || 'Nieznany błąd komponentu.'}
{this.props.context && (
<><br /><span style={{ opacity: 0.6 }}>Kontekst: {this.props.context}</span></>
)}
</p>
<button
onClick={this.handleReset}
style={{
background: 'rgba(239,68,68,0.15)',
border: '1px solid rgba(239,68,68,0.3)',
color: '#f87171',
borderRadius: '8px',
padding: '0.6rem 1.5rem',
cursor: 'pointer',
fontWeight: 600,
fontSize: '0.875rem',
}}
>
🔄 Spróbuj ponownie
</button>
{process.env.NODE_ENV === 'development' && this.state.errorInfo && (
<details style={{ marginTop: '1rem', textAlign: 'left', maxWidth: '600px' }}>
<summary style={{ color: 'var(--text-muted)', cursor: 'pointer', fontSize: '0.75rem' }}>
Stack trace (dev only)
</summary>
<pre style={{
fontSize: '0.7rem', color: '#f87171', opacity: 0.7,
overflow: 'auto', maxHeight: '200px', marginTop: '0.5rem',
}}>
{this.state.errorInfo.componentStack}
</pre>
</details>
)}
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
|