Логирование событий

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

Типы событий

Unpoly использует собственную систему событий, которая строится вокруг событий жизненного цикла запросов (request lifecycle events) и событий DOM (DOM events). Основные категории событий:

  1. up:request — срабатывает при инициации запроса к серверу.
  2. up:success — вызывается после успешного получения ответа.
  3. up:fail — срабатывает при ошибке запроса.
  4. up:after-update — вызывается после того, как содержимое страницы было обновлено.
  5. up:fragment:loaded — события, связанные с загрузкой конкретных фрагментов HTML.

Каждое событие передает объект event с ключевой информацией о запросе и состоянии страницы. Для анализа логов важно понимать структуру этого объекта:

{
  target: HTMLElement, // элемент, инициировавший событие
  request: Up.Request, // объект запроса
  response: Up.Response, // объект ответа (если есть)
  fragment: HTMLElement, // обновленный фрагмент (если есть)
}

Регистрация обработчиков событий

Для логирования можно использовать метод up.on(eventName, callback) или делегировать события к конкретным элементам. Примеры:

up.on('up:request', function(event) {
  console.log('Запрос инициирован для элемента:', event.target);
});

up.on('up:success', function(event) {
  console.log('Успешный ответ:', event.response.status);
});

up.on('up:fail', function(event) {
  console.error('Ошибка запроса:', event.response.status);
});

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

up.on('click', 'a[data-up-target]', function(event) {
  console.log('Клик по ссылке с Unpoly:', event.target.href);
});

Фильтрация и уточнение логов

Unpoly позволяет ограничивать обработку событий конкретными фрагментами или условиями запроса. Например:

up.on('up:after-update', '.comments', function(event) {
  console.log('Фрагмент комментариев обновлен');
});

В этом примере обработчик сработает только тогда, когда обновляется элемент с классом .comments.

Для фильтрации по типу запроса можно использовать объект event.request:

up.on('up:request', function(event) {
  if(event.request.method === 'POST') {
    console.log('POST-запрос инициирован');
  }
});

Встроенные методы логирования

Unpoly предоставляет утилиту up.log, которая позволяет вести централизованное логирование:

up.log.info('Инициализация запроса');
up.log.warn('Запрос занимает слишком много времени');
up.log.error('Ошибка загрузки фрагмента');

Методы info, warn и error поддерживают форматирование сообщений и позволяют добавлять объекты с данными для анализа. Например:

up.log.info('Ответ от сервера', { status: 200, url: event.request.url });

Логирование жизненного цикла запроса

Жизненный цикл запроса включает несколько этапов:

  1. Инициация запроса (up:request) — момент отправки запроса.
  2. Получение ответа (up:success / up:fail) — обработка результата.
  3. Обновление DOM (up:after-update) — внедрение нового контента.
  4. Завершение (up:request-end) — финальные действия после обновления страницы.

Логирование на каждом этапе позволяет создавать детальные трассировки:

up.on('up:request', function(event) {
  up.log.info('Запрос отправлен', { url: event.request.url });
});

up.on('up:success', function(event) {
  up.log.info('Ответ успешно получен', { status: event.response.status });
});

up.on('up:after-update', function(event) {
  up.log.info('DOM обновлен', { fragment: event.fragment });
});

Практические рекомендации

  • Использовать селекторы для фильтрации событий, чтобы избегать избыточных логов.
  • Объединять up.log с событиями жизненного цикла, чтобы видеть последовательность операций.
  • Добавлять контекстные данные, такие как URL, статус ответа и целевой элемент, для упрощения отладки.
  • Разделять уровни логов (info, warn, error), чтобы легче анализировать критичные ошибки.

Логирование событий в Unpoly предоставляет мощный инструмент для мониторинга и отладки динамических веб-приложений, позволяя отслеживать поведение интерфейса, состояние запросов и обновления DOM в реальном времени.

Оглавление