Error Handling Patterns

Quick Start

svelte
1<svelte:boundary>
2	<ul>
3		{#each await get_contacts() as contact}
4			<li>{contact.name}</li>
5		{/each}
6	</ul>
7
8	{#snippet pending()}
9		<div class="loading">Loading...</div>
10	{/snippet}
11
12	{#snippet failed(error, reset)}
13		<div class="error">
14			<p>Error: {error.message}</p>
15			<button onclick={reset}>Retry</button>
16		</div>
17	{/snippet}
18</svelte:boundary>

Core Principles

• Error boundaries: Use <svelte:boundary> to catch component errors
• Pending snippet: Show loading state while awaiting data
• Failed snippet: Display errors with retry via reset function
• Await expressions: Use {#each await query()} directly in markup
• Granular boundaries: Wrap individual features, not entire pages
• Form errors: Check remote function .error property (e.g., create_contact.error)

Reference Files

• error-handling-guide.md - Complete patterns and examples