Логирование и мониторинг

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

Принципы логирования в Preact

Логирование в Preact строится на базовых принципах JavaScript и веб-разработки: сохранение информации о событиях, ошибках и пользовательских действиях. Основные подходы:

  1. Консольное логирование console.log, console.error, console.warn остаются базовым инструментом. В Preact удобно логировать внутри функций компонентов и хуков:

    import { useState } from 'preact/hooks';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prev => {
      console.log(`Счетчик изменен: ${prev + 1}`);
      return prev + 1;
    });
  };

  return <button onCl ick={increment}>Count: {count}</button>;
}

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

  2. Централизованное логирование через middleware Для больших приложений Preact удобнее внедрять слой, который перехватывает события и ошибки глобально. Например, создание утилиты logger.js:

    export const logger = {
  info: (msg, data) => {
    if (process.env.NODE_ENV !== 'production') {
      console.info(msg, data);
    }
  },
  warn: (msg, data) => {
    console.warn(msg, data);
  },
  error: (msg, data) => {
    console.error(msg, data);
  }
};

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

Отслеживание ошибок

Ошибки в Preact-компонентах могут быть локализованы с помощью Error Boundaries, аналогично React. Пример реализации:

import { Component } from 'preact';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  componentDidCatch(error) {
    this.setState({ hasError: true, error });
    console.error('Произошла ошибка в компоненте:', error);
  }

  render() {
    if (this.state.hasError) {
      return <div>Произошла ошибка. Попробуйте позже.</div>;
    }
    return this.props.children;
  }
}

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

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

Preact предоставляет инструменты для анализа производительности компонентов. Основные методы:

  1. Использование requestAnimationFrame и performance.now Позволяет измерять время рендера отдельных компонентов:

    import { useEffect } from 'preact/hooks';

function ExpensiveComponent() {
  useEffect(() => {
    const start = performance.now();
    return () => {
      const end = performance.now();
      console.log(`Время жизни компонента: ${end - start} мс`);
    };
  }, []);

  return <div>Тяжелый компонент</div>;
}

  2. Встраивание профайлера В Preact X и выше можно использовать профайлер через preact/debug:

    import { setupDevtools } from 'preact/debug';

setupDevtools(); // подключение инструментов Preact DevTools

    Это позволяет отслеживать количество рендеров, обновления состояния и изменения пропсов, что важно для оптимизации производительности.

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

Для масштабных приложений логирование и мониторинг часто передаются в специализированные сервисы:

  • Sentry — для отслеживания ошибок и стеков вызовов.
  • LogRocket или FullStory — для анализа пользовательского поведения.
  • Prometheus + Grafana — для мониторинга метрик производительности.

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

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

Sentry.init({ dsn: 'ВАШ_DSN' });

function App() {
  const handleClick = () => {
    try {
      throw new Error('Тестовая ошибка');
    } catch (err) {
      Sentry.captureException(err);
    }
  };

  return <button onCl ick={handleClick}>Вызвать ошибку</button>;
}

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

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

Отслеживание действий пользователя помогает анализировать UX и выявлять узкие места. В Preact это можно реализовать через кастомные хуки:

import { useEffect } from 'preact/hooks';
import { logger } from './logger';

function useUserAction(eventName, callback) {
  useEffect(() => {
    const handler = (event) => {
      logger.info(`Событие: ${eventName}`, event);
      if (callback) callback(event);
    };
    window.addEventListener(eventName, handler);
    return () => window.removeEventListener(eventName, handler);
  }, [eventName, callback]);
}

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

function App() {
  useUserAction('click', () => console.log('Пользователь кликнул по странице'));
  return <div>Контент приложения</div>;
}

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

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

  • Разделять логи разработки и логи продакшена. Использовать переменные окружения для фильтрации.
  • Встраивать Error Boundaries для защиты компонентов и детальной информации об ошибках.
  • Использовать внешние сервисы мониторинга для продакшн-приложений.
  • Профилировать компоненты, чтобы выявлять «тяжелые» рендеры и оптимизировать перерисовки.
  • Логировать пользовательские события через кастомные хуки, сохраняя единообразие и структуру данных.

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

Оглавление