Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,54 @@ By default, unexpected errors are printed to the console (or, in production, you

Unexpected errors will go through the [`handleError`](hooks#Shared-hooks-handleError) hook, where you can add your own error handling — for example, sending errors to a reporting service, or returning a custom error object which becomes `page.error`.

## Rendering errors

Ordinarily, if an error happens during server-side rendering (for example inside a component's `<script>` block or template), SvelteKit will return a 500 error page.

Since SvelteKit 2.54 and Svelte 5.53, you can change this by enabling the experimental `handleRenderingErrors` option in your config:

```js
/// file: svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
experimental: {
handleRenderingErrors: true
}
}
};

export default config;
```

When this is enabled, SvelteKit will wrap your route components in an error boundary. If an error occurs during rendering, the nearest [`+error.svelte`](routing#error) page will be shown, just as if the error had occurred in a `load` function.

The error is first passed to [`handleError`](hooks#Shared-hooks-handleError), allowing you to report it and transform it, before the resulting object is passed to the `+error.svelte` component.

> [!NOTE]
> Since rendering errors occur after the page has started rendering, and multiple boundaries could in parallel catch distinct errors, the [`page`]($app-state#page) object (and its `error` property) will not be updated. Instead, the error is passed directly to the `+error.svelte` component as a prop.

```svelte
<!--- file: +error.svelte --->
<script>
let { error } = $props();
</script>

<h1>{error.message}</h1>
```

The same applies for other error boundaries you define in your code:

```svelte
<svelte:boundary>
...
{#snippet failed(error: App.Error)}
<!-- error went through handleError and is of type App.Error -->
{error.message}
{/snippet}
</svelte:boundary>
```

## Responses

If an error occurs inside `handle` or inside a [`+server.js`](routing#server) request handler, SvelteKit will respond with either a fallback error page or a JSON representation of the error object, depending on the request's `Accept` headers.
Expand Down
22 changes: 22 additions & 0 deletions apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -513,6 +513,28 @@ forkPreloads?: boolean;

Whether to enable the experimental forked preloading feature using Svelte's fork API.

</div>
</div>
<div class="ts-block-property">

```ts
// @noErrors
handleRenderingErrors?: boolean;
```

<div class="ts-block-property-details">

<div class="ts-block-property-bullets">

- <span class="tag">default</span> `false`

</div>

Whether to enable the experimental handling of rendering errors.
When enabled, `<svelte:boundary>` is used to wrap components at each level
where there's an `+error.svelte`, rendering the error page if the component fails.
In addition, error boundaries also work on the server and the error object goes through `handleError`.

</div>
</div>

Expand Down