Обработка ошибок пользователей

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

Инициализация и базовое использование

Для начала работы с Toastify необходимо подключить библиотеку через CDN или npm. Пример подключения через npm:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

Создание простого уведомления выполняется следующим образом:

Toastify({
  text: "Произошла ошибка при отправке формы",
  duration: 3000,
  gravity: "top", // "top" или "bottom"
  position: "right", // "left", "center", "right"
  backgroundColor: "#FF5F5F",
  close: true
}).showToast();

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

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

Стратегии обработки ошибок

1. Проверка формы

Ошибки в формах — наиболее частый источник уведомлений. Валидация может быть выполнена как на клиентской стороне, так и на сервере. Пример использования Toastify при клиентской валидации:

const emailInput = document.querySelector("#email");
const submitBtn = document.querySelector("#submit-btn");

submitBtn.addEventListener("click", (e) => {
  e.preventDefault();
  if (!emailInput.value.includes("@")) {
    Toastify({
      text: "Введите корректный email",
      duration: 4000,
      backgroundColor: "#FF6B6B",
      close: true
    }).showToast();
  }
});

2. Обработка сетевых ошибок

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

fetch("/api/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("Сервер вернул ошибку " + response.status);
    }
    return response.json();
  })
  .catch(error => {
    Toastify({
      text: `Ошибка загрузки данных: ${error.message}`,
      duration: 5000,
      backgroundColor: "#FF4C4C",
      close: true
    }).showToast();
  });

Настройка внешнего вида уведомлений

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

  • backgroundColor — простой цвет фона;
  • className — кастомный CSS-класс для сложной стилизации;
  • style — объект с CSS-свойствами прямо в настройках уведомления;
  • stopOnFocus — флаг, при котором уведомление не исчезает при наведении мыши.

Пример кастомного стиля:

Toastify({
  text: "Некорректный пароль",
  duration: 4000,
  close: true,
  style: {
    background: "linear-gradient(to right, #ff6b6b, #f06595)",
    color: "#fff",
    fontWeight: "bold"
  }
}).showToast();

Работа с несколькими уведомлениями

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

Toastify({
  text: "Ошибка 1",
  duration: 3000,
  gravity: "top",
  position: "right",
  offset: { x: 50, y: 50 }
}).showToast();

Toastify({
  text: "Ошибка 2",
  duration: 3000,
  gravity: "top",
  position: "right",
  offset: { x: 50, y: 120 }
}).showToast();

Взаимодействие с пользователем

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

Toastify({
  text: "Ошибка загрузки файла. Нажмите для повторной попытки",
  duration: 5000,
  backgroundColor: "#FF4C4C",
  close: true,
  onClick: () => {
    retryUpload();
  }
}).showToast();

Советы по эффективной обработке ошибок

  1. Разделять ошибки формы, сетевые ошибки и системные ошибки разными цветами уведомлений для быстрого визуального распознавания.
  2. Использовать короткие, понятные тексты, избегая технических деталей, которые могут запутать пользователя.
  3. При необходимости давать инструкции по исправлению ошибки, а не просто сообщать о её наличии.
  4. Не перегружать интерфейс уведомлениями — длительность и количество тостов должны быть умеренными.
  5. Для критичных ошибок использовать дополнительные визуальные индикаторы вместе с Toastify, например, выделение полей формы красным.

Интеграция с асинхронными функциями

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

async function submitForm(data) {
  try {
    const response = await fetch("/api/submit", { method: "POST", body: JSON.stringify(data) });
    if (!response.ok) {
      throw new Error("Ошибка сервера: " + response.statusText);
    }
    Toastify({
      text: "Форма успешно отправлена",
      duration: 3000,
      backgroundColor: "#4CAF50",
      close: true
    }).showToast();
  } catch (error) {
    Toastify({
      text: `Не удалось отправить форму: ${error.message}`,
      duration: 5000,
      backgroundColor: "#FF4C4C",
      close: true
    }).showToast();
  }
}

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

Помимо визуального уведомления, полезно логировать ошибки в консоль или отправлять на сервер для анализа:

.catch(error => {
  console.error(error);
  Toastify({
    text: "Произошла ошибка, подробности в консоли",
    duration: 4000,
    backgroundColor: "#FF6B6B",
    close: true
  }).showToast();
});

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

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

Оглавление