llm-multiverse/llm-multiverse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
llm-multiverse-ui/implementation-plans/issue-020.md
shahondin1624 14c83832f5 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>
2026-03-12 13:27:40 +01:00

2.4 KiB
Raw Permalink Blame History

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 View Git Blame Copy Permalink