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

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

Ключевая особенность заключается в том, что AutoNumeric не заменяет DOM-события, а расширяет их поведение. Это позволяет фиксировать как низкоуровневые события (input, keydown, blur), так и высокоуровневые изменения значения после форматирования.

Нативные события и точки фиксации состояния

Любой экземпляр AutoNumeric работает поверх стандартного HTMLInputElement, поэтому логирование часто начинается с регистрации DOM-событий:

  • input — изменение значения пользователем
  • keydown — контроль ввода символов
  • keypress — устаревшее, но встречающееся в старых интеграциях
  • blur — завершение редактирования
  • focus — начало взаимодействия

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

Пример базового логирования через DOM:

const input = document.querySelector("#price");

input.addEventListener("input", (e) => {
    console.log("[INPUT]", {
        raw: e.target.value,
        timestamp: Date.now()
    });
});

input.addEventListener("blur", (e) => {
    console.log("[BLUR]", {
        final: e.target.value,
        timestamp: Date.now()
    });
});

В этом сценарии фиксируется только «сырой» DOM-уровень без учета преобразований AutoNumeric.

Логирование через колбэки AutoNumeric

Более точная фиксация состояния достигается через встроенные callback-механизмы. AutoNumeric предоставляет события жизненного цикла значения: изменение, очистка, форматирование, восстановление.

Типовые точки перехвата:

  • onInvalidPaste — попытка вставки некорректного значения
  • onChange — изменение значения после обработки
  • onFocus / onBlur — синхронизация состояния
  • onFormatting — момент применения формата
  • onInitialized — завершение инициализации экземпляра

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

const logger = (eventName) => (...args) => {
    console.log(`[AUTO NUMERIC ${eventName}]`, {
        args,
        time: performance.now()
    });
};

const anElement = AutoNumeric.multiple(".money", {
    onInitialized: logger("initialized"),
    onChange: logger("change"),
    onInvalidPaste: logger("invalidPaste"),
    onFocus: logger("focus"),
    onBlur: logger("blur")
});

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

Разделение raw и formatted значений в логах

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

AutoNumeric оперирует двумя состояниями:

  • formatted value — значение в поле ввода с разделителями, символами валют и прочими форматами
  • unformatted value — числовое значение без визуального оформления

Для корректного логирования необходимо фиксировать оба состояния:

const anElement = AutoNumeric.getAutoNumericElement("#price");

document.querySelector("#price").addEventListener("input", () => {
    console.log({
        formatted: anElement.getFormatted(),
        numeric: anElement.getNumber(),
        raw: anElement.getNumericString()
    });
});

Разделение этих уровней критично при отладке ошибок округления, потери точности и неправильной интерпретации ввода.

Структурированное логирование событий

При увеличении количества полей и экземпляров AutoNumeric простые console.log перестают быть достаточными. Возникает необходимость структурированного подхода.

Типовая структура события:

{
    fieldId: "price",
    eventType: "change",
    formatted: "1 200,50",
    numeric: 1200.5,
    previousNumeric: 1190,
    timestamp: 1710000000000,
    source: "autonumeric"
}

Формирование такой структуры позволяет:

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

Пример реализации:

function createEventLog(fieldId, eventType, instance) {
    return {
        fieldId,
        eventType,
        formatted: instance.getFormatted(),
        numeric: instance.getNumber(),
        timestamp: Date.now(),
        source: "autonumeric"
    };
}

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

AutoNumeric активно предотвращает ввод некорректных символов, но логирование таких ситуаций важно для анализа пользовательского поведения.

Основные сценарии:

  • вставка текста вместо числа
  • попытка ввода нескольких десятичных разделителей
  • превышение допустимых диапазонов
  • конфликт локали форматирования
const anElement = AutoNumeric.multiple(".amount", {
    onInvalidPaste: (event) => {
        console.warn("Invalid paste detected", {
            value: event?.target?.value,
            time: Date.now()
        });
    }
});

В расширенных системах такие события часто отправляются в аналитические сервисы.

Буферизация логов и оптимизация производительности

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

let buffer = [];

function flushLogs() {
    if (buffer.length === 0) return;

    fetch("/log", {
        method: "POST",
        body: JSON.stringify(buffer)
    });

    buffer = [];
}

function log(event) {
    buffer.push(event);

    if (buffer.length > 20) {
        flushLogs();
    }
}

setInterval(flushLogs, 3000);

AutoNumeric часто генерирует события на каждый ввод символа, поэтому без буферизации логирование становится узким местом.

Контроль частоты событий (debounce/throttle)

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

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

const debouncedLog = debounce((data) => {
    console.log("LOG:", data);
}, 200);

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

Интеграция логирования с жизненным циклом формы

В сложных формах AutoNumeric используется как часть более широкой системы управления состоянием. Логирование может включаться на уровне формы:

  • инициализация всех полей
  • массовое обновление значений
  • сброс формы
  • валидация перед отправкой
function logFormState(formId, instances) {
    return instances.map(inst => ({
        formId,
        field: inst.node.name,
        value: inst.getNumber(),
        formatted: inst.getFormatted()
    }));
}

Сравнение состояния до и после форматирования

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

input.addEventListener("change", () => {
    const before = input.value;

    setTimeout(() => {
        const after = anElement.getFormatted();

        console.log({
            before,
            after,
            diff: before !== after
        });
    }, 0);
});

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

Логирование в асинхронных сценариях

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

  • пользовательский ввод
  • программное изменение (set)
  • восстановление состояния
anElement.set(1500.75);

console.log({
    source: "programmatic",
    value: anElement.getNumber()
});

Без этого разделения аналитика поведения теряет достоверность.

Ошибки проектирования логирования в AutoNumeric

Типичные проблемы:

  • логирование только DOM-событий без учета форматирования
  • отсутствие различия между raw и formatted значениями
  • чрезмерный объем логов на каждое нажатие клавиши
  • игнорирование локалей и их влияния на формат
  • смешивание пользовательских и программных изменений

Эти ошибки приводят к искажению картины поведения интерфейса и затрудняют диагностику.

Контекстно-зависимое логирование

В продвинутых реализациях логирование зависит от режима работы поля:

  • режим ввода
  • режим просмотра
  • режим редактирования
  • режим валидации

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

Оглавление