Трейсинг маршрутов

Основы маршрутизации и трейсинга

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

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

  • Какие маршруты были активированы;
  • Какие параметры были переданы;
  • Какие хуки загрузки данных и рендеринга были вызваны.

Конфигурация трейсинга

Для включения трейсинга используется объект конфигурации роутера. Основной параметр — useTracing, который подключает механизм логирования и анализа навигации.

Пример конфигурации:

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

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/users/:userId',
      component: UserProfile,
    },
  ],
  useTracing: true, // Включение трейсинга
});

При включенном трейсинге TanStack Router автоматически выводит в консоль информацию о каждом переходе, включая:

  • from — предыдущий маршрут;
  • to — текущий маршрут;
  • params — параметры маршрута;
  • search — строку запроса;
  • state — объект состояния, переданный при навигации.

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

Трейсинг позволяет видеть не только сам факт навигации, но и детали динамических сегментов URL. Например, при переходе на /users/42 трейсинг покажет:

{
  "from": "/",
  "to": "/users/42",
  "params": { "userId": "42" },
  "search": "",
  "state": {}
}

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

Интеграция с хуками загрузки данных

TanStack Router поддерживает асинхронные хуки загрузки данных через loader и onLoad. Трейсинг позволяет видеть последовательность вызовов этих хуков при переходе между страницами.

Пример:

const router = createRouter({
  routes: [
    {
      path: '/posts/:postId',
      component: Post,
      loader: async ({ params }) => {
        const response = await fetch(`/api/posts/${params.postId}`);
        return response.json();
      },
      onLoad: ({ data, params }) => {
        console.log('Post loaded:', data, 'Params:', params);
      },
    },
  ],
  useTracing: true,
});

При навигации к конкретному посту консоль отобразит последовательность вызовов loader и onLoad с указанием фактических параметров маршрута.

События маршрутизатора и пользовательский трейсинг

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

Пример пользовательского трейсинга:

router.subscribe(({ from, to, params }) => {
  console.log(`[TRACE] Navigation from ${from} to ${to} with params`, params);
});

Такой подход позволяет гибко реагировать на все изменения маршрута, в том числе для:

  • ведения аналитики переходов;
  • реализации собственных механик кеширования данных;
  • отладки сложных сценариев с вложенными маршрутами.

Визуальный трейсинг и DevTools

Для удобства отладки TanStack Router предлагает интеграцию с DevTools. При включенном трейсинге в браузере можно визуально отслеживать:

  • активные маршруты;
  • последовательность переходов;
  • загруженные данные и состояние компонентов.

DevTools отображают дерево маршрутов, что упрощает понимание того, какой компонент рендерится в текущий момент и какие параметры ему передаются.

Особенности трейсинга в вложенных маршрутах

При работе с вложенными маршрутами трейсинг помогает понять, как срабатывают дочерние роуты. Для маршрута с глубокой вложенностью:

{
  path: '/dashboard',
  component: Dashboard,
  children: [
    {
      path: 'analytics',
      component: Analytics,
    },
    {
      path: 'settings',
      component: Settings,
    },
  ],
}

При переходе на /dashboard/analytics трейсинг покажет:

  • активацию родительского маршрута dashboard;
  • активацию дочернего маршрута analytics;
  • параметры и состояние каждого уровня;
  • последовательность вызовов загрузки данных и хуков рендера.

Выводы о трейсинге маршрутов

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

Оглавление