Страницы ошибок: +error.svelte

Когда страница не найдена или load сообщил об ошибке, SvelteKit показывает страницу ошибки. Стандартная выглядит просто: код и текст. Свою страницу описывают в файле +error.svelte — обычном компоненте, который выводится вместо страницы внутри макета.

Своя страница ошибки

Создайте файл src/routes/+error.svelte:

<!-- src/routes/+error.svelte -->
<script>
  import { page } from '$app/state';
</script>
 
<h1>Ошибка {page.status}</h1>
<p>{page.error?.message}</p>
<a href="/">На главную</a>

Откройте несуществующий адрес, например http://localhost:5173/nothing, — появится «Ошибка 404», сообщение «Not Found» и ссылка на главную. Меню из корневого макета остаётся на месте, потому что +error.svelte выводится внутри +layout.svelte.

Откуда берутся код и сообщение

Для ожидаемых ошибок сообщение берётся из вызова error. Текст неожиданных исключений посетителю не показывается — он заменяется безопасным сообщением, которое можно задать в хуке handleError (предыдущий урок).

Разные коды — разный текст

Внутри компонента можно выбрать текст по коду:

<!-- src/routes/+error.svelte -->
<script>
  import { page } from '$app/state';
</script>
 
{#if page.status === 404}
  <h1>Страница не найдена</h1>
  <p>Проверьте адрес или вернитесь в <a href="/blog">блог</a>.</p>
{:else}
  <h1>Что-то сломалось</h1>
  <p>Попробуйте обновить страницу через минуту.</p>
{/if}

На /nothing и на /blog/nothing теперь появится «Страница не найдена» со ссылкой на блог.

Ошибка раздела

SvelteKit ищет ближайший +error.svelte, поднимаясь по папкам от страницы с ошибкой к корню. Файл src/routes/blog/+error.svelte будет показан для ошибок в /blog и вложенных адресах, а также выведется внутри макета блога:

<!-- src/routes/blog/+error.svelte -->
<script>
  import { page } from '$app/state';
</script>
 
<p>Статья недоступна: {page.error?.message}</p>
<a href="/blog">Все статьи</a>

Адрес /blog/nothing покажет «Статья недоступна: Статья не найдена» с боковой панелью блога.

Ошибка в корневом макете

Если сломается load самого корневого макета, +error.svelte вывести негде. На этот случай SvelteKit использует статический файл src/error.html — его можно создать с простой HTML-разметкой.

Частая ошибка

Импортировать page из $app/stores и писать $page.status. Это старый способ из SvelteKit 1 и ранних версий второй; он ещё работает, но в новых проектах используйте page из $app/state — без знака $ перед именем.