Включение режима отладки

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

Настройка отладки через объект конфигурации

Universal Router поддерживает включение отладки через опцию context и перехват функции resolveRoute. Основной механизм заключается в том, чтобы передавать в маршрутизатор объект context, содержащий логирующие функции. Например:

import UniversalRouter from 'universal-router';

const routes = [
  { path: '/', action: () => 'Главная' },
  { path: '/about', action: () => 'О нас' },
  { path: '/users/:id', action: ({ params }) => `Пользователь ${params.id}` }
];

const router = new UniversalRouter(routes, {
  context: {
    debug: true,
    log: (message) => console.log('[Router Debug]', message)
  }
});

Здесь ключ debug служит индикатором включения режима отладки, а log — функцией для вывода информации о сопоставлении маршрутов.

Использование middleware для логирования

Universal Router позволяет подключать middleware для перехвата и анализа вызовов. Это удобно для создания детального журнала выполнения маршрутов:

function debugMiddleware(context, next) {
  if (context.debug) {
    console.log('[Router] Начало обработки маршрута:', context.path);
  }
  return next().then(result => {
    if (context.debug) {
      console.log('[Router] Результат маршрута:', result);
    }
    return result;
  });
}

const router = new UniversalRouter(routes, {
  context: { debug: true },
  resolveRoute: (route, context, params) => {
    debugMiddleware(context, () => route.action({ ...context, params }));
  }
});

Middleware позволяет отслеживать:

  • Текущий путь (context.path)
  • Параметры маршрута (params)
  • Возвращаемое значение обработчика (result)

Подробное логирование сопоставления маршрутов

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

const router = new UniversalRouter(routes, {
  resolveRoute: async (route, context, params) => {
    if (context.debug) {
      console.group(`[Router Debug] Маршрут: ${route.path}`);
      console.log('Параметры:', params);
      console.log('Контекст:', context);
    }

    const result = await route.action({ ...context, params });

    if (context.debug) {
      console.log('Результат:', result);
      console.groupEnd();
    }

    return result;
  }
});

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

  • Выявлять, какой маршрут был выбран первым при совпадении нескольких вариантов.
  • Отслеживать асинхронные операции внутри action.
  • Собирать полные данные о состоянии контекста в каждом вызове.

Включение отладки для асинхронных маршрутов

Асинхронные маршруты часто используют async/await внутри action. Режим отладки не меняет логику выполнения, но позволяет фиксировать момент начала и окончания обработки:

const routes = [
  { path: '/data', async action() {
    console.log('Запрос данных...');
    const data = await fetch('/api/data').then(res => res.json());
    return data;
  }}
];

const router = new UniversalRouter(routes, {
  resolveRoute: async (route, context, params) => {
    if (context.debug) console.log('Начало асинхронного маршрута:', route.path);
    const result = await route.action({ ...context, params });
    if (context.debug) console.log('Асинхронный маршрут завершен:', result);
    return result;
  },
  context: { debug: true }
});

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

Примеры логов отладки

При включенном режиме отладки вывод может выглядеть так:

[Router Debug] Маршрут: /users/:id
Параметры: { id: '42' }
Контекст: { debug: true, user: 'admin' }
Результат: Пользователь 42

Использование группирования console.group и console.groupEnd помогает структурировать сложные последовательности вызовов.

Советы по эффективному использованию

  • Включать debug только в режиме разработки, чтобы не захламлять консоль в продакшене.
  • Сохранять параметры маршрута и контекст в логах для последующего анализа.
  • При больших приложениях использовать middleware для автоматического логирования всех маршрутов.
  • Сочетать с инструментами профилирования браузера для измерения времени выполнения асинхронных маршрутов.

Режим отладки Universal Router становится мощным инструментом для понимания поведения маршрутов, выявления ошибок в сопоставлении и контроля выполнения асинхронных действий.

Оглавление