Monitoring и логирование

Chakra UI как библиотека компонентов для React предоставляет гибкие инструменты для построения интерфейсов, но эффективное использование приложения невозможно без организации мониторинга и логирования. Даже при визуальной стабильности компонентов ошибки могут возникать на уровне состояния, взаимодействия с API или пользовательских событий.

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

В Chakra UI ключевую роль играют хуки состояния (useState, useDisclosure, useToast), поэтому первичный уровень логирования заключается в отслеживании их значений.

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

import { useDisclosure, Button, Modal, ModalOverlay, ModalContent } from "@chakra-ui/react";

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  console.log("Modal state:", isOpen);

  return (
    <>
      <Button onCl ick={() => { console.log("Opening modal"); onOpen(); }}>
        Open Modal
      </Button>
      <Modal isOpen={isOpen} onCl ose={() => { console.log("Closing modal"); onClose(); }}>
        <ModalOverlay />
        <ModalContent>
          <p>Modal content</p>
        </ModalContent>
      </Modal>
    </>
  );
}

Ключевые моменты:

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

Логирование событий Toast и уведомлений

Chakra UI предоставляет хук useToast, позволяющий отображать уведомления пользователю. Логирование вызовов toast важно для анализа поведения UI и ошибок.

import { useToast, Button } from "@chakra-ui/react";

function ToastLogger() {
  const toast = useToast();

  const showToast = () => {
    toast({
      title: "Успешное действие",
      status: "success",
      duration: 3000,
      isClosable: true,
    });
    console.log("Toast triggered: success");
  };

  return <Button onCl ick={showToast}>Show Toast</Button>;
}

Особенности:

  • Отслеживание вызовов уведомлений помогает в выявлении повторяющихся или неожиданных событий.
  • Можно интегрировать с внешними системами логирования, например, Sentry или LogRocket, чтобы сохранять историю уведомлений.

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

Для профессиональных приложений простого console.log недостаточно. Chakra UI можно сочетать с библиотеками мониторинга состояния React и API-запросов:

  1. Sentry – отслеживание ошибок UI и состояния компонентов.
  2. React Query Devtools – контроль за состоянием запросов данных.
  3. LogRocket – запись сессий и действий пользователя.

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

import * as Sentry from "@sentry/react";
import { useToast, Button } from "@chakra-ui/react";

function ErrorButton() {
  const toast = useToast();

  const handleClick = () => {
    try {
      throw new Error("Sample error");
    } catch (error) {
      Sentry.captureException(error);
      toast({
        title: "Произошла ошибка",
        status: "error",
        duration: 3000,
      });
    }
  };

  return <Button onCl ick={handleClick}>Trigger Error</Button>;
}

Выводы:

  • Ошибки UI автоматически отправляются в систему мониторинга.
  • Пользователь получает информативное уведомление через Chakra UI.

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

Chakra UI активно использует тему (theme) и кастомизацию цветовых схем. Для анализа проблем интерфейса важно логировать активные цветовые палитры и значения темы:

import { useColorMode, Button } from "@chakra-ui/react";

function ThemeLogger() {
  const { colorMode, toggleColorMode } = useColorMode();

  console.log("Current color mode:", colorMode);

  return <Button onCl ick={toggleColorMode}>Toggle Theme</Button>;
}

Примечания:

  • Логирование темы позволяет выявлять несоответствия стилей между светлой и тёмной схемой.
  • Полезно в сочетании с динамической генерацией стилей на основе темы.

Реализация централизованного логирования

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

export const logEvent = (component, action, details = {}) => {
  const timestamp = new Date().toISOString();
  console.log(`[${timestamp}] [${component}] ${action}`, details);
  // Интеграция с внешней системой
  // Sentry.captureMessage(`${component} - ${action}`, { extra: details });
};

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

<Button
  onCl ick={() => logEvent("Button", "Clicked", { label: "Submit" })}
>
  Submit
</Button>

Преимущества:

  • Единая точка для логирования всех действий компонентов.
  • Легкая интеграция с продакшн-системами.
  • Возможность добавлять дополнительную информацию: userId, sessionId, route.

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

Chakra UI использует множество компонентов с анимациями и динамическим рендерингом. Для отслеживания производительности полезны:

  1. React Profiler – измерение времени рендеринга компонентов.
  2. useEffect + console.time – локальный мониторинг времени выполнения эффектов:
import { useEffect } from "react";

useEffect(() => {
  console.time("Modal render");
  // действия, связанные с рендерингом
  console.timeEnd("Modal render");
}, []);

Вывод:

  • Позволяет определить узкие места при сложных анимациях или большом количестве вложенных компонентов.
  • В сочетании с системами мониторинга можно построить автоматические отчёты о производительности.

Логирование пользовательских форм

Компоненты формы Chakra UI (FormControl, Input, Select) часто являются источником ошибок ввода. Логирование действий пользователя позволяет обнаружить проблемные сценарии:

import { FormControl, FormLabel, Input, Button } from "@chakra-ui/react";
import { useState } from "react";

function FormLogger() {
  const [name, setName] = useState("");

  const handleSubmit = () => {
    console.log("Form submitted:", { name });
  };

  return (
    <form onSub mit={(e) => { e.preventDefault(); handleSubmit(); }}>
      <FormControl>
        <FormLabel>Name</FormLabel>
        <Input value={name} onCha nge={(e) => setName(e.target.value)} />
      </FormControl>
      <Button type="submit">Submit</Button>
    </form>
  );
}

Особенности:

  • Логирование значений формы помогает выявить невалидные данные до отправки на сервер.
  • Можно интегрировать с Sentry или LogRocket для анализа пользовательских ошибок.

Стратегии логирования в продакшене

  • Фильтрация по уровням: info, warn, error.
  • Анонимизация данных: избегать логирования чувствительной информации.
  • Асинхронная отправка логов: минимизация влияния на производительность UI.
  • Комбинированный подход: локальное логирование + централизованная аналитика для полного контроля над состоянием приложения.
Оглавление