--- name: handle_errors description: Handle API and UI errors gracefully using error boundaries, toast notifications, and Claude code for error orchestration. Use this skill whenever an error occurs in frontend or backend calls to ensure proper error handling and user experience. license: Complete terms in LICENSE.txt --- # Handle Errors Skill This skill provides a comprehensive error handling solution for both API and UI errors in a Next.js application. ## Purpose Handle API and UI errors gracefully to provide a better user experience and prevent application crashes. This skill manages error boundaries, displays informative notifications, and orchestrates error handling using Claude code. ## When to Use Use this skill whenever an error occurs in frontend or backend calls. This includes: - API request failures - Network connectivity issues - Invalid user inputs - Server-side errors - Component rendering errors - Unhandled exceptions in the application ## Implementation Overview The error handling is implemented using: - Error boundaries for catching component-level errors - Toast notifications for displaying error messages - Claude code for error orchestration and categorization ## Detailed Implementation ### 1. Error Boundary Component Create an error boundary component to catch JavaScript errors anywhere in the child component tree: ```jsx \/\/ components\/ErrorBoundary.jsx import React from 'react'; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null, errorInfo: null }; } static getDerivedStateFromError(error) { \/\/ Update state so the next render will show the fallback UI return { hasError: true }; } componentDidCatch(error, errorInfo) { \/\/ Log the error to an error reporting service console.error('Error caught by boundary:', error, errorInfo); this.setState({ error: error, errorInfo: errorInfo }); \/\/ Send error to error reporting service this.reportError(error, errorInfo); } reportError = (error, errorInfo) => { \/\/ Send error to your error reporting service (e.g., Sentry, LogRocket) if (process.env.NODE_ENV === 'production') { \/\/ Example: Report to external service \/\/ ErrorReportingService.captureException(error, { errorInfo }); } }; render() { if (this.state.hasError) { \/\/ You can render any custom fallback UI return (

Something went wrong<\/h2>

Error:<\/strong> {this.state.error?.toString()}<\/p>

More details<\/summary>
{this.state.errorInfo?.componentStack} <\/pre> <\/details> <\/div>