error-boundary
React error boundary hierarchy, fallback UI patterns, offline-first fallback, retry mechanisms, and graceful degradation.
npx skills add vibeeval/vibecosystem --skill error-boundary --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Error Boundary Patterns React error boundary hierarchy and graceful degradation patterns. ## Error Boundary Component ```typescript // Class-based (React requirement for componentDidCatch) interface ErrorBoundaryProps { children: React.ReactNode fallback?: React.ComponentType<FallbackProps> onError?: (error: Error, info: React.ErrorInfo) => void } interface ErrorBoundaryState { error: Error | null } export interface FallbackProps { error: Error reset: () => void } export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> { state: ErrorBoundaryState = { error: null } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { error } } componentDidCatch(error: Error, info: React.ErrorInfo) { console.error('[ErrorBoundary]', error, info.componentStack) this.props.onError?.(error, info) } reset = () => this.setState({ error: null }) render() { if (this.state.error) { const Fallback = this.props.fallback ?? DefaultFallback return <Fallback error={this.state.error} reset={this.reset} /> } return this.props.children } } // react-error-boundary library (recommended — battle-tested) // npm install react-error-boundary import { ErrorBounda
- Error Boundary Component
- Error Boundary Hierarchy
- Fallback UI Design Patterns
- Retry Mechanism in Error Boundaries
- Error Reporting (Sentry Integration)
- Offline Detection and Fallback UI
- Partial Failure Handling
- Error Recovery (Reset on Navigation)
- Development vs Production Error Display
- Testing Error Boundaries
- Decision Matrix
- Original Patterns (preserved for reference)
- Basic Error Boundary (react-error-boundary)
- Next.js App Router (error.tsx)
What does the error-boundary skill do?
React error boundary hierarchy, fallback UI patterns, offline-first fallback, retry mechanisms, and graceful degradation.
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill error-boundary --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.