error-handling-patterns

用途

该技能用于 Svelte 5 项目中的错误处理。根据资料，其适用范围包括错误边界（error boundaries）、异步 await 表达式、加载状态（loading states）以及表单错误（form errors）。

主要能力

• 错误边界：使用 <svelte:boundary> 捕获组件错误。
• Pending 片段：在等待数据时展示加载状态。
• Failed 片段：展示错误，并通过 reset 函数提供重试能力。
• Await 表达式：可直接在标记中使用 {#each await query()}。
• 细粒度边界：包裹单个功能，而不是整个页面。
• 表单错误：检查远程函数的 .error 属性，例如 create_contact.error。

使用方式

快速开始示例：

<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>

核心原则：

• 使用 <svelte:boundary> 捕获组件错误。
• 使用 pending 片段在等待数据时展示加载状态。
• 使用 failed 片段展示错误，并通过 reset 函数重试。
• 使用 await 表达式，可直接在标记中写 {#each await query()}。
• 使用细粒度边界，包裹单个功能而非整个页面。
• 处理表单错误时检查远程函数的 .error 属性（例如 create_contact.error）。

参考资料

• error-handling-guide.md：完整的模式与示例。

适用场景

适用于使用 Svelte 5 构建的界面中需要处理组件错误、异步数据加载与表单错误的场景。

限制

资料未提供关于收费、价格、支持平台、性能效果或完整安装步骤的信息。