Логирование

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

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

В SkateJS каждый компонент создается через функцию define или через класс, наследующий Skate.Component. Основной способ логирования — использование событий жизненного цикла компонента. Ключевые методы, которые можно отслеживать:

  • connectedCallback() — вызывается при добавлении элемента в DOM.
  • disconnectedCallback() — вызывается при удалении элемента из DOM.
  • attributeChangedCallback(name, oldValue, newValue) — отслеживает изменения атрибутов.
  • render() — вызывается при обновлении состояния компонента.

Пример простого логирования состояния при подключении компонента:

import { define, Component, h } from 'skatejs';

class MyElement extends Component {
  static get is() { return 'my-element'; }

  connectedCallback() {
    super.connectedCallback();
    console.log(`[MyElement] Подключен к DOM`);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    console.log(`[MyElement] Удален из DOM`);
  }

  renderCallback() {
    console.log(`[MyElement] Рендеринг компонента`);
    return <div>Привет, SkateJS!</div>;
  }
}

define(MyElement);

Здесь каждая стадия жизненного цикла сопровождается записью в консоль, что позволяет отследить последовательность вызовов.

Логирование изменений свойств

SkateJS поддерживает декларативное определение свойств через объект props. Для логирования изменений удобно использовать наблюдатели свойств (watch), которые вызываются при изменении значения.

class CounterElement extends Component {
  static get is() { return 'counter-element'; }

  static get props() {
    return {
      count: {
        type: Number,
        default: 0,
        watch: (el, prev, next) => {
          console.log(`[CounterElement] count изменился с ${prev} на ${next}`);
        }
      }
    };
  }

  renderCallback() {
    return <div>Счетчик: {this.count}</div>;
  }
}

define(CounterElement);

Преимущества такого подхода:

  • Автоматическое отслеживание изменений свойств.
  • Централизованное логирование всех важных изменений состояния.
  • Упрощение отладки при сложных взаимодействиях компонентов.

Логирование пользовательских событий

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

class ButtonElement extends Component {
  static get is() { return 'button-element'; }

  handleClick() {
    console.log('[ButtonElement] Клик по кнопке');
    this.dispatchEvent(new CustomEvent('button-click', { detail: { time: Date.now() } }));
  }

  renderCallback() {
    return <button oncl ick={() => this.handleClick()}>Нажми меня</button>;
  }
}

define(ButtonElement);

Такое логирование позволяет видеть:

  • Время события.
  • Идентификатор компонента.
  • Любые дополнительные данные через detail.

Использование внешних библиотек для логирования

Для крупных проектов консольное логирование становится недостаточным. SkateJS легко интегрируется с внешними инструментами:

  1. Winston — серверное логирование, хранение логов в файлы или базы данных.
  2. Loglevel — легковесная библиотека для контроля уровня логирования (debug, info, warn, error).
  3. Sentry — отслеживание ошибок и исключений в компонентах.

Пример интеграции с Loglevel:

import log from 'loglevel';
log.setLevel('debug');

class UserCard extends Component {
  static get is() { return 'user-card'; }

  connectedCallback() {
    super.connectedCallback();
    log.info(`[UserCard] Компонент подключен`);
  }

  renderCallback() {
    log.debug(`[UserCard] Рендеринг с данными:`, this.user);
    return <div>{this.user?.name}</div>;
  }
}

define(UserCard);

Использование уровней логирования позволяет гибко контролировать вывод в разных средах (development, production).

Логирование производительности

SkateJS дает возможность отслеживать время выполнения методов рендера и обновлений, что важно для оптимизации больших приложений. Например, можно измерить время с помощью console.time и console.timeEnd:

class DataList extends Component {
  static get is() { return 'data-list'; }

  renderCallback() {
    console.time('[DataList] Рендер');
    const content = <ul>{this.items.map(item => <li>{item}</li>)}</ul>;
    console.timeEnd('[DataList] Рендер');
    return content;
  }
}

define(DataList);

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

Стратегии комплексного логирования

Для крупных приложений рекомендуется использовать структурированное логирование, объединяя:

  • Логирование жизненного цикла компонента.
  • Отслеживание изменений свойств.
  • Логирование пользовательских событий.
  • Метрики производительности.

Можно создать базовый компонент с встроенными логами и наследовать его для всех остальных компонентов:

class LoggingComponent extends Component {
  connectedCallback() {
    super.connectedCallback();
    console.log(`[${this.constructor.is}] Подключен`);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    console.log(`[${this.constructor.is}] Удален`);
  }

  logEvent(eventName, detail) {
    console.log(`[${this.constructor.is}] Событие: ${eventName}`, detail);
  }
}

Наследуемые компоненты получают готовую систему логирования, что упрощает поддержку и отладку.

Заключение промежуточных выводов

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

Оглавление