feat: add error boundaries

.changeset/polite-peaches-do.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add error boundaries with `<svelte:boundary>`

documentation/docs/98-reference/.generated/compile-errors.md

@@ -762,6 +762,18 @@ A component can have a single top-level `<style>` element
 `<svelte:body>` does not support non-event attributes or spread attributes
 ```
 
+### svelte_boundary_invalid_attribute
+
+```
+Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+```
+
+### svelte_boundary_invalid_attribute_value
+
+```
+Attribute value must be a non-string expression
+```
+
 ### svelte_component_invalid_this
 
 ```

packages/svelte/elements.d.ts

@@ -2044,6 +2044,10 @@ export interface SvelteHTMLElements {
 		[name: string]: any;
 	};
 	'svelte:head': { [name: string]: any };
+	'svelte:boundary': {
+		onerror?: (error: unknown, reset: () => void) => void;
+		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
+	};
 
 	[name: string]: { [name: string]: any };
 }

packages/svelte/messages/compile-errors/template.md

@@ -282,6 +282,14 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 > `<svelte:body>` does not support non-event attributes or spread attributes
 
+## svelte_boundary_invalid_attribute
+
+> Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+
+## svelte_boundary_invalid_attribute_value
+
+> Attribute value must be a non-string expression
+
 ## svelte_component_invalid_this
 
 > Invalid component definition — must be an `{expression}`

packages/svelte/src/compiler/errors.js

@@ -1228,6 +1228,24 @@ export function svelte_body_illegal_attribute(node) {
 	e(node, "svelte_body_illegal_attribute", "`<svelte:body>` does not support non-event attributes or spread attributes");
 }
 
+/**
+ * Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function svelte_boundary_invalid_attribute(node) {
+	e(node, "svelte_boundary_invalid_attribute", "Valid attributes on `<svelte:boundary>` are `onerror` and `failed`");
+}
+
+/**
+ * Attribute value must be a non-string expression
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function svelte_boundary_invalid_attribute_value(node) {
+	e(node, "svelte_boundary_invalid_attribute_value", "Attribute value must be a non-string expression");
+}
+
 /**
  * Invalid component definition — must be an `{expression}`
  * @param {null | number | NodeLike} node

packages/svelte/src/compiler/legacy.js

@@ -381,6 +381,20 @@ export function convert(source, ast) {
 					children: node.body.nodes.map((child) => visit(child))
 				};
 			},
+			// @ts-expect-error
+			SvelteBoundary(node, { visit }) {
+				remove_surrounding_whitespace_nodes(node.fragment.nodes);
+				return {
+					type: 'SvelteBoundary',
+					name: 'svelte:boundary',
+					start: node.start,
+					end: node.end,
+					attributes: node.attributes.map(
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
+					),
+					children: node.fragment.nodes.map((child) => visit(child))
+				};
+			},
 			RegularElement(node, { visit }) {
 				return {
 					type: 'Element',

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -43,7 +43,8 @@ const meta_tags = new Map([
 	['svelte:element', 'SvelteElement'],
 	['svelte:component', 'SvelteComponent'],
 	['svelte:self', 'SvelteSelf'],
-	['svelte:fragment', 'SvelteFragment']
+	['svelte:fragment', 'SvelteFragment'],
+	['svelte:boundary', 'SvelteBoundary']
 ]);
 
 /** @param {Parser} parser */

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -60,6 +60,7 @@ import { SvelteFragment } from './visitors/SvelteFragment.js';
 import { SvelteHead } from './visitors/SvelteHead.js';
 import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { SvelteWindow } from './visitors/SvelteWindow.js';
+import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js';
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
@@ -171,6 +172,7 @@ const visitors = {
 	SvelteHead,
 	SvelteSelf,
 	SvelteWindow,
+	SvelteBoundary,
 	TaggedTemplateExpression,
 	Text,
 	TransitionDirective,

packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js

@@ -0,0 +1,27 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+const valid = ['onerror', 'failed'];
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {Context} context
+ */
+export function SvelteBoundary(node, context) {
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute' || !valid.includes(attribute.name)) {
+			e.svelte_boundary_invalid_attribute(attribute);
+		}
+
+		if (
+			attribute.value === true ||
+			(Array.isArray(attribute.value) &&
+				(attribute.value.length !== 1 || attribute.value[0].type !== 'ExpressionTag'))
+		) {
+			e.svelte_boundary_invalid_attribute_value(attribute);
+		}
+	}
+
+	context.next();
+}

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

@@ -48,6 +48,7 @@ import { SvelteComponent } from './visitors/SvelteComponent.js';
 import { SvelteDocument } from './visitors/SvelteDocument.js';
 import { SvelteElement } from './visitors/SvelteElement.js';
 import { SvelteFragment } from './visitors/SvelteFragment.js';
+import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 import { SvelteHead } from './visitors/SvelteHead.js';
 import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { SvelteWindow } from './visitors/SvelteWindow.js';
@@ -122,6 +123,7 @@ const visitors = {
 	SvelteDocument,
 	SvelteElement,
 	SvelteFragment,
+	SvelteBoundary,
 	SvelteHead,
 	SvelteSelf,
 	SvelteWindow,

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

@@ -0,0 +1,61 @@
+/** @import { BlockStatement, Statement, Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBoundary(node, context) {
+	const props = b.object([]);
+
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute' || attribute.value === true) {
+			// these can't exist, because they would have caused validation
+			// to fail, but typescript doesn't know that
+			continue;
+		}
+
+		const chunk = Array.isArray(attribute.value)
+			? /** @type {AST.ExpressionTag} */ (attribute.value[0])
+			: attribute.value;
+
+		const expression = /** @type {Expression} */ (context.visit(chunk.expression, context.state));
+
+		if (attribute.metadata.expression.has_state) {
+			props.properties.push(b.get(attribute.name, [b.return(expression)]));
+		} else {
+			props.properties.push(b.init(attribute.name, expression));
+		}
+	}
+
+	const nodes = [];
+
+	/** @type {Statement[]} */
+	const snippet_statements = [];
+
+	// Capture the `failed` implicit snippet prop
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'SnippetBlock' && child.expression.name === 'failed') {
+			/** @type {Statement[]} */
+			const init = [];
+			context.visit(child, { ...context.state, init });
+			props.properties.push(b.prop('init', child.expression, child.expression));
+			snippet_statements.push(...init);
+		} else {
+			nodes.push(child);
+		}
+	}
+
+	const block = /** @type {BlockStatement} */ (context.visit({ ...node.fragment, nodes }));
+
+	const boundary = b.stmt(
+		b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block))
+	);
+
+	context.state.template.push('<!>');
+	context.state.init.push(
+		snippet_statements.length > 0 ? b.block([...snippet_statements, boundary]) : boundary
+	);
+}

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

@@ -38,6 +38,7 @@ import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
+import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 
 /** @type {Visitors} */
 const global_visitors = {
@@ -75,7 +76,8 @@ const template_visitors = {
 	SvelteFragment,
 	SvelteHead,
 	SvelteSelf,
-	TitleElement
+	TitleElement,
+	SvelteBoundary
 };
 
 /**

packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js

@@ -0,0 +1,17 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../../internal/server/hydration.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBoundary(node, context) {
+	context.state.template.push(
+		b.literal(BLOCK_OPEN),
+		/** @type {BlockStatement} */ (context.visit(node.fragment)),
+		b.literal(BLOCK_CLOSE)
+	);
+}

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

@@ -305,6 +305,7 @@ export function clean_nodes(
 				parent.type === 'SnippetBlock' ||
 				parent.type === 'EachBlock' ||
 				parent.type === 'SvelteComponent' ||
+				parent.type === 'SvelteBoundary' ||
 				parent.type === 'Component' ||
 				parent.type === 'SvelteSelf') &&
 			first &&

packages/svelte/src/compiler/types/template.d.ts

@@ -352,6 +352,11 @@ export namespace AST {
 		name: 'svelte:fragment';
 	}
 
+	export interface SvelteBoundary extends BaseElement {
+		type: 'SvelteBoundary';
+		name: 'svelte:boundary';
+	}
+
 	export interface SvelteHead extends BaseElement {
 		type: 'SvelteHead';
 		name: 'svelte:head';
@@ -499,7 +504,8 @@ export type ElementLike =
 	| AST.SvelteHead
 	| AST.SvelteOptionsRaw
 	| AST.SvelteSelf
-	| AST.SvelteWindow;
+	| AST.SvelteWindow
+	| AST.SvelteBoundary;
 
 export type TemplateNode =
 	| AST.Root

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

@@ -4,21 +4,22 @@ export const RENDER_EFFECT = 1 << 3;
 export const BLOCK_EFFECT = 1 << 4;
 export const BRANCH_EFFECT = 1 << 5;
 export const ROOT_EFFECT = 1 << 6;
-export const UNOWNED = 1 << 7;
-export const DISCONNECTED = 1 << 8;
-export const CLEAN = 1 << 9;
-export const DIRTY = 1 << 10;
-export const MAYBE_DIRTY = 1 << 11;
-export const INERT = 1 << 12;
-export const DESTROYED = 1 << 13;
-export const EFFECT_RAN = 1 << 14;
+export const BOUNDARY_EFFECT = 1 << 7;
+export const UNOWNED = 1 << 8;
+export const DISCONNECTED = 1 << 9;
+export const CLEAN = 1 << 10;
+export const DIRTY = 1 << 11;
+export const MAYBE_DIRTY = 1 << 12;
+export const INERT = 1 << 13;
+export const DESTROYED = 1 << 14;
+export const EFFECT_RAN = 1 << 15;
 /** 'Transparent' effects do not create a transition boundary */
-export const EFFECT_TRANSPARENT = 1 << 15;
+export const EFFECT_TRANSPARENT = 1 << 16;
 /** Svelte 4 legacy mode props need to be handled with deriveds and be recognized elsewhere, hence the dedicated flag */
-export const LEGACY_DERIVED_PROP = 1 << 16;
-export const INSPECT_EFFECT = 1 << 17;
-export const HEAD_EFFECT = 1 << 18;
-export const EFFECT_HAS_DERIVED = 1 << 19;
+export const LEGACY_DERIVED_PROP = 1 << 17;
+export const INSPECT_EFFECT = 1 << 18;
+export const HEAD_EFFECT = 1 << 19;
+export const EFFECT_HAS_DERIVED = 1 << 20;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const STATE_SYMBOL_METADATA = Symbol('$state metadata');