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

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

Slim Select генерирует события на ключевых этапах взаимодействия:

  • инициализация компонента
  • открытие и закрытие списка
  • выбор и снятие выбора
  • ввод в поле поиска
  • обновление данных источника

Каждое событие может быть перехвачено через стандартные механизмы подписки. Логирование строится как дополнительный слой поверх этих событий, не вмешиваясь в логику работы компонента.

Базовая схема интеграции:

const select = new SlimSelect({
  select: '#example-select',
  events: {
    afterChange: (newVal) => {},
    beforeOpen: () => {},
    afterOpen: () => {},
    beforeClose: () => {},
    afterClose: () => {}
  }
});

Каждый callback становится точкой внедрения логирующей функции.

Базовое логирование через консоль

Простейшая форма фиксации событий реализуется через console-интерфейс. Такой подход используется на этапе разработки и отладки поведения UI-компонента.

const logger = {
  info: (event, payload) => {
    console.log(`[SlimSelect][INFO] ${event}`, payload);
  },
  warn: (event, payload) => {
    console.warn(`[SlimSelect][WARN] ${event}`, payload);
  },
  error: (event, payload) => {
    console.error(`[SlimSelect][ERROR] ${event}`, payload);
  }
};

Интеграция с событиями:

const select = new SlimSelect({
  select: '#example-select',
  events: {
    afterChange: (value) => {
      logger.info('afterChange', value);
    },
    afterOpen: () => {
      logger.info('afterOpen');
    },
    afterClose: () => {
      logger.info('afterClose');
    }
  }
});

Такой подход фиксирует последовательность пользовательских действий без хранения состояния между событиями.

Централизованный обработчик событий

При увеличении количества селекторов логирование через локальные callback-функции становится избыточным. Используется единый обработчик событий, который принимает контекст источника.

function createEventLogger(componentName) {
  return function(eventName, payload) {
    console.log(`[${componentName}] ${eventName}`, payload);
  };
}

Применение:

const log = createEventLogger('country-select');

const select = new SlimSelect({
  select: '#country',
  events: {
    afterChange: (val) => log('afterChange', val),
    afterOpen: () => log('afterOpen'),
    afterClose: () => log('afterClose')
  }
});

Подобная структура упрощает масштабирование системы логирования при множестве инстансов компонента.

Логирование структуры данных

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

Фиксация состояния после каждого изменения:

function logState(event, instance) {
  console.log(event, {
    selected: instance.selected(),
    data: instance.data.data,
    search: instance.search ? instance.search() : null
  });
}

Использование:

const select = new SlimSelect({
  select: '#example-select',
  events: {
    afterChange: function() {
      logState('afterChange', this);
    }
  }
});

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

Перехват пользовательского ввода

Поиск внутри Slim Select является отдельным потоком событий. Логирование ввода используется для анализа поведения и диагностики фильтрации данных.

const select = new SlimSelect({
  select: '#searchable',
  events: {
    search: (query) => {
      console.log('[search]', query);
    }
  }
});

При высокой частоте ввода возникает необходимость ограничения количества логов.

Дебаунсинг логирования

При активном вводе данных поток событий становится избыточным. Применяется механизм debounce для группировки вызовов.

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

Использование:

const logSearch = debounce((query) => {
  console.log('[search-debounced]', query);
}, 300);

const select = new SlimSelect({
  select: '#search',
  events: {
    search: logSearch
  }
});

Это снижает нагрузку на консоль и предотвращает деградацию производительности при интенсивном вводе.

Уровни логирования и классификация событий

Систематизация логов позволяет разделять информационные, диагностические и критические события.

Типовая модель уровней:

  • info — стандартные действия пользователя
  • debug — внутренние состояния и промежуточные данные
  • warn — потенциально некорректные состояния
  • error — сбои и исключения

Пример классификатора:

function classifyEvent(event) {
  const infoEvents = ['afterChange', 'afterOpen', 'afterClose'];
  const debugEvents = ['search', 'dataUpdate'];

  if (infoEvents.includes(event)) return 'info';
  if (debugEvents.includes(event)) return 'debug';
  return 'warn';
}

Интеграция:

function log(event, payload) {
  const level = classifyEvent(event);

  console[level](`[SlimSelect][${level}] ${event}`, payload);
}

Логирование динамического обновления данных

Slim Select поддерживает обновление источников данных, что требует отдельного контроля изменений.

select.setData([
  { text: 'Item 1', value: '1' },
  { text: 'Item 2', value: '2' }
]);

Обёртка для фиксации изменений:

function wrapSetData(instance) {
  const original = instance.setData;

  instance.setData = function(data) {
    console.log('[setData]', data);
    return original.call(this, data);
  };
}

Такой подход позволяет отслеживать источник изменений независимо от инициатора.

Отправка логов во внешние системы

В производственной среде консольное логирование заменяется отправкой событий в телеметрию.

async function sendLog(event, payload) {
  await fetch('/logs', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      event,
      payload,
      timestamp: Date.now()
    })
  });
}

Интеграция с обработчиками:

const select = new SlimSelect({
  select: '#remote',
  events: {
    afterChange: (val) => sendLog('afterChange', val),
    afterOpen: () => sendLog('afterOpen')
  }
});

Агрегация событий

При большом количестве взаимодействий применяется накопление событий с последующей пакетной отправкой.

const buffer = [];

function addToBuffer(event, payload) {
  buffer.push({ event, payload, time: Date.now() });
}

setInterval(() => {
  if (buffer.length === 0) return;

  const batch = buffer.splice(0, buffer.length);

  fetch('/logs/batch', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(batch)
  });
}, 5000);

Применение буферизации снижает нагрузку на сеть и сервер при интенсивных интерфейсных взаимодействиях.

Обработка ошибок в событиях

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

function safeHandler(fn, logger) {
  return function(...args) {
    try {
      return fn.apply(this, args);
    } catch (err) {
      logger('error', err);
    }
  };
}

Использование:

events: {
  afterChange: safeHandler((val) => {
    processValue(val);
  }, log)
}

Такая модель предотвращает прерывание логирования при сбоях бизнес-логики.

Корреляция событий между экземплярами

При наличии нескольких селекторов важно связывать события между собой через идентификатор контекста.

const instanceId = 'filter-1';

function log(event, payload) {
  console.log(`[${instanceId}] ${event}`, payload);
}

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

Оглавление