Мониторинг в продакшене

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

Для подключения Toastify используется либо CDN, либо установка через npm:

// Установка через npm
npm install toastify-js

// Подключение через CDN
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

После подключения появляется глобальный объект Toastify, который используется для создания уведомлений.

Создание базового уведомления

Toastify({
  text: "Данные успешно загружены",
  duration: 3000,
  close: true,
  gravity: "top", // top или bottom
  position: "right", // left, center, right
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
}).showToast();

Ключевые параметры:

  • text — текст уведомления.
  • duration — время отображения в миллисекундах. Значение -1 делает уведомление постоянным до закрытия.
  • close — добавляет кнопку закрытия.
  • gravity и position — определяют расположение на экране.
  • backgroundColor — позволяет задавать цвет или градиент.

Кастомизация уведомлений

Toastify поддерживает расширенную кастомизацию через CSS и параметры конфигурации. Можно добавлять классы для стилизации:

Toastify({
  text: "Ошибка сервера",
  className: "error-toast",
  duration: 5000
}).showToast();

И в CSS:

.error-toast {
  background-color: #ff4d4f;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
}

Также можно использовать коллбэки:

Toastify({
  text: "Новая версия доступна",
  duration: 4000,
  onClick: function() {
    window.location.reload();
  }
}).showToast();

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

Для мониторинга ошибок или критических событий в продакшене часто используется комбинация Toastify с логированием. Пример базовой интеграции:

function logError(message, context = {}) {
  console.error("Ошибка:", message, context);
  Toastify({
    text: `Ошибка: ${message}`,
    duration: 7000,
    gravity: "top",
    position: "right",
    backgroundColor: "#ff4d4f",
    close: true
  }).showToast();
}

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

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

function trackEvent(eventName, details) {
  fetch("/analytics", {
    method: "POST",
    body: JSON.stringify({ event: eventName, details }),
    headers: { "Content-Type": "application/json" }
  });
  
  Toastify({
    text: `Событие ${eventName} зафиксировано`,
    duration: 3000,
    gravity: "bottom",
    position: "left",
    backgroundColor: "#3498db"
  }).showToast();
}

Продвинутые техники

  • Группировка уведомлений: можно использовать массивы сообщений и динамически отображать их одно за другим.
  • Анимации и задержки: встроенные анимации toast’ов можно комбинировать с CSS-переходами для плавного появления и исчезновения.
  • Интеграция с глобальным обработчиком ошибок:
window.addEventListener("error", function(event) {
  Toastify({
    text: `Глобальная ошибка: ${event.message}`,
    duration: 10000,
    gravity: "top",
    position: "right",
    backgroundColor: "#e74c3c",
    close: true
  }).showToast();
});
  • Асинхронные события: уведомления можно вызывать после завершения асинхронных операций:
async function fetchData() {
  try {
    const response = await fetch("/api/data");
    const data = await response.json();
    Toastify({
      text: "Данные успешно получены",
      backgroundColor: "#2ecc71"
    }).showToast();
    return data;
  } catch (err) {
    Toastify({
      text: "Не удалось загрузить данные",
      backgroundColor: "#e74c3c",
      duration: 5000,
      close: true
    }).showToast();
  }
}

Логирование и аналитика

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

function notifyAndLog(message, type = "info") {
  let bgColor = "#3498db"; // info
  if (type === "error") bgColor = "#e74c3c";
  if (type === "success") bgColor = "#2ecc71";

  Toastify({
    text: message,
    duration: 4000,
    backgroundColor: bgColor,
    close: true
  }).showToast();

  fetch("/logs", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message, type, timestamp: Date.now() })
  });
}

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

Оптимизация работы Toastify

  • Избегать отображения большого количества уведомлений одновременно. Использовать очереди или стек уведомлений.
  • Настраивать duration в зависимости от важности события.
  • Использовать кастомные классы для единообразия дизайна и легкости поддержки.
  • В продакшене рекомендуется отключать избыточные уведомления, оставляя только критические или значимые события.

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

Оглавление