From 3dde011d3a9e7b9145169da0b75dcd607a378c0e Mon Sep 17 00:00:00 2001
From: Nic Polumeyv <nicolas.polum@outlook.com>
Date: Thu, 23 Jul 2026 17:45:50 -0400
Subject: [PATCH] fix: call `onerror` and provide a working `reset` when
 hydrating a failed boundary (#18556)

Fixes #18555

A boundary that failed during SSR hydrates via
`#hydrate_failed_content`, which never calls `onerror` and passes the
`failed` snippet a no-op `reset`. Both came in with #17672, whose docs
say `onerror` "will be called upon hydration with the deserialized error
object". Once hydrated as failed, the boundary can never leave that
state. Downstream this is what keeps SvelteKit's `+error.svelte` mounted
after navigating away from a server-rendered error page
(sveltejs/kit#16345).

This extracts the reset/onerror machinery from `#handle_error` into
`#create_reset` and uses it in the hydration path too. `onerror` is
invoked in a microtask because it may mutate state, which is disallowed
while hydrating. `#handle_error` already invokes it asynchronously, so
the timing matches the error path.

The tests flip a `recovered` flag before calling `reset`, since the
child would otherwise throw again. That is the intended retry pattern,
and the same one kit uses when it resets route boundaries on navigation.
Verified against kit end to end, hydrating a server-rendered error page
and navigating away now tears it down with no kit changes needed.
---
 .changeset/hydrated-boundary-reset.md         |  5 ++
 .../internal/client/dom/blocks/boundary.js    | 89 ++++++++++++-------
 .../error-boundary-hydrate-1/_config.js       | 19 ++++
 .../error-boundary-hydrate-1/child.svelte     |  3 +
 .../error-boundary-hydrate-1/main.svelte      | 29 ++++++
 .../error-boundary-hydrate-2/_config.js       | 16 ++++
 .../error-boundary-hydrate-2/child.svelte     |  3 +
 .../error-boundary-hydrate-2/main.svelte      | 22 +++++
 8 files changed, 152 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/hydrated-boundary-reset.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/main.svelte

diff --git a/.changeset/hydrated-boundary-reset.md b/.changeset/hydrated-boundary-reset.md
new file mode 100644
index 0000000000..799a57fd9b
--- /dev/null
+++ b/.changeset/hydrated-boundary-reset.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: call `onerror` and provide a working `reset` when hydrating a failed boundary
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 0c0903ff52..4f655a3695 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -199,17 +199,68 @@ export class Boundary {
 	 */
 	#hydrate_failed_content(error) {
 		const failed = this.#props.failed;
+		const { reset, invoke_onerror } = this.#create_reset(error);
+
+		// `onerror` may mutate state, which is disallowed while hydrating
+		queue_micro_task(invoke_onerror);
+
 		if (!failed) return;
 
 		this.#failed_effect = branch(() => {
 			failed(
 				this.#anchor,
 				() => error,
-				() => () => {}
+				() => reset
 			);
 		});
 	}
 
+	/**
+	 * Creates the `reset` function for a failed boundary, along with a function
+	 * that invokes `onerror` with it (if provided)
+	 * @param {unknown} error
+	 * @returns {{ reset: () => void, invoke_onerror: () => void }}
+	 */
+	#create_reset(error) {
+		var did_reset = false;
+		var calling_on_error = false;
+
+		const reset = () => {
+			if (did_reset) {
+				w.svelte_boundary_reset_noop();
+				return;
+			}
+
+			did_reset = true;
+
+			if (calling_on_error) {
+				e.svelte_boundary_reset_onerror();
+			}
+
+			if (this.#failed_effect !== null) {
+				pause_effect(this.#failed_effect, () => {
+					this.#failed_effect = null;
+				});
+			}
+
+			this.#run(() => {
+				this.#render();
+			});
+		};
+
+		const invoke_onerror = () => {
+			try {
+				calling_on_error = true;
+				this.#props.onerror?.(error, reset);
+				calling_on_error = false;
+			} catch (err) {
+				invoke_error_boundary(err, this.#effect && this.#effect.parent);
+			}
+		};
+
+		return { reset, invoke_onerror };
+	}
+
 	#hydrate_pending_content() {
 		const pending = this.#props.pending;
 		if (!pending) return;
@@ -429,43 +480,13 @@ export class Boundary {
 			set_hydrate_node(skip_nodes());
 		}
 
-		var onerror = this.#props.onerror;
 		let failed = this.#props.failed;
-		var did_reset = false;
-		var calling_on_error = false;
-
-		const reset = () => {
-			if (did_reset) {
-				w.svelte_boundary_reset_noop();
-				return;
-			}
-
-			did_reset = true;
-
-			if (calling_on_error) {
-				e.svelte_boundary_reset_onerror();
-			}
-
-			if (this.#failed_effect !== null) {
-				pause_effect(this.#failed_effect, () => {
-					this.#failed_effect = null;
-				});
-			}
-
-			this.#run(() => {
-				this.#render();
-			});
-		};
 
 		/** @param {unknown} transformed_error */
 		const handle_error_result = (transformed_error) => {
-			try {
-				calling_on_error = true;
-				onerror?.(transformed_error, reset);
-				calling_on_error = false;
-			} catch (error) {
-				invoke_error_boundary(error, this.#effect && this.#effect.parent);
-			}
+			const { reset, invoke_onerror } = this.#create_reset(transformed_error);
+
+			invoke_onerror();
 
 			if (failed) {
 				this.#failed_effect = this.#run(() => {
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/_config.js
new file mode 100644
index 0000000000..f0aef7e92f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+	ssrHtml: '<p>failed: error</p> <button>reset</button>',
+	transformError: () => 'error',
+
+	test({ assert, target, logs }) {
+		// `onerror` is called upon hydration with the deserialized error
+		assert.deepEqual(logs, ['onerror: error']);
+
+		const btn = target.querySelector('button');
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<p>recovered</p> <button>reset</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/child.svelte
new file mode 100644
index 0000000000..e93c7bb0fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/child.svelte
@@ -0,0 +1,3 @@
+<script>
+	throw new Error('unlucky');
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/main.svelte
new file mode 100644
index 0000000000..e84198473b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-1/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import Child from './child.svelte';
+
+	let recovered = $state(false);
+	let reset_fn = $state();
+</script>
+
+<svelte:boundary
+	onerror={(error, reset) => {
+		console.log(`onerror: ${error}`);
+		reset_fn = reset;
+	}}
+>
+	{#if recovered}
+		<p>recovered</p>
+	{:else}
+		<Child />
+	{/if}
+
+	{#snippet failed(error)}
+		<p>failed: {error}</p>
+	{/snippet}
+</svelte:boundary>
+
+<button
+	onclick={() => {
+		recovered = true;
+		reset_fn();
+	}}>reset</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/_config.js
new file mode 100644
index 0000000000..e5c52eb19c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+	ssrHtml: '<p>failed: error</p> <button>reset</button>',
+	transformError: () => 'error',
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<p>recovered</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/child.svelte
new file mode 100644
index 0000000000..e93c7bb0fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/child.svelte
@@ -0,0 +1,3 @@
+<script>
+	throw new Error('unlucky');
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/main.svelte
new file mode 100644
index 0000000000..1642a94e7a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-hydrate-2/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Child from './child.svelte';
+
+	let recovered = $state(false);
+</script>
+
+<svelte:boundary>
+	{#if recovered}
+		<p>recovered</p>
+	{:else}
+		<Child />
+	{/if}
+
+	{#snippet failed(error, reset)}
+		<p>failed: {error}</p>
+		<button
+			onclick={() => {
+				recovered = true;
+				reset();
+			}}>reset</button>
+	{/snippet}
+</svelte:boundary>