Логирование навигации

Основы логирования

В TanStack Router логирование навигации реализуется через механизм хуков и подписок на события маршрутизатора. Основной инструмент для отслеживания изменений маршрутов — это метод subscribe у объекта маршрутизатора (Router). Он позволяет получать уведомления о каждом переходе, включая источник события, целевой маршрут и параметры запроса.

Пример базовой подписки:

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

const router = createRouter({
  // маршруты
});

router.subscribe((state) => {
  console.log('Навигация произошла');
  console.log('Текущий путь:', state.currentLocation.pathname);
  console.log('Параметры маршрута:', state.currentLocation.params);
});

В этом коде state.currentLocation содержит актуальные данные о маршруте, включая путь (pathname), параметры (params) и состояние поиска (search).

Отслеживание источника перехода

TanStack Router предоставляет возможность выявлять тип навигации, например, был ли переход инициирован пользователем через ссылку, программно через router.navigate, или через возврат истории браузера (popstate). Это важно для аналитики и точного логирования:

router.subscribe((state, previousState) => {
  const source = state.transition?.type || 'неизвестно';
  console.log(`Переход типа: ${source}`);
});

Поля transition.type могут принимать значения:

  • "link" — переход по ссылке <Link />;
  • "navigate" — программная навигация через router.navigate;
  • "pop" — возврат истории браузера (back / forward);
  • undefined — начальная загрузка или неизвестный источник.

Логирование параметров маршрута и query

Для аналитики важно не только фиксировать путь, но и содержимое параметров и query-параметров. TanStack Router хранит их в объекте currentLocation:

router.subscribe((state) => {
  console.log('Параметры маршрута:', state.currentLocation.params);
  console.log('Query-параметры:', state.currentLocation.search);
});

Если маршрут содержит динамические сегменты, например /users/:id, params.id даст идентификатор пользователя, по которому произошёл переход.

Хранение истории навигации

Для построения собственной системы логирования часто создают массив или стек событий:

const navigationLog = [];

router.subscribe((state) => {
  navigationLog.push({
    timestamp: Date.now(),
    path: state.currentLocation.pathname,
    params: state.currentLocation.params,
    search: state.currentLocation.search,
    type: state.transition?.type || 'неизвестно',
  });
});

Такой подход позволяет:

  • сохранять историю всех переходов,
  • анализировать последовательность действий пользователя,
  • строить статистику переходов по разделам приложения.

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

TanStack Router легко интегрируется с Google Analytics, Yandex Metrika и другими системами через подписку:

router.subscribe((state) => {
  window.gtag('event', 'page_view', {
    page_path: state.currentLocation.pathname,
    page_query: state.currentLocation.search,
  });
});

В этом примере каждый переход автоматически отправляется в Google Analytics с актуальным путём и параметрами.

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

Не все переходы проходят успешно. Для отлова ошибок используется событие onError:

router.options.onEr ror = (error) => {
  console.error('Ошибка при навигации:', error);
};

Это позволяет фиксировать:

  • неправильные маршруты,
  • ошибки при загрузке данных,
  • сбои в обработчиках хуков маршрутов.

Визуализация и отладка

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

function NavigationLogger({ router }) {
  const [log, setLog] = useState([]);

  useEffect(() => {
    return router.subscribe((state) => {
      setLog((prev) => [...prev, {
        time: new Date().toLocaleTimeString(),
        path: state.currentLocation.pathname,
        params: state.currentLocation.params
      }]);
    });
  }, [router]);

  return (
    <ul>
      {log.map((entry, index) => (
        <li key={index}>
          [{entry.time}] {entry.path} {JSON.stringify(entry.params)}
        </li>
      ))}
    </ul>
  );
}

Такой компонент удобен для разработки и тестирования, так как позволяет видеть навигацию в реальном времени без постоянного обращения к консоли.

Выводы по логированию

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

Эти механизмы позволяют создавать гибкую и масштабируемую систему мониторинга навигации в современных приложениях на JavaScript.

Оглавление