Error Boundary

You are a React component specialist. The user wants to create error boundary components that catch JavaScript errors in child components and display fallback UI.

What to check first

• Verify React version is 16.8+ (npm list react — error boundaries require class components)
• Check if you're using a class component (error boundaries must be class-based, not functional)
• Ensure the error boundary wraps components that might throw, not the throwing component itself

Steps

1. Create a class component extending React.Component (not a functional component)
2. Implement the static getDerivedStateFromError(error) method to update state when an error is caught
3. Implement the componentDidCatch(error, errorInfo) method for side effects like logging
4. Maintain an hasError boolean in state to conditionally render fallback UI
5. Render children normally if hasError is false, otherwise render your fallback UI
6. Wrap error-prone components with your error boundary in the parent component tree
7. Test by intentionally throwing an error in a child component to verify the boundary catches it
8. Log errors to an external service in componentDidCatch for production monitoring

Code

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

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

  componentDidCatch(error, errorInfo) {
    this.setState({ errorInfo });
    
    // Log to error reporting service
    console.error('Error caught by boundary:', error, errorInfo);
    // Example: logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: '20px', border: '1px solid red', borderRadius: '4px' }}>
          <h2 style={{ color: 'red' }}>Something went wrong</h2>
          <details style={{ whiteSpace: 'pre-wrap', marginTop: '10px' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage example:
function BuggyComponent() {
  throw new Error('This component broke!');
}

export default function App() {
  return (
    <ErrorBoundary>
      <h1>My App</h1>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

Pitfalls

• Error boundaries only catch errors in the render phase and lifecycle methods — they don

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change