Типы ошибок в роутере

TanStack Router предоставляет гибкую и мощную систему маршрутизации для современных веб-приложений на JavaScript. Одним из ключевых аспектов является обработка ошибок на различных уровнях маршрутов, что позволяет создавать стабильные приложения с предсказуемым поведением при возникновении непредвиденных ситуаций. Ошибки в роутере можно разделить на несколько типов, каждый из которых имеет свои особенности и методы обработки.

1. Ошибки загрузки маршрута (Loader Errors)

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

Примеры причин:

  • Сетевые ошибки при запросе данных.
  • Некорректный формат данных, возвращаемых API.
  • Превышение времени ожидания ответа от сервера.

Обработка:

  • Каждому маршруту можно задать errorElement — компонент, который будет отображаться при ошибке загрузки.
  • Внутри компонента errorElement можно использовать useRouteError() для получения информации об ошибке.
import { useRouteError } from '@tanstack/router';

function LoaderErrorComponent() {
  const error = useRouteError();
  return <div>Произошла ошибка загрузки: {error.message}</div>;
}
  • Возврат ошибки из loader автоматически приводит к рендерингу errorElement.

2. Ошибки навигации (Navigation Errors)

Описание: Ошибки навигации возникают во время перехода между маршрутами, когда не удается корректно изменить состояние маршрута.

Основные причины:

  • Некорректные параметры маршрута.
  • Попытка перехода на несуществующий путь.
  • Прерывание навигации с использованием хуков beforeExit или beforeEnter, которые возвращают ошибку или false.

Обработка:

  • TanStack Router позволяет отслеживать ошибки навигации через глобальный обработчик ошибок, регистрируемый в router:
const router = createRouter({
  routeTree,
  onError: (error) => {
    console.error('Ошибка навигации:', error);
  },
});
  • Локально ошибки можно перехватывать через errorElement на маршруте, аналогично обработке ошибок загрузки.

3. Ошибки рендера компонентов маршрута (Render Errors)

Описание: Возникают при выполнении функции component или при рендеринге JSX, связанного с маршрутом. Эти ошибки аналогичны обычным ошибкам React-компонентов.

Примеры причин:

  • Некорректные данные из loader.
  • Ошибки в логике компонента (например, обращение к несуществующему свойству объекта).
  • Использование хуков вне компонента React.

Обработка:

  • Можно использовать стандартные механизмы React для перехвата ошибок: ErrorBoundary.
  • TanStack Router позволяет привязать errorElement для конкретного маршрута, что удобно для локальной изоляции ошибок рендера.
function RenderErrorBoundary({ error }) {
  return <div>Ошибка рендера маршрута: {error.message}</div>;
}

4. Ошибки асинхронного действия (Action Errors)

Описание: Ошибки действий (actions) возникают при выполнении асинхронных функций action, которые обычно используются для обработки форм и мутаций данных на сервере.

Примеры причин:

  • Некорректные данные, отправленные с формы.
  • Ошибки сервера при сохранении данных.
  • Прерывание запроса из-за тайм-аута.

Обработка:

  • Возвращение ошибки из action приводит к активации errorElement, который можно использовать для отображения сообщения пользователю.
  • useFormSubmit() и аналогичные хуки позволяют обрабатывать ошибки на уровне компонента, сохраняя контроль над UX.

5. Глобальные ошибки маршрутизатора

Описание: Включают все ошибки, которые не были перехвачены на уровне конкретного маршрута. Это может быть:

  • Ошибки инициализации маршрутов.
  • Некорректная конфигурация маршрутов.
  • Проблемы с синхронизацией состояния маршрута и URL.

Обработка:

  • Глобальный обработчик onError в настройках роутера.
  • Логирование и уведомления о критических ошибках, чтобы предотвратить некорректное поведение приложения.
const router = createRouter({
  routeTree,
  onError: (error) => {
    // глобальная обработка
    alert('Произошла критическая ошибка: ' + error.message);
  },
});

Ключевые моменты

  • Каждая ошибка маршрутизатора можно локализовать на уровне маршрута с помощью errorElement.
  • Ошибки loader и action обрабатываются через асинхронные функции и автоматически вызывают рендеринг компонента ошибки.
  • Глобальные ошибки требуют отдельного механизма onError для централизованного контроля.
  • Важная практика — всегда обеспечивать информативный вывод ошибок для отладки и улучшения UX, избегая падений приложения.

Хотите, я дополнительно подготовлю схему, которая визуально показывает типы ошибок и их обработку в TanStack Router?

Оглавление