Error tracking

Отслеживание ошибок в SvelteKit требует понимания двух уровней: клиентского и серверного. Ошибки могут возникать как в логике компонентов, так и при взаимодействии с API или серверными функциями.

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

В SvelteKit каждый компонент может выбрасывать ошибки через стандартные механизмы JavaScript (throw new Error()), но библиотека предоставляет расширенные возможности для обработки ошибок:

  • onError хук Позволяет перехватывать ошибки на уровне компонента. Его можно использовать для логирования или для вывода пользовательского интерфейса при ошибке.
<script>
  import { onError } from 'svelte';

  onError((error) => {
    console.error('Ошибка компонента:', error.message);
  });
</script>
  • Обработка асинхронных ошибок Часто ошибки появляются при работе с fetch или асинхронными функциями. В SvelteKit можно использовать блоки try/catch внутри load функций для маршрутов.
export async function load({ fetch }) {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Ошибка загрузки данных');
    const data = await res.json();
    return { props: { data } };
  } catch (err) {
    return { error: err.message };
  }
}

Серверное отслеживание ошибок

На серверной стороне SvelteKit ошибки могут возникать в endpoints (+server.js) или в hooks (+layout.server.js). Здесь важны два аспекта: логирование и правильная генерация ответов клиенту.

  • Использование error функции SvelteKit Для передачи ошибок клиенту рекомендуется функция error(status, message). Она автоматически создаёт объект ошибки с нужным HTTP-статусом.
import { error } from '@sveltejs/kit';

export async function GET() {
  const data = await fetchSomeData();
  if (!data) {
    throw error(404, 'Данные не найдены');
  }
  return new Response(JSON.stringify(data));
}
  • Hooks для глобальной обработки В hooks.server.js можно перехватывать ошибки всех запросов, чтобы централизованно логировать их.
export async function handle({ event, resolve }) {
  try {
    return await resolve(event);
  } catch (err) {
    console.error('Глобальная ошибка сервера:', err);
    return new Response('Внутренняя ошибка сервера', { status: 500 });
  }
}

Интеграция с внешними сервисами

Для продакшн-приложений важно подключение к сервисам отслеживания ошибок, таким как Sentry, Bugsnag, Rollbar:

  • Настройка Sentry с SvelteKit Установка через npm:
npm install @sentry/sveltekit

Импорт и инициализация в hooks.server.js и hooks.client.js:

import * as Sentry from '@sentry/sveltekit';

Sentry.init({
  dsn: 'YOUR_DSN_URL',
  tracesSampleRate: 1.0
});
  • Отправка ошибок вручную Для специфических случаев можно использовать:
try {
  riskyFunction();
} catch (err) {
  Sentry.captureException(err);
}
  • Автоматическое отслеживание Sentry перехватывает необработанные ошибки в компонентах, асинхронные исключения и ошибки серверных endpoint’ов, предоставляя полный стек-трейс.

Стратегии обработки ошибок UI

  1. Пользовательские уведомления Использовать компоненты уведомлений для отображения ошибок пользователю. При этом важно различать ошибки критические (сервер недоступен) и не критические (не удалось загрузить отдельный элемент UI).

  2. Фолбэки (Fallback) Для компонентов можно реализовать fallback-контент при ошибке загрузки данных:

{#if error}
  <div class="error">Произошла ошибка: {error}</div>
{:else}
  <DataComponent {data} />
{/if}
  1. Логирование и мониторинг Использовать консоль в разработке и внешние сервисы в продакшне. Можно настроить разные уровни логирования: info, warn, error.

Лучшие практики

  • Не блокировать интерфейс при каждой ошибке — предоставить пользователю альтернативу или возможность повторной попытки.
  • Всегда логировать ошибки, чтобы не терять информацию о проблемах в продакшне.
  • Разделять обработку ошибок на клиентскую и серверную части, чтобы избежать утечек чувствительных данных.
  • Использовать централизованные hooks для глобальных ошибок, это упрощает поддержку и отладку.

Эта стратегия позволяет строить устойчивые SvelteKit приложения, где ошибки отслеживаются, логируются и обрабатываются корректно, без прерывания пользовательского опыта.

Оглавление