feat: add error handling, toast notifications, connection status, and retry logic (#20)
Add global error boundary, toast notification system for gRPC errors, connection status indicator in chat header, and automatic retry with exponential backoff for transient failures. Map gRPC status codes to user-friendly messages and add a Retry button on failed requests. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -21,3 +21,4 @@
|
||||
| #17 | Audit/activity log view | COMPLETED | [issue-017.md](issue-017.md) |
|
||||
| #18 | Dark/light theme toggle | COMPLETED | [issue-018.md](issue-018.md) |
|
||||
| #19 | Responsive layout and mobile support | COMPLETED | [issue-019.md](issue-019.md) |
|
||||
| #20 | Error handling and connection status | COMPLETED | [issue-020.md](issue-020.md) |
|
||||
|
||||
44
implementation-plans/issue-020.md
Normal file
44
implementation-plans/issue-020.md
Normal file
@@ -0,0 +1,44 @@
|
||||
# Issue #20 — Error handling and connection status
|
||||
|
||||
**Status: COMPLETED**
|
||||
|
||||
## Overview
|
||||
Global error boundary, toast notifications for gRPC errors, connection status indicator, and retry logic with exponential backoff.
|
||||
|
||||
## Implemented Components
|
||||
|
||||
### Toast System
|
||||
- **`src/lib/stores/toast.svelte.ts`** — Svelte 5 runes-based toast store with `addToast`, `removeToast`, `clear`. Auto-dismiss with configurable durations (5s for success/info, 10s for errors, 8s for warnings).
|
||||
- **`src/lib/components/ToastContainer.svelte`** — Fixed bottom-right toast stack. Color-coded by type (red/amber/green/blue) with icons, dismiss buttons, and full dark mode support.
|
||||
|
||||
### Connection Status
|
||||
- **`src/lib/stores/connection.svelte.ts`** — Tracks gRPC connection state (`connected` / `reconnecting` / `disconnected`) based on consecutive failures.
|
||||
- **`src/lib/components/ConnectionStatus.svelte`** — Header indicator with colored dot (green/amber-pulse/red) and label. Dark mode support.
|
||||
|
||||
### Retry Logic
|
||||
- **`src/lib/services/orchestrator.ts`** — Added:
|
||||
- Exponential backoff retry (up to 3 retries) for transient gRPC codes (`UNAVAILABLE`, `DEADLINE_EXCEEDED`, `ABORTED`, `INTERNAL`).
|
||||
- `friendlyMessage()` mapper from gRPC codes to user-friendly strings.
|
||||
- Connection store integration (reports success/failure).
|
||||
- Toast notifications on errors.
|
||||
|
||||
### Error Boundary
|
||||
- **`src/routes/+error.svelte`** — Global SvelteKit error page with status code, friendly message, and "Go back" / "Try again" / "Home" buttons. Full dark mode support.
|
||||
|
||||
### Integration
|
||||
- **`src/routes/+layout.svelte`** — Added `ToastContainer` to global layout.
|
||||
- **`src/routes/chat/+page.svelte`** — Added `ConnectionStatus` in header, "Retry" button on failed requests, toast notifications on errors, user-friendly error messages.
|
||||
|
||||
## Files Changed
|
||||
| File | Change |
|
||||
|------|--------|
|
||||
| `src/lib/stores/toast.svelte.ts` | New |
|
||||
| `src/lib/stores/connection.svelte.ts` | New |
|
||||
| `src/lib/components/ToastContainer.svelte` | New |
|
||||
| `src/lib/components/ConnectionStatus.svelte` | New |
|
||||
| `src/routes/+error.svelte` | New |
|
||||
| `src/lib/services/orchestrator.ts` | Modified — retry, friendly messages, store integration |
|
||||
| `src/routes/+layout.svelte` | Modified — added ToastContainer |
|
||||
| `src/routes/chat/+page.svelte` | Modified — ConnectionStatus, Retry button, toast integration |
|
||||
| `implementation-plans/issue-020.md` | New |
|
||||
| `implementation-plans/_index.md` | Modified |
|
||||
Reference in New Issue
Block a user