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

Zepto.js предоставляет компактный и удобный набор инструментов для работы с DOM, событиями, анимацией и AJAX, при этом обработка ошибок является важной частью построения устойчивого кода. В контексте Zepto обработка ошибок включает несколько ключевых аспектов: ошибки в коллбэках, работу с AJAX-запросами, событиями и цепочками вызовов.

1. Ошибки в коллбэках событий

Zepto использует модель подписки на события через методы .on(), .off() и .trigger(). Если в коллбэке возникает ошибка, она может прервать выполнение последующих обработчиков того же события.

Пример безопасного коллбэка:

$('#button').on('click', function(event) {
    try {
        performAction(event);
    } catch (error) {
        console.error('Ошибка в обработчике события:', error);
    }
});

Особенности:

  • Использование try…catch внутри коллбэков предотвращает “падение” всего приложения.
  • Zepto не имеет встроенной глобальной системы обработки ошибок для событий, поэтому локальная обработка критична.
  • При работе с цепочками событий следует внимательно структурировать код, чтобы ошибки одного обработчика не блокировали другие.

2. Обработка ошибок AJAX

Zepto предоставляет метод .ajax() и его сокращённые аналоги .get(), .post(), .getJSON(). Основные точки обработки ошибок:

  • error — коллбэк, вызываемый при сетевой ошибке или коде ответа HTTP, который не попадает в диапазон 200–299.
  • complete — вызывается всегда после завершения запроса, независимо от результата.

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

$.ajax({
    url: '/api/data',
    method: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log('Данные получены:', response);
    },
    error: function(xhr, status, error) {
        console.error('Ошибка AJAX:', status, error);
    },
    complete: function() {
        console.log('AJAX-запрос завершён');
    }
});

Ключевые моменты:

  • status содержит строковое значение состояния ("timeout", "error", "abort", "parsererror").
  • xhr предоставляет объект XMLHttpRequest, что позволяет проверять статус-код и текст ответа.
  • Для удобства обработки ошибок можно создавать обёртки вокруг AJAX, которые централизованно логируют ошибки.

3. Глобальная обработка ошибок AJAX

Zepto не имеет полноценного аналога $.ajaxSetup из jQuery, но можно расширить функциональность через перехват вызовов:

(function($) {
    var originalAjax = $.ajax;
    $.ajax = function(options) {
        var defaultError = function(xhr, status, error) {
            console.error('Глобальная ошибка AJAX:', status, error);
        };
        options.error = options.error || defaultError;
        return originalAjax.call($, options);
    };
})(Zepto);

Особенности:

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

4. Ошибки в цепочках вызовов

Zepto активно использует цепочки вызовов:

$('#element')
    .addClass('active')
    .fadeIn(200)
    .on('click', function() {
        // ...
    });

Если внутри одного из методов цепочки возникает исключение, оставшаяся часть цепочки не выполняется. Рекомендации:

  • Разделять сложные цепочки на логические блоки.
  • В коллбэках анимаций или событий использовать try…catch.
  • Для анимаций можно обрабатывать ошибки через коллбэк завершения (complete):
$('#box').fadeIn(300, function() {
    try {
        riskyOperation();
    } catch (e) {
        console.error('Ошибка в анимации:', e);
    }
});

5. Обработка ошибок при работе с DOM

Методы Zepto, изменяющие DOM (html(), append(), remove(), css()), редко выбрасывают исключения при стандартном использовании, но ошибки возможны при:

  • Передаче некорректных селекторов.
  • Работе с удалёнными или несуществующими элементами.
  • Неправильных типах аргументов (html(123) вместо строки).

Пример безопасной работы с DOM:

try {
    $('#container').html('<p>Контент</p>');
} catch (e) {
    console.error('Ошибка при изменении DOM:', e);
}

Особенности:

  • Часто undefined или пустой выбор не вызывает ошибки, но может привести к логическим багам.
  • Для сложных операций с DOM стоит проверять наличие элементов через length:
var $elem = $('#container');
if ($elem.length) {
    $elem.html('Новый контент');
} else {
    console.warn('Элемент не найден');
}

6. Принципы безопасного кода с Zepto

  1. Изолировать потенциально опасные участки кода с использованием try…catch.
  2. Централизовать обработку AJAX ошибок, чтобы не дублировать код.
  3. Проверять наличие элементов перед манипуляцией с DOM.
  4. Разделять цепочки вызовов на логические блоки с локальной обработкой ошибок.
  5. Логировать ошибки с достаточной информацией (статус, элемент, стек вызовов).

Эти подходы позволяют строить надёжные приложения на Zepto, минимизируя неожиданные сбои и обеспечивая контроль над поведением кода в нестандартных ситуациях.

Оглавление