agent-ecosystem/src/renderer/components/team/editor/EditorErrorBoundary.tsx
iliya 5b0c7d13fc feat: add project editor with drag & drop file management
- Backend: ProjectFileService with file CRUD, search, git status, file watcher
- IPC: 12 editor channels with security validation and path containment
- Store: editorSlice with multi-tab management, draft persistence, conflict detection
- UI: CodeMirror 6 editor, file tree with DnD, search-in-files, context menus
- Move: fs.rename with EXDEV fallback, full path remapping across all caches
- Tests: comprehensive coverage for services, IPC handlers, store, and utilities
2026-02-28 23:40:41 +02:00

58 lines
1.6 KiB
TypeScript

/**
* React error boundary wrapping CodeMirrorEditor.
*
* Catches runtime CM6 errors (OOM, bad extension, corrupted EditorState)
* and shows a fallback UI instead of crashing the entire overlay.
*/
import React from 'react';
import { AlertTriangle } from 'lucide-react';
interface Props {
filePath: string;
onRetry?: () => void;
children: React.ReactNode;
}
interface State {
hasError: boolean;
error: string | null;
}
export class EditorErrorBoundary extends React.Component<Props, State> {
state: State = { hasError: false, error: null };
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error: error.message };
}
componentDidCatch(error: Error, info: React.ErrorInfo): void {
console.error(`[EditorErrorBoundary] ${this.props.filePath}:`, error, info.componentStack);
}
handleRetry = (): void => {
this.setState({ hasError: false, error: null });
this.props.onRetry?.();
};
render(): React.ReactElement {
if (this.state.hasError) {
return (
<div className="flex h-full flex-col items-center justify-center gap-3 text-text-muted">
<AlertTriangle className="size-12 text-red-400 opacity-50" />
<p className="max-w-md text-center text-sm text-text-secondary">
Editor crashed: {this.state.error ?? 'Unknown error'}
</p>
<button
onClick={this.handleRetry}
className="rounded border border-border px-3 py-1.5 text-xs text-text-secondary transition-colors hover:bg-surface-raised"
>
Retry
</button>
</div>
);
}
return <>{this.props.children}</>;
}
}