App Shell Demo
Interactive demonstration of the app shell components and state management.
Component Boundary
Svelte's <svelte:boundary> catches runtime errors within a component tree
and renders a fallback UI instead of crashing the entire page.
BoundaryFallback Variants
The BoundaryFallback component accepts custom titles, descriptions, and
minimum heights to fit different contexts.
Something went wrong
3D scene unavailable
WebGL is required. Check browser support or graphics drivers.
Chart failed to render
The dataset may be too large or contain invalid values.
Route Error Pages
SvelteKit errors that escape component boundaries are caught by +error.svelte pages. The system has three layers:
1. svelte:boundary Component-level — catches errors within a single component tree2. +error.svelte Route-level — catches load/render errors for a route segment3. error.html App-level — last resort when SvelteKit itself failsError Boundaries
Four +error.svelte files provide contextual recovery actions for each area:
routes/+error.svelte Root fallback — "Go home" actionroutes/app/+error.svelte Authenticated area — "Back to dashboard" with sidebar visibleroutes/auth/+error.svelte Auth flow — "Back to sign in" actionroutes/showcases/+error.svelte Showcases — contextual hints per showcase categoryTrigger a real error page: