Компонент ErrorComponent

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

Назначение и возможности

Основные функции ErrorComponent:

  • Отображение пользовательских сообщений об ошибках.
  • Возможность повторной попытки загрузки данных.
  • Поддержка различных типов ошибок: сетевые, серверные, ошибки парсинга и ошибки маршрутизации.
  • Изоляция ошибки конкретного маршрута без разрушения всей иерархии приложения.

Важное отличие от обычной обработки ошибок заключается в том, что ErrorComponent интегрируется с маршрутизатором и получает информацию о маршруте, на котором произошла ошибка, что позволяет более гибко реагировать на ситуацию.

Объявление ErrorComponent

В TanStack Router ErrorComponent задаётся непосредственно в объекте маршрута:

import { Route } from '@tanstack/router';

const userRoute = new Route({
  path: '/user/:userId',
  component: UserComponent,
  errorComponent: UserErrorComponent,
});

В этом примере UserErrorComponent будет отображаться всякий раз, когда внутри маршрута /user/:userId возникнет ошибка, будь то ошибка запроса к API или ошибка рендера дочернего компонента.

Интерфейс ErrorComponent

Компонент получает объект error и объект routeContext через пропсы:

function UserErrorComponent({ error, routeContext }) {
  return (
    <div>
      <h2>Произошла ошибка на маршруте {routeContext.route.path}</h2>
      <pre>{error.message}</pre>
    </div>
  );
}

Основные свойства:

  • error — объект ошибки. Может быть экземпляром Error, TypeError, Response (при работе с fetch) и других классов.

  • routeContext — объект с информацией о маршруте и состоянии навигации:

    • route — текущий маршрут.
    • params — параметры маршрута.
    • search — объект query-параметров.
    • pathname — текущий путь.

Обработка различных типов ошибок

ErrorComponent позволяет различать ошибки:

function ApiErrorComponent({ error }) {
  if (error instanceof Response) {
    return <div>Ошибка сервера: {error.status}</div>;
  }

  if (error instanceof TypeError) {
    return <div>Ошибка сети: {error.message}</div>;
  }

  return <div>Неизвестная ошибка: {error.message}</div>;
}

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

Ошибки в дочерних маршрутах

TanStack Router поддерживает вложенные маршруты. Если ошибка возникает в дочернем маршруте, ErrorComponent родительского маршрута может быть вызван автоматически, если для дочернего маршрута не задан отдельный компонент ошибок:

const dashboardRoute = new Route({
  path: '/dashboard',
  component: DashboardComponent,
  errorComponent: DashboardErrorComponent,
  children: [
    new Route({
      path: 'settings',
      component: SettingsComponent,
      // Нет errorComponent
    }),
  ],
});

Если ошибка произойдёт в SettingsComponent, DashboardErrorComponent будет показан по умолчанию.

Повторная попытка загрузки данных

Часто ErrorComponent используется совместно с fetch-функциями и загрузкой данных через loader маршрута. Можно добавить кнопку для повторной попытки:

function UserErrorComponent({ error, routeContext }) {
  const retry = () => routeContext.router.refresh();

  return (
    <div>
      <p>Ошибка загрузки данных: {error.message}</p>
      <button onCl ick={retry}>Попробовать снова</button>
    </div>
  );
}

Метод router.refresh() инициирует повторную загрузку данных для текущего маршрута.

Логирование ошибок

Для отладки и мониторинга ошибок ErrorComponent можно интегрировать с внешними сервисами:

function LoggingErrorComponent({ error }) {
  useEffect(() => {
    console.error('Произошла ошибка маршрута:', error);
    // Отправка на сервер логов
    sendErrorToServer(error);
  }, [error]);

  return <div>Произошла ошибка. Подробности в консоли.</div>;
}

Это позволяет не только информировать пользователя, но и собирать статистику о проблемах в приложении.

Советы по использованию

  • Всегда задавать ErrorComponent для маршрутов, где происходит загрузка данных или сложная логика.
  • Разделять визуальное отображение ошибки и логику обработки, чтобы компонент оставался переиспользуемым.
  • Для вложенных маршрутов использовать наследование ошибок, если дочерние маршруты не требуют индивидуального отображения ошибок.
  • Комбинировать с suspense и loadingComponent для плавного UX при асинхронной загрузке.

ErrorComponent в TanStack Router обеспечивает устойчивость приложения к сбоям, централизованное управление ошибками и гибкую настройку пользовательского интерфейса при возникновении ошибок, что делает маршрутизацию более надежной и предсказуемой.

Оглавление