Skip to content

Commit 2aa203d

Browse files
authored
Merge branch 'main' into error-boundary-tutorial
2 parents cc5956e + 4821d7c commit 2aa203d

File tree

18 files changed

+125
-6
lines changed

18 files changed

+125
-6
lines changed

apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: sv migrate
33
---
44

5-
`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://github.com/sveltejs/kit/blob/main/packages/migrate) package.
5+
`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate) package.
66

77
Some migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`.
88

apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,8 @@ To include type declarations for your bindings, reference them in your `src/app.
8686

8787
```ts
8888
/// file: src/app.d.ts
89+
import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
90+
8991
declare global {
9092
namespace App {
9193
interface Platform {

apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ To include type declarations for your bindings, reference them in your `src/app.
107107

108108
```ts
109109
/// file: src/app.d.ts
110+
import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
111+
110112
declare global {
111113
namespace App {
112114
interface Platform {

apps/svelte.dev/content/docs/kit/98-reference/[email protected]

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,7 @@ Checks whether this is an action failure thrown by `fail`.
9494
<div class="ts-block">
9595

9696
```dts
97-
function isActionFailure(
98-
e: unknown
99-
): e is ActionFailure<undefined>;
97+
function isActionFailure(e: unknown): e is ActionFailure;
10098
```
10199

102100
</div>
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: <svelte:boundary>
3+
---
4+
5+
```svelte
6+
<svelte:boundary onerror={handler}>...</svelte:boundary>
7+
```
8+
9+
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.
10+
11+
If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
12+
13+
Errors occurring outside the rendering process (for example, in event handlers) are _not_ caught by error boundaries.
14+
15+
## Properties
16+
17+
For the boundary to do anything, one or both of `failed` and `onerror` must be provided.
18+
19+
### `failed`
20+
21+
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)):
22+
23+
```svelte
24+
<svelte:boundary>
25+
<FlakyComponent />
26+
27+
{#snippet failed(error, reset)}
28+
<button onclick={reset}>oops! try again</button>
29+
{/snippet}
30+
</svelte:boundary>
31+
```
32+
33+
> [!NOTE]
34+
> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property...
35+
>
36+
> ```svelte
37+
> <svelte:boundary {failed}>...</svelte:boundary>
38+
> ```
39+
>
40+
> ...or implicitly by declaring it directly inside the boundary, as in the example above.
41+
42+
### `onerror`
43+
44+
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...
45+
46+
```svelte
47+
<svelte:boundary onerror={(e) => report(e)}>
48+
...
49+
</svelte:boundary>
50+
```
51+
52+
...or using `error` and `reset` outside the boundary itself:
53+
54+
```svelte
55+
<script>
56+
let error = $state(null);
57+
let reset = $state(() => {});
58+
59+
function onerror(e, r) {
60+
error = e;
61+
reset = r;
62+
}
63+
</script>
64+
65+
<svelte:boundary {onerror}>
66+
<FlakyComponent />
67+
</svelte:boundary>
68+
69+
{#if error}
70+
<button onclick={() => {
71+
error = null;
72+
reset();
73+
}}>
74+
oops! try again
75+
</button>
76+
{/if}
77+
```
78+
79+
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.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)