fix: restore active reaction if then block throws (#14191)

.changeset/pink-doors-chew.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: restore active reaction if then block throws

packages/svelte/src/internal/client/dom/blocks/await.js

@@ -70,42 +70,44 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			if (DEV) set_dev_current_component_function(component_function);
 		}
 
-		if (state === PENDING && pending_fn) {
+		try {
-			if (pending_effect) resume_effect(pending_effect);
+			if (state === PENDING && pending_fn) {
-			else pending_effect = branch(() => pending_fn(anchor));
+				if (pending_effect) resume_effect(pending_effect);
-		}
+				else pending_effect = branch(() => pending_fn(anchor));
-
+			}
-		if (state === THEN && then_fn) {
-			if (then_effect) resume_effect(then_effect);
-			else then_effect = branch(() => then_fn(anchor, input_source));
-		}
 
-		if (state === CATCH && catch_fn) {
+			if (state === THEN && then_fn) {
-			if (catch_effect) resume_effect(catch_effect);
+				if (then_effect) resume_effect(then_effect);
-			else catch_effect = branch(() => catch_fn(anchor, error_source));
+				else then_effect = branch(() => then_fn(anchor, input_source));
-		}
+			}
 
-		if (state !== PENDING && pending_effect) {
+			if (state === CATCH && catch_fn) {
-			pause_effect(pending_effect, () => (pending_effect = null));
+				if (catch_effect) resume_effect(catch_effect);
-		}
+				else catch_effect = branch(() => catch_fn(anchor, error_source));
+			}
 
-		if (state !== THEN && then_effect) {
+			if (state !== PENDING && pending_effect) {
-			pause_effect(then_effect, () => (then_effect = null));
+				pause_effect(pending_effect, () => (pending_effect = null));
-		}
+			}
 
-		if (state !== CATCH && catch_effect) {
+			if (state !== THEN && then_effect) {
-			pause_effect(catch_effect, () => (catch_effect = null));
+				pause_effect(then_effect, () => (then_effect = null));
-		}
+			}
 
-		if (restore) {
+			if (state !== CATCH && catch_effect) {
-			if (DEV) set_dev_current_component_function(null);
+				pause_effect(catch_effect, () => (catch_effect = null));
-			set_component_context(null);
+			}
-			set_active_reaction(null);
+		} finally {
-			set_active_effect(null);
+			if (restore) {
-
+				if (DEV) set_dev_current_component_function(null);
-			// without this, the DOM does not update until two ticks after the promise
+				set_component_context(null);
-			// resolves, which is unexpected behaviour (and somewhat irksome to test)
+				set_active_reaction(null);
-			flush_sync();
+				set_active_effect(null);
+
+				// without this, the DOM does not update until two ticks after the promise
+				// resolves, which is unexpected behaviour (and somewhat irksome to test)
+				flush_sync();
+			}
 		}
 	}
 

packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/_config.js

@@ -0,0 +1,16 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ target, errors, assert, window }) {
+		const btn = target.querySelector('button');
+		ok(btn);
+		flushSync(() => {
+			btn.click();
+		});
+		assert.deepEqual(errors, []);
+	}
+});

packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let count = $state(0);
+
+	function listen(node){
+		function handler(){
+			count++;
+		}
+		node.addEventListener("click", handler);
+		return {
+			destroy(){
+				node.removeEventListener("click", handler);
+			}
+		}
+	}
+</script>
+
+<button use:listen></button>
+
+{#await Promise.resolve() then}
+	{err.or}
+{/await}