error-handling-patterns

spences10's avatarfrom spences10

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

⭐6stars🔀0forks📁View on GitHub🕐Updated Jan 1, 2026
[Debugging]

When & Why to Use This Skill

This Claude skill provides comprehensive patterns and best practices for Svelte 5 error handling. It enables developers to build resilient applications by implementing robust error boundaries, managing asynchronous loading states, and handling form-level errors using modern Svelte 5 features like snippets and the boundary component to ensure a seamless user experience even when failures occur.

Use Cases

  • Implementing Error Boundaries: Use the <svelte:boundary> component to catch and isolate component-level errors, preventing entire page crashes and providing a fallback UI.
  • Asynchronous Data Management: Streamline async/await expressions with dedicated 'pending' and 'failed' snippets to provide elegant loading indicators and 'retry' functionality.
  • Form Error Handling: Efficiently capture and display remote function errors in Svelte 5 forms, allowing for real-time feedback and improved user interaction during data submission.
  • Granular UI Resilience: Apply localized error handling patterns to specific features or individual components to maintain application stability without affecting the global state.
nameerror-handling-patterns
descriptionSvelte 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