An interface is only as robust as its failure boundaries — great products design the error, empty, offline, and partial-degradation states with the same fidelity as the ideal path.
1. Map component resilience zones
Deconstruct the page into isolated resilience zones (e.g. global shell, sidebar widgets, main data feed, analytics summary). An error in one zone (like a third-party analytics widget) must never trigger a white screen or crash the entire page.
2. Design the complete 5-state matrix per view
For every view or data-dependent component, document:
- Ideal State: Full data populated, typical user scenario.
- Empty State (First Use / Zero Data): No data created yet. Explain the value proposition and provide a clear primary CTA to create the first entity.
- Empty State (Filtered / Zero Matches): User search or filter returned zero results. Provide clear action to reset filters without leaving the page.
- Partial Failure / Degraded State: 3 of 4 API queries succeeded. Show the 3 working modules and display an inline retry card for the failed 4th module.
- Fatal Error / Network Failure: Request failed or timed out. Provide plain-language diagnostic ("Unable to reach billing server") + retry button + offline status indicator.
3. Establish clear error communication standards
Never display raw stack traces, status codes (e.g., "Error 500"), or generic phrases ("Something went wrong") without actionable next steps:
- What happened: Explain in human terms without jargon.
- Why it matters: State whether data was saved or lost.
- How to recover: Provide an immediate action (Retry, Edit Input, Contact Support, Work Offline).
4. Design optimistic updates and rollback UX
When an action takes time (e.g. liking, archiving, deleting, status toggle):
- Apply UI state immediately to feel instantaneous.
- If the server returns an error, gracefully rollback the UI state and display a floating toast or inline banner with a "Retry" trigger.
5. Define offline and reconnect behaviors
- Detect offline status via browser
navigator.onLine and offline events.
- Display a non-intrusive status banner indicating offline mode.
- Queue user mutations locally when applicable (IndexedDB/localStorage) and provide a sync status indicator when connection is restored.
Completion Criteria
Output
A resilience-matrix.md or component state table detailing how each module behaves across all failure and empty conditions with specific error copy and recovery affordances.
Anti-patterns
- Global full-page error screens for localized widget failures.
- Dead-end empty states with no guidance or CTA button.
- "Something went wrong" without a retry button or clear recovery step.
- Silent failures where optimistic changes revert without user notification.
1---2name: error-boundary-resilience-design3description: Design comprehensive state resilience including empty, partial, offline, timeout, and failure states. Use when error state, empty state, offline mode, fallback UI, or resilient UX.4---56**An interface is only as robust as its failure boundaries — great products design the error, empty, offline, and partial-degradation states with the same fidelity as the ideal path.**78### 1. Map component resilience zones9Deconstruct the page into isolated resilience zones (e.g. global shell, sidebar widgets, main data feed, analytics summary). An error in one zone (like a third-party analytics widget) must never trigger a white screen or crash the entire page.1011### 2. Design the complete 5-state matrix per view12For every view or data-dependent component, document:131. **Ideal State**: Full data populated, typical user scenario.142. **Empty State (First Use / Zero Data)**: No data created yet. Explain the value proposition and provide a clear primary CTA to create the first entity.153. **Empty State (Filtered / Zero Matches)**: User search or filter returned zero results. Provide clear action to reset filters without leaving the page.164. **Partial Failure / Degraded State**: 3 of 4 API queries succeeded. Show the 3 working modules and display an inline retry card for the failed 4th module.175. **Fatal Error / Network Failure**: Request failed or timed out. Provide plain-language diagnostic ("Unable to reach billing server") + retry button + offline status indicator.1819### 3. Establish clear error communication standards20Never display raw stack traces, status codes (e.g., "Error 500"), or generic phrases ("Something went wrong") without actionable next steps:21- **What happened**: Explain in human terms without jargon.22- **Why it matters**: State whether data was saved or lost.23- **How to recover**: Provide an immediate action (Retry, Edit Input, Contact Support, Work Offline).2425### 4. Design optimistic updates and rollback UX26When an action takes time (e.g. liking, archiving, deleting, status toggle):27- Apply UI state immediately to feel instantaneous.28- If the server returns an error, gracefully rollback the UI state and display a floating toast or inline banner with a "Retry" trigger.2930### 5. Define offline and reconnect behaviors31- Detect offline status via browser `navigator.onLine` and `offline` events.32- Display a non-intrusive status banner indicating offline mode.33- Queue user mutations locally when applicable (IndexedDB/localStorage) and provide a sync status indicator when connection is restored.3435## Completion Criteria36- [ ] Every data container has documented Ideal, Empty (first-use & filtered), Degraded, and Error states37- [ ] Error messages contain explanation, impact, and immediate recovery CTA38- [ ] Partial failure boundaries defined so one broken widget does not crash the viewport39- [ ] Optimistic update failure and rollback flows documented40- [ ] Offline status presentation and sync reconciliation behavior defined4142## Output43A `resilience-matrix.md` or component state table detailing how each module behaves across all failure and empty conditions with specific error copy and recovery affordances.4445## Anti-patterns46- Global full-page error screens for localized widget failures.47- Dead-end empty states with no guidance or CTA button.48- "Something went wrong" without a retry button or clear recovery step.49- Silent failures where optimistic changes revert without user notification.
Uwayxt