error-handling-patterns

name: error-handling-patterns

prettier-ignore

description: Svelte 5 error handling. Use for error boundaries, async await expressions, loading states, and form errors.

Error Handling Patterns

Quick Start

<svelte:boundary>
    <ul>
        {#each await get_contacts() as contact}
            <li>{contact.name}</li>
        {/each}
    </ul>

    {#snippet pending()}
        <div class="loading">Loading...</div>
    {/snippet}

    {#snippet failed(error, reset)}
        <div class="error">
            <p>Error: {error.message}</p>
            <button onclick={reset}>Retry</button>
        </div>
    {/snippet}
</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