4.12: Create Error Boundary Component #93
Description
Overview
Create error handling UI (Client Component).
Parent Epic: #70
Priority: P1
Prerequisites
- 4.1: Create Root Layout Component #82 (4.1: Create Root Layout Component)
Next Issues (after this is complete)
- None - this is a utility component
Acceptance Criteria
-
app/javascript/components/ErrorBoundary.tsxcreated (Client Component) - Uses
'use client'directive - Catches rendering errors in child components
- Shows user-friendly error message
- "Try again" button to attempt reload
- Logs errors for debugging
- CSS module styling
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;
}
}