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

Библиотека iziToast предоставляет удобный способ отображения уведомлений в веб-приложениях, включая сообщения об ошибках, предупреждения и успешные действия. Одной из ключевых задач при работе с callback-функциями в JavaScript является корректная обработка ошибок и информирование пользователя о проблеме.

Структура вызова iziToast для ошибок

Типичный вызов iziToast для отображения ошибки выглядит следующим образом:

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка при выполнении операции',
    position: 'topRight',
    timeout: 5000,
    pauseOnHover: true
});

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

  • title — заголовок уведомления.
  • message — основной текст сообщения.
  • position — место на экране, где отображается уведомление (topRight, topLeft, bottomRight, bottomLeft, center).
  • timeout — время отображения уведомления в миллисекундах.
  • pauseOnHover — при наведении мыши таймер скрытия уведомления останавливается.

Обработка ошибок в callback-функциях

Callback-функции часто используются при асинхронных операциях, таких как AJAX-запросы или обработка событий. Для интеграции iziToast необходимо проверять наличие ошибок и реагировать соответствующим уведомлением.

Пример обработки ошибок в AJAX-запросе:

function fetchData(url, callback) {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ошибка: ${response.status}`);
            }
            return response.json();
        })
        .then(data => callback(null, data))
        .catch(error => callback(error, null));
}

fetchData('/api/data', function(err, data) {
    if (err) {
        iziToast.error({
            title: 'Ошибка загрузки',
            message: err.message,
            position: 'topRight'
        });
        return;
    }
    console.log('Данные успешно загружены:', data);
});

В этом примере:

  1. Ошибки HTTP и сетевые ошибки перехватываются в блоке .catch.
  2. Ошибка передается в callback в качестве первого аргумента (err), а данные — вторым аргументом (data), что соответствует традиционной нотации Node.js.
  3. При наличии ошибки вызывается iziToast.error для информирования пользователя.

Гибкая настройка уведомлений при ошибках

IziToast позволяет расширить визуальное оформление и поведение уведомлений для ошибок:

iziToast.error({
    title: 'Ошибка',
    message: 'Не удалось сохранить данные',
    position: 'bottomLeft',
    timeout: 10000,
    close: true,
    overlay: true,
    drag: true,
    onClosing: function(instance, toast, closedBy){
        console.log('Уведомление закрыто пользователем:', closedBy);
    }
});

Особенности параметров:

  • close — добавляет кнопку закрытия уведомления.
  • overlay — затемняет фон вокруг уведомления, делая его более заметным.
  • drag — позволяет перемещать уведомление по экрану.
  • onClosing — коллбек, который срабатывает при закрытии уведомления, полезен для логирования действий пользователя.

Интеграция с callback-паттернами

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

function processSteps(data, callback) {
    stepOne(data, function(err, result1){
        if (err) {
            iziToast.error({ title: 'Step 1', message: err.message });
            return callback(err);
        }
        stepTwo(result1, function(err, result2){
            if (err) {
                iziToast.error({ title: 'Step 2', message: err.message });
                return callback(err);
            }
            callback(null, result2);
        });
    });
}

Здесь каждый этап обработки проверяет наличие ошибки и формирует уведомление в отдельной iziToast с указанием шага, где произошла ошибка. Такой подход повышает прозрачность и упрощает отладку.

Универсальная функция для уведомлений об ошибках

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

function showError(message, title = 'Ошибка') {
    iziToast.error({
        title: title,
        message: message,
        position: 'topRight',
        timeout: 5000,
        pauseOnHover: true
    });
}

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

fetchData('/api/user', function(err, data){
    if (err) {
        showError(err.message, 'Ошибка пользователя');
        return;
    }
    console.log(data);
});

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

Логирование и callback для действий пользователя

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

iziToast.error({
    title: 'Ошибка',
    message: 'Не удалось подключиться к серверу',
    onClosing: function(instance, toast, closedBy){
        if(closedBy === 'timeout'){
            console.log('Уведомление закрылось автоматически');
        } else if(closedBy === 'button'){
            console.log('Пользователь закрыл уведомление вручную');
        }
    }
});

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

Совмещение с промисами и async/await

Хотя iziToast часто используется с callback, он легко интегрируется с современными асинхронными подходами:

async function loadData() {
    try {
        const response = await fetch('/api/data');
        if (!response.ok) throw new Error(`Ошибка: ${response.status}`);
        const data = await response.json();
        console.log(data);
    } catch (err) {
        iziToast.error({ title: 'Ошибка', message: err.message });
    }
}

Использование iziToast в блоке catch позволяет унифицировать вывод ошибок вне зависимости от стиля асинхронного кода — callback, промисы или async/await.

Хотите, я могу написать следующую главу с детальной демонстрацией кастомизации iziToast для разных типов ошибок с примерами кода и визуальными эффектами?

Оглавление