# Error Handling Patterns

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

- Skill: `majiayu000/error-handling-patterns-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/error-handling-patterns-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/error-handling-patterns-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/error-handling-patterns-3

---


# Error Handling Patterns

## Quick Start

```svelte
<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](references/error-handling-guide.md) -
  Complete patterns and examples