Frontend Quality Error Boundaries

Frontend Quality Error Boundaries

When to use this skill

• Catching React errors
• Preventing app crashes
• Showing fallback UI

Workflow

• Create error boundary component
• Wrap app/routes
• Log errors
• Show user-friendly fallback
• Add reset functionality

Instructions

Error Boundary

class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Caught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong</h1>
          <button => this.setState({ hasError: false })}>
            Try again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

Usage

<ErrorBoundary>
  <App />
</ErrorBoundary>

Resources

• Wrap entire app or specific routes
• Log errors to monitoring service
• Provide reset mechanism