Профилирование и мониторинг

Для использования библиотеки Toastify необходимо подключить её CSS и JS файлы в проект. Наиболее часто используется CDN-подключение:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

После подключения можно создавать уведомления с помощью метода Toastify({ ...options }).showToast(). Ключевыми опциями являются:

  • text — текст уведомления.
  • duration — длительность отображения в миллисекундах (по умолчанию 3000).
  • close — добавление кнопки закрытия (true/false).
  • gravity — вертикальное положение ("top" или "bottom").
  • position — горизонтальное положение ("left", "center", "right").
  • backgroundColor — цвет фона.

Пример простого уведомления:

Toastify({
  text: "Успешное действие",
  duration: 4000,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50",
  close: true
}).showToast();

Настройка стилей и кастомизация

Toastify позволяет задавать не только стандартные цвета, но и сложные градиенты или подключать CSS-классы для более детальной стилизации:

Toastify({
  text: "Ошибка при загрузке данных",
  duration: 5000,
  className: "toast-error",
  stopOnFocus: true
}).showToast();

CSS-класс toast-error может быть определён в отдельном файле:

.toast-error {
  background: linear-gradient(to right, #f44336, #e53935);
  color: #fff;
  font-weight: bold;
}

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

События и колбэки

Для мониторинга событий Toastify поддерживает колбэки:

  • onClick — вызывается при клике на уведомление.
  • callback — вызывается после завершения отображения уведомления.

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

Toastify({
  text: "Сессия истекла",
  duration: 5000,
  close: true,
  onClick: function() {
    console.log("Пользователь кликнул по уведомлению");
  },
  callback: function() {
    console.log("Уведомление исчезло");
  }
}).showToast();

Это удобно для логирования взаимодействий пользователей или для профилирования времени отображения уведомлений.

Продвинутые возможности: динамическое управление

Toastify можно интегрировать с системами профилирования и мониторинга для отображения уведомлений о событиях в реальном времени.

Добавление нескольких уведомлений в очередь:

const notifications = [
  { text: "Ошибка загрузки данных", backgroundColor: "#e74c3c" },
  { text: "Данные успешно обновлены", backgroundColor: "#2ecc71" },
  { text: "Предупреждение: лимит ресурсов", backgroundColor: "#f39c12" }
];

notifications.forEach(note => {
  Toastify({
    text: note.text,
    duration: 4000,
    backgroundColor: note.backgroundColor,
    close: true
  }).showToast();
});

Контроль видимости уведомлений: можно создавать ссылки на конкретные Toastify-инстансы и управлять их скрытием вручную:

const toast = Toastify({
  text: "Процесс начат",
  duration: -1, // бесконечное время
  close: true
}).showToast();

// через 5 секунд скрыть уведомление
setTimeout(() => toast.hideToast(), 5000);

Интеграция с профилированием и логированием

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

  • Профилирование времени отклика — уведомление может показывать длительность выполнения операций:
console.time("dataFetch");
fetch("/api/data")
  .then(response => response.json())
  .then(data => {
    console.timeEnd("dataFetch");
    Toastify({
      text: `Данные загружены за ${Math.floor(performance.now())} мс`,
      duration: 3000,
      backgroundColor: "#3498db"
    }).showToast();
  });
  • Логирование ошибок и предупреждений — интеграция с try/catch для отображения пользователю и записи в лог:
try {
  riskyOperation();
} catch (error) {
  Toastify({
    text: `Ошибка: ${error.message}`,
    duration: 5000,
    backgroundColor: "#e74c3c",
    close: true
  }).showToast();
  console.error(error);
}
  • События мониторинга пользовательского поведения — клик по уведомлению может фиксироваться в аналитике:
Toastify({
  text: "Новое уведомление",
  onClick: () => analytics.trackEvent("notification_click")
}).showToast();

Асинхронное отображение уведомлений

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

async function loadData() {
  const toast = Toastify({ text: "Загрузка...", duration: -1 }).showToast();
  const data = await fetchData();
  toast.hideToast();
  Toastify({ text: "Загрузка завершена", duration: 3000 }).showToast();
}

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

Резервирование и повторное использование

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

function showToast(message, type = "info") {
  const colors = {
    info: "#3498db",
    success: "#2ecc71",
    warning: "#f1c40f",
    error: "#e74c3c"
  };
  Toastify({
    text: message,
    duration: 4000,
    backgroundColor: colors[type] || "#3498db",
    close: true
  }).showToast();
}

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

Оглавление