Why This Matters

Reduces Downtime: Error boundaries prevent application crashes by catching and handling errors at component level
Improves User Retention: Users are less likely to abandon applications with good error handling
Reduces Support Costs: Good error reporting enables faster diagnosis and resolution of issues
Builds Trust: Applications that handle errors gracefully build trust with users
Enhances User Experience: Good fallback UI helps users understand situation and provides recovery options
Improves Development Velocity: Cleaner, well-structured code is faster to develop and maintain

Core Concepts & Rules

Inputs:
- React components
- Error tracking configuration
- Fallback UI components
- User session data
Entry Conditions:
- React 16+ is available
- Error tracking service is configured
- Fallback UI components are designed
Outputs:
- Error boundary components
- Error logging integration
- Fallback UI implementations
- Error recovery mechanisms
Artifacts Required (Deliverables):
- Error boundary components
- Error logging configuration
- Fallback UI components
- Error tracking dashboards
Acceptance Evidence:
- Errors are caught and logged
- Fallback UI is displayed appropriately
- Users can recover from errors
- Error tracking is configured
Success Criteria:
- All errors are caught and handled
- User experience is maintained during errors
- Error tracking is working
- Application remains stable

# Example implementation following best practices
def example_function():
    # Your implementation here
    pass

Assumptions:
- Development environment is properly configured
- Required dependencies are available
- Team has basic understanding of domain
Constraints:
- Must follow existing codebase conventions
- Time and resource limitations
- Compatibility requirements
Non-goals:
- This skill does not cover edge cases outside scope
- Not a replacement for formal training

Supported Versions:
- Python 3.8+
- Node.js 16+
- Modern browsers (Chrome, Firefox, Safari, Edge)
Required AI Tools:
- Code editor (VS Code recommended)
- Testing framework appropriate for language
- Version control (Git)
Dependencies:
- Language-specific package manager
- Build tools
- Testing libraries
Environment Setup:
- .env.example keys: API_KEY, DATABASE_URL (no values)

Type	Focus Area	Required Scenarios / Mocks
Unit	Core Logic	Must cover primary logic and at least 3 edge/error cases. Target minimum 80% coverage
Integration	DB / API	All external API calls or database connections must be mocked during unit tests
E2E	User Journey	Critical user flows to test
Performance	Latency / Load	Benchmark requirements
Security	Vuln / Auth	SAST/DAST or dependency audit
Frontend	UX / A11y	Accessibility checklist (WCAG), Performance Budget (Lighthouse score)

Data Handling: Sanitize all user inputs to prevent Injection attacks. Never log raw PII
Secrets Management: No hardcoded API keys. Use Env Vars/Secrets Manager
Authorization: Validate user permissions before state changes

Logging Standards: Structured JSON, include trace IDs request_id
Metrics: Track error_rate, latency, queue_depth
Error Handling: Standardized error codes, no bare except
Observability Artifacts:
- Log Fields: timestamp, level, message, request_id
- Metrics: request_count, error_count, response_time
- Dashboards/Alerts: High Error Rate > 5%

(ข้อกำหนดสำหรับ AI Agent ในการคิดและแก้ปัญหาเมื่อเกิดข้อผิดพลาด)

Thinking Process: Analyze root cause before fixing. Do not brute-force.
Fallback Strategy: Stop after 3 failed test attempts. Output root cause and ask for human intervention/clarification.
Self-Review: Check against Guardrails & Anti-patterns before finalizing.
Output Constraints: Output ONLY the modified code block. Do not explain unless asked.