fix: properly catch top level await errors

async errors within the template and derived etc are properly handled because they know about the last active effect and invoke the error boundary correctly as a response. This logic was missing for our top level await output.

Fixes #16613

Author: dummdidumm

.changeset/silent-suns-whisper.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: properly catch top level await errors

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -402,9 +402,20 @@ export function client_component(analysis, options) {
 			params,
 			b.block([
 				b.var('$$unsuspend', b.call('$.suspend')),
-				...component_block.body,
-				b.if(b.call('$.aborted'), b.return()),
-				.../** @type {ESTree.Statement[]} */ (template.body),
+				b.var('$$active', b.id('$.active_effect')),
+				b.try_catch(
+					b.block([
+						...component_block.body,
+						b.if(b.call('$.aborted'), b.return()),
+						.../** @type {ESTree.Statement[]} */ (template.body)
+					]),
+					b.block([
+						b.if(
+							b.unary('!', b.call('$.aborted', b.id('$$active'))),
+							b.stmt(b.call('$.invoke_error_boundary', b.id('$$error'), b.id('$$active')))
+						)
+					])
+				),
 				b.stmt(b.call('$$unsuspend'))
 			]),
 			true

packages/svelte/src/compiler/utils/builders.js

@@ -659,6 +659,24 @@ export function throw_error(str) {
 	};
 }
 
+/**
+ * @param {ESTree.BlockStatement} body
+ * @param {ESTree.BlockStatement} handler
+ * @returns {ESTree.TryStatement}
+ */
+export function try_catch(body, handler) {
+	return {
+		type: 'TryStatement',
+		block: body,
+		handler: {
+			type: 'CatchClause',
+			param: id('$$error'),
+			body: handler
+		},
+		finalizer: null
+	};
+}
+
 export {
 	await_builder as await,
 	let_builder as let,

packages/svelte/src/internal/client/index.js

@@ -151,7 +151,8 @@ export {
 	untrack,
 	exclude_from_object,
 	deep_read,
-	deep_read_state
+	deep_read_state,
+	active_effect
 } from './runtime.js';
 export { validate_binding, validate_each_keys } from './validate.js';
 export { raf } from './timing.js';
@@ -176,3 +177,4 @@ export {
 } from '../shared/validate.js';
 export { strict_equals, equals } from './dev/equality.js';
 export { log_if_contains_state } from './dev/console-log.js';
+export { invoke_error_boundary } from './error-handling.js';

packages/svelte/src/internal/client/reactivity/effects.js

@@ -648,7 +648,6 @@ function resume_children(effect, local) {
 	}
 }
 
-export function aborted() {
-	var effect = /** @type {Effect} */ (active_effect);
+export function aborted(effect = /** @type {Effect} */ (active_effect)) {
 	return (effect.f & DESTROYED) !== 0;
 }