Error Handling & Recovery
Design patterns for error messages, error pages, inline validation, and recovery strategies that help users understand and resolve issues.
- Difficulty
- intermediate
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Use inline validation with specific error messages near the input. For form submission errors, show a summary at top with links to each error. Error pages (404, 500) should explain what happened and provide clear recovery actions. Use role='alert' for dynamic error messages. Never rely on color alone.
Use When
- Implementing form validation and error states
- Creating error pages (404, 500, etc.)
- Designing toast notifications for errors
- Building inline validation feedback
Skip When
- Creating success confirmations (see Loading States)
- Implementing system logging (backend concern)
Error Handling & Recovery
Design patterns for error messages, error pages, inline validation, and recovery strategies that help users understand and resolve issues.