| |
| |
| |
| |
| |
|
|
| import React from 'react' |
| import { RefreshCw, AlertTriangle } from 'lucide-react' |
|
|
| export default class ErrorBoundary extends React.Component { |
| constructor(props) { |
| super(props) |
| this.state = { hasError: false, error: null, info: null } |
| } |
|
|
| static getDerivedStateFromError(error) { |
| return { hasError: true, error } |
| } |
|
|
| componentDidCatch(error, info) { |
| console.error('[JARVIS ErrorBoundary]', error, info) |
| this.setState({ info }) |
| } |
|
|
| render() { |
| if (!this.state.hasError) return this.props.children |
|
|
| return ( |
| <div className="h-screen flex flex-col items-center justify-center |
| bg-jarvis-bg text-jarvis-text px-8 gap-6"> |
| {/* Icon */} |
| <div className="w-16 h-16 rounded-2xl bg-jarvis-error/10 border border-jarvis-error/30 |
| flex items-center justify-center"> |
| <AlertTriangle size={28} className="text-jarvis-error" /> |
| </div> |
| |
| {/* Message */} |
| <div className="text-center"> |
| <h2 className="font-display text-xl font-bold text-jarvis-error tracking-wider mb-2"> |
| SYSTEM ERROR |
| </h2> |
| <p className="text-jarvis-muted text-sm max-w-md"> |
| An unexpected error occurred. Your conversation history is safe — refresh to restart. |
| </p> |
| </div> |
| |
| {/* Error details */} |
| {this.state.error && ( |
| <div className="w-full max-w-md bg-jarvis-panel border border-jarvis-border |
| rounded-xl p-4 font-mono text-xs text-jarvis-error/80 break-all"> |
| {this.state.error.toString()} |
| </div> |
| )} |
| |
| {/* Recovery actions */} |
| <div className="flex gap-3"> |
| <button |
| onClick={() => window.location.reload()} |
| className="flex items-center gap-2 btn-accent" |
| > |
| <RefreshCw size={14} /> |
| Reload JARVIS |
| </button> |
| <button |
| onClick={() => { |
| localStorage.removeItem('jarvis-store') |
| window.location.reload() |
| }} |
| className="btn-ghost text-sm" |
| > |
| Clear State & Reload |
| </button> |
| </div> |
| </div> |
| ) |
| } |
| } |
|
|
