Error Handling Patterns

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

Error Handling Patterns

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

Structure

• SKILL.md - Main skill instructions
• references/ - Detailed documentation loaded as needed
• scripts/ - Executable code for deterministic operations
• assets/ - Templates, images, or other resources

Usage

This skill is automatically discovered by Claude when relevant to the task.

Error Handling & Async State

Handle errors and loading states gracefully with error boundaries and await expressions.

Error Boundaries

Wrap components to catch errors during rendering or async operations.

Basic Usage

<script lang="ts">
	import { get_contacts } from './contacts.remote';

	function report_error(error) {
		console.error('Error occurred:', error);
		// Send to monitoring service
	}
</script>

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

	{#snippet failed(error, reset)}
		<div class="error">
			<p>Failed to load contacts: {error.message}</p>
			<button onclick={reset}>Try again</button>
		</div>
	{/snippet}
</svelte:boundary>

With Loading State

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

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

	{#snippet failed(error, reset)}
		<div class="error">
			<p>Error: {error.message}</p>
			<button onclick={reset}>Retry</button>
		</div>
	{/snippet}
</svelte:boundary>

Await Expressions in Markup

Use await directly in your markup for remote function calls.

Basic Await

<script lang="ts">
	import { get_contact } from './contacts.remote';

	let contact_id = $state('123');
</script>

<div>
	<h1>{await get_contact(contact_id).name}</h1>
</div>

Await Block (Old Syntax)

Still supported for more complex scenarios:

<script lang="ts">
	import { get_contacts } from './contacts.remote';
</script>

{#await get_contacts()}
	<p>Loading...</p>
{:then contacts}
	<ul>
		{#each contacts as contact}
			<li>{contact.name}</li>
		{/each}
	</ul>
{:catch error}
	<p>Error: {error.message}</p>
{/await}

Multiple Awaits (Parallel)

Await expressions in markup run in parallel:

<script lang="ts">
	import { get_contacts } from './contacts.remote';
	import { get_interactions } from './interactions.remote';
</script>

<div>
	<h2>Contacts: {await get_contacts().length}</h2>
	<h2>Interactions: {await get_interactions().length}</h2>
</div>

Nested Boundaries

Create boundaries at different levels for granular error handling.

<svelte:boundary>
	<div class="dashboard">
		<!-- This boundary catches errors from contacts -->
		<svelte:boundary>
			<section>
				{#each await get_contacts() as contact}
					<ContactCard {contact} />
				{/each}
			</section>

			{#snippet failed(error, reset)}
				<p>Contacts failed to load</p>
				<button onclick={reset}>Retry</button>
			{/snippet}
		</svelte:boundary>

		<!-- This boundary catches errors from stats -->
		<svelte:boundary>
			<aside>
				<Stats data={await get_stats()} />
			</aside>

			{#snippet failed(error, reset)}
				<p>Stats unavailable</p>
			{/snippet}
		</svelte:boundary>
	</div>

	{#snippet failed(error)}
		<p>Dashboard completely failed: {error.message}</p>
	{/snippet}
</svelte:boundary>

Loading State Detection

Use $effect.pending() to show loading indicators for subsequent calls:

<script lang="ts">
	import { get_contacts } from './contacts.remote';

	let search = $state('');
	let is_pending = $derived($effect.pending());
</script>

<input bind:value={search} />

{#if is_pending}
	<div class="spinner">Loading...</div>
{/if}

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

Form Error Handling

Forms automatically show validation errors:

<script lang="ts">
	import { create_contact } from './contacts.remote';
</script>

<form {...create_contact}>
	<input name="name" />
	<input name="email" type="email" />

	{#if create_contact.error}
		<p class="error">{create_contact.error.message}</p>
	{/if}

	<button>Create Contact</button>
</form>

Best Practices

1. Granular boundaries - Wrap individual features, not entire pages 2. Always provide retry - Include reset button in error states 3. Log errors - Use onerror callback for monitoring 4. Loading states - Show pending snippets for better UX 5. Parallel loading - Use multiple await expressions to load data in parallel

Common Patterns

Component-Level Error Boundary

<!-- ContactList.svelte -->
<script lang="ts">
	import { get_contacts } from './contacts.remote';
</script>

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

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

	{#snippet failed(error, reset)}
		<div class="error-card">
			<p>{error.message}</p>
			<button onclick={reset}>Retry</button>
		</div>
	{/snippet}
</svelte:boundary>

Page-Level Fallback

<!-- +page.svelte -->
<script lang="ts">
	import ContactList from './ContactList.svelte';
	import Stats from './Stats.svelte';
</script>

<svelte:boundary>
	<div class="page">
		<ContactList />
		<Stats />
	</div>

	{#snippet failed(error)}
		<div class="page-error">
			<h1>Something went wrong</h1>
			<p>{error.message}</p>
			<a href="/">Go home</a>
		</div>
	{/snippet}
</svelte:boundary>