diff --git a/.changeset/polite-peaches-do.md b/.changeset/polite-peaches-do.md new file mode 100644 index 000000000000..7b59c33ea772 --- /dev/null +++ b/.changeset/polite-peaches-do.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: add error boundaries with `` diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md new file mode 100644 index 000000000000..2e9f85c83a43 --- /dev/null +++ b/documentation/docs/05-special-elements/01-svelte-boundary.md @@ -0,0 +1,79 @@ +--- +title: +--- + +```svelte +... +``` + +Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors. + +If an error occurs while rendering or updating the children of a ``, or running any [`$effect`]($effect) functions contained therein, the contents will be removed. + +Errors occurring outside the rendering process (for example, in event handlers) are _not_ caught by error boundaries. + +## Properties + +For the boundary to do anything, one or both of `failed` and `onerror` must be provided. + +### `failed` + +If an `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)): + +```svelte + + + + {#snippet failed(error, reset)} + + {/snippet} + +``` + +> [!NOTE] +> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property... +> +> ```svelte +> ... +> ``` +> +> ...or implicitly by declaring it directly inside the boundary, as in the example above. + +### `onerror` + +If an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service... + +```svelte + report(e)}> + ... + +``` + +...or using `error` and `reset` outside the boundary itself: + +```svelte + + + + + + +{#if error} + +{/if} +``` + +If an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists. diff --git a/documentation/docs/05-special-elements/01-svelte-window.md b/documentation/docs/05-special-elements/02-svelte-window.md similarity index 100% rename from documentation/docs/05-special-elements/01-svelte-window.md rename to documentation/docs/05-special-elements/02-svelte-window.md diff --git a/documentation/docs/05-special-elements/02-svelte-document.md b/documentation/docs/05-special-elements/03-svelte-document.md similarity index 100% rename from documentation/docs/05-special-elements/02-svelte-document.md rename to documentation/docs/05-special-elements/03-svelte-document.md diff --git a/documentation/docs/05-special-elements/03-svelte-body.md b/documentation/docs/05-special-elements/04-svelte-body.md similarity index 100% rename from documentation/docs/05-special-elements/03-svelte-body.md rename to documentation/docs/05-special-elements/04-svelte-body.md diff --git a/documentation/docs/05-special-elements/04-svelte-head.md b/documentation/docs/05-special-elements/05-svelte-head.md similarity index 100% rename from documentation/docs/05-special-elements/04-svelte-head.md rename to documentation/docs/05-special-elements/05-svelte-head.md diff --git a/documentation/docs/05-special-elements/05-svelte-element.md b/documentation/docs/05-special-elements/06-svelte-element.md similarity index 100% rename from documentation/docs/05-special-elements/05-svelte-element.md rename to documentation/docs/05-special-elements/06-svelte-element.md diff --git a/documentation/docs/05-special-elements/06-svelte-options.md b/documentation/docs/05-special-elements/07-svelte-options.md similarity index 100% rename from documentation/docs/05-special-elements/06-svelte-options.md rename to documentation/docs/05-special-elements/07-svelte-options.md diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md index 16cd361e52c5..77166097a219 100644 --- a/documentation/docs/98-reference/.generated/compile-errors.md +++ b/documentation/docs/98-reference/.generated/compile-errors.md @@ -762,6 +762,18 @@ A component can have a single top-level `