Логирование

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

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

Для базового логирования в Stencil используются стандартные методы console:

console.log('Информация о компоненте', this);
console.warn('Предупреждение о потенциальной ошибке');
console.error('Ошибка при обработке данных');
console.info('Дополнительная информация');

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

Logger API Stencil

Stencil предоставляет @Logger() декоратор и встроенный объект Build для логирования. Он позволяет выводить сообщения в зависимости от режима сборки (dev или prod) и уровня важности.

Пример использования Build:

import { Build } from '@stencil/core';

if (Build.isDev) {
  console.log('Компонент инициализирован в режиме разработки');
}

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

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

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

  • componentWillLoad() — вызывается перед монтированием компонента.
  • componentDidLoad() — вызывается после монтирования компонента в DOM.
  • componentShouldUpdate() — проверка необходимости обновления.
  • componentWillUpdate() — перед обновлением компонента.
  • componentDidUpdate() — после обновления компонента.
  • componentDidUnload() — после удаления компонента.

Пример логирования в жизненном цикле:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'example-component',
  styleUrl: 'example-component.css',
  shadow: true
})
export class ExampleComponent {

  componentWillLoad() {
    console.log('componentWillLoad: подготовка к монтированию');
  }

  componentDidLoad() {
    console.log('componentDidLoad: компонент смонтирован');
  }

  componentWillUpdate() {
    console.log('componentWillUpdate: компонент обновляется');
  }

  componentDidUpdate() {
    console.log('componentDidUpdate: компонент обновлен');
  }

  componentDidUnload() {
    console.log('componentDidUnload: компонент удален');
  }

  render() {
    return <div>Пример компонента</div>;
  }
}

Кастомные уровни логирования

Для организации структурированного логирования можно реализовать собственный логгер с уровнями debug, info, warn, error:

type LogLevel = 'debug' | 'info' | 'warn' | 'error';

class Logger {
  static log(message: string, level: LogLevel = 'info') {
    const prefix = `[${level.toUpperCase()}]`;
    switch(level) {
      case 'debug':
        console.debug(prefix, message);
        break;
      case 'info':
        console.info(prefix, message);
        break;
      case 'warn':
        console.warn(prefix, message);
        break;
      case 'error':
        console.error(prefix, message);
        break;
    }
  }
}

Logger.log('Инициализация компонента', 'debug');
Logger.log('Компонент успешно загружен', 'info');
Logger.log('Предупреждение о производительности', 'warn');
Logger.log('Ошибка загрузки данных', 'error');

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

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

Stencil поддерживает пользовательские события (@Event), которые также можно логировать:

import { Component, Event, EventEmitter, h } from '@stencil/core';

@Component({
  tag: 'event-logger',
  shadow: true
})
export class EventLogger {

  @Event() actionOccurred: EventEmitter<string>;

  triggerAction() {
    const message = 'Действие выполнено';
    this.actionOccurred.emit(message);
    console.log('Event emitted:', message);
  }

  render() {
    return <button onCl ick={() => this.triggerAction()}>Сделать действие</button>;
  }
}

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

Производительность логирования

При активном логировании в Stencil необходимо учитывать влияние на производительность. В продакшн-сборке рекомендуется:

  • Использовать проверку Build.isDev перед выводом логов.
  • Удалять или отключать дебаг-сообщения.
  • Ограничивать логирование тяжелых объектов (например, больших структур данных) или использовать сериализацию.
if (Build.isDev) {
  console.log('Детальная информация о состоянии компонента:', JSON.stringify(this.data));
}

Интеграция с внешними системами

Stencil легко интегрируется с внешними библиотеками логирования, такими как Sentry, LogRocket или Winston. Это позволяет сохранять ошибки и события в централизованное хранилище, получать отчеты о сбоях и аналитике пользовательского поведения.

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

import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0' });

try {
  // потенциально проблемный код
} catch (error) {
  Sentry.captureException(error);
  console.error('Ошибка отправлена в Sentry', error);
}

Логирование с помощью внешних сервисов особенно важно для отслеживания проблем в продакшн-среде, когда доступ к консоли ограничен.

Оглавление