Обработка ошибок в callback

При работе с асинхронными операциями в JavaScript часто используются callback-функции для обработки результатов. Ошибки в этих функциях могут возникать на разных уровнях: внутри асинхронного кода, при сетевых запросах или при обработке данных. Правильная обработка ошибок критически важна для поддержания стабильности приложения и информирования пользователя о проблемах. Библиотека Toastify позволяет визуально уведомлять пользователя об ошибках через всплывающие уведомления (toasts).

Подключение и базовая конфигурация Toastify

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

npm install toastify-js

или подключена напрямую через CDN:

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

Toastify({
  text: "Пример уведомления",
  duration: 3000, // продолжительность в миллисекундах
  gravity: "top", // позиция сверху или снизу
  position: "right", // позиция справа или слева
  backgroundColor: "linear-gradient(to right, #ff5f6d, #ffc371)"
}).showToast();

Обработка ошибок внутри callback

При работе с callback важно различать ошибки синхронного и асинхронного характера. На практике это выглядит так:

function fetchData(callback) {
    setTimeout(() => {
        const success = Math.random() > 0.5; // имитация ошибки
        if (success) {
            callback(null, { data: "Данные успешно получены" });
        } else {
            callback(new Error("Не удалось загрузить данные"), null);
        }
    }, 1000);
}

Здесь первый аргумент callback зарезервирован для ошибок (err), второй — для успешного результата (result). Такой подход позволяет стандартизировать обработку ошибок.

Визуальное отображение ошибок через Toastify

Если callback возвращает ошибку, её можно мгновенно показать пользователю через toast:

fetchData((err, result) => {
    if (err) {
        Toastify({
            text: `Ошибка: ${err.message}`,
            duration: 5000,
            gravity: "top",
            position: "right",
            backgroundColor: "linear-gradient(to right, #ff5f6d, #ff0000)"
        }).showToast();
        return;
    }

    Toastify({
        text: `Успех: ${result.data}`,
        duration: 3000,
        gravity: "top",
        position: "right",
        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
    }).showToast();
});

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

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

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

  • Цвет фона: использование градиентов или однотонных цветов для обозначения типа уведомления.
  • Позиция: top или bottom, right или left — для удобного отображения без перекрытия важного контента.
  • Длительность: критические ошибки можно показывать дольше, чтобы пользователь точно увидел уведомление.
  • Закрепление уведомления: параметр stopOnFocus: true позволяет уведомлению не исчезать при наведении мыши.

Пример настройки критической ошибки:

Toastify({
    text: "Серьёзная ошибка соединения",
    duration: 8000,
    gravity: "top",
    position: "center",
    backgroundColor: "#d9534f",
    stopOnFocus: true
}).showToast();

Комплексная обработка ошибок в нескольких callback

В больших приложениях часто возникают цепочки асинхронных операций с разными callback. Для централизованной обработки ошибок можно создать обёртку для callback, которая автоматически вызывает toast при ошибке:

function handleErrorCallback(callback) {
    return function(err, data) {
        if (err) {
            Toastify({
                text: `Ошибка: ${err.message}`,
                duration: 5000,
                gravity: "top",
                position: "right",
                backgroundColor: "#ff6b6b"
            }).showToast();
        } else {
            callback(data);
        }
    };
}

// Использование
fetchData(handleErrorCallback((data) => {
    console.log("Данные обработаны:", data);
}));

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

Логирование ошибок параллельно с уведомлением

Иногда важно не только показать ошибку пользователю, но и сохранить её в логе для анализа:

function logAndNotify(err) {
    console.error(err);
    Toastify({
        text: `Ошибка: ${err.message}`,
        duration: 5000,
        gravity: "top",
        position: "right",
        backgroundColor: "#ff4d4d"
    }).showToast();
}

fetchData((err, data) => {
    if (err) return logAndNotify(err);
    console.log("Данные:", data);
});

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

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

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

document.addEventListener("app:error", (e) => {
    Toastify({
        text: `Ошибка: ${e.detail.message}`,
        duration: 5000,
        gravity: "top",
        position: "right",
        backgroundColor: "#e74c3c"
    }).showToast();
});

// В callback
fetchData((err, data) => {
    if (err) {
        const event = new CustomEvent("app:error", { detail: { message: err.message } });
        document.dispatchEvent(event);
        return;
    }
    console.log("Данные:", data);
});

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

Оглавление