|
| 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. |
0 commit comments