From 461c081cd123018b6effc3607b34757c108e5c01 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 5 Feb 2025 21:47:12 -0500
Subject: [PATCH] error handling

---
 .../internal/client/dom/blocks/boundary.js    | 18 ++++++---
 .../internal/client/reactivity/deriveds.js    |  4 +-
 .../samples/async-error/_config.js            | 37 +++++++++++++++++++
 .../samples/async-error/main.svelte           | 16 ++++++++
 4 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index eaffd07ce3..5c768be99b 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -136,6 +136,12 @@ export function boundary(node, props, children) {
 		}
 
 		function reset() {
+			async_count = 0;
+
+			if ((boundary.f & BOUNDARY_SUSPENDED) !== 0) {
+				boundary.f ^= BOUNDARY_SUSPENDED;
+			}
+
 			if (failed_effect !== null) {
 				pause_effect(failed_effect, () => {
 					failed_effect = null;
@@ -151,6 +157,11 @@ export function boundary(node, props, children) {
 					reset_is_throwing_error();
 				}
 			});
+
+			if (async_count > 0) {
+				boundary.f |= BOUNDARY_SUSPENDED;
+				show_pending_snippet(true);
+			}
 		}
 
 		function unsuspend() {
@@ -367,12 +378,7 @@ export function boundary(node, props, children) {
 				});
 			});
 		} else {
-			main_effect = branch(() => children(anchor));
-
-			if (async_count > 0) {
-				boundary.f |= BOUNDARY_SUSPENDED;
-				show_pending_snippet(true);
-			}
+			reset();
 		}
 
 		reset_is_throwing_error();
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 3747840f0f..076ad8dc8f 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -147,7 +147,9 @@ export function async_derived(fn, detect_waterfall = true) {
 				}
 			},
 			(e) => {
-				handle_error(e, parent, null, parent.ctx);
+				if (promise === current) {
+					handle_error(e, parent, null, parent.ctx);
+				}
 			}
 		);
 	}, EFFECT_PRESERVED);
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error/_config.js
new file mode 100644
index 0000000000..9c7e296287
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error/_config.js
@@ -0,0 +1,37 @@
+import { flushSync, tick } from 'svelte';
+import { deferred } from '../../../../src/internal/shared/utils.js';
+import { test } from '../../test';
+
+/** @type {ReturnType<typeof deferred>} */
+let d;
+
+export default test({
+	html: `<p>pending</p>`,
+
+	get props() {
+		d = deferred();
+
+		return {
+			promise: d.promise
+		};
+	},
+
+	async test({ assert, target, component }) {
+		d.reject(new Error('oops!'));
+		await Promise.resolve();
+		await Promise.resolve();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<p>oops!</p><button>reset</button>');
+
+		const button = target.querySelector('button');
+
+		component.promise = (d = deferred()).promise;
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, '<p>pending</p>');
+
+		d.resolve('wheee');
+		await Promise.resolve();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<h1>wheee</h1>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte
new file mode 100644
index 0000000000..dd42fa7596
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let { promise } = $props();
+</script>
+
+<svelte:boundary>
+	<h1>{await promise}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<p>{error.message}</p>
+		<button onclick={reset}>reset</button>
+	{/snippet}
+</svelte:boundary>