Overview
Create error handling UI (Client Component).
Parent Epic: #70
Priority: P1
Prerequisites
Next Issues (after this is complete)
- None - this is a utility component
Acceptance Criteria
Implementation Notes
'use client';
import { Component, ErrorInfo, ReactNode } from 'react';
interface Props {
children: ReactNode;
fallback?: ReactNode;
}
interface State {
hasError: boolean;
error?: Error;
}
export class ErrorBoundary extends Component<Props, State> {
state: State = { hasError: false };
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error('Error caught by boundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return this.props.fallback || (
<div>
<h2>Something went wrong</h2>
<button onClick={() => this.setState({ hasError: false })}>
Try again
</button>
</div>
);
}
return this.props.children;
}
}
Overview
Create error handling UI (Client Component).
Parent Epic: #70
Priority: P1
Prerequisites
Next Issues (after this is complete)
Acceptance Criteria
app/javascript/components/ErrorBoundary.tsxcreated (Client Component)'use client'directiveImplementation Notes