Как создать автоматический отчет об ошибках WordPress с помощью AJAX

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

Почему важна автоматизация отчётов об ошибках в WordPress

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

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

• Мгновенно реагировать на проблемы;
• Иметь детальную информацию о месте и причине ошибки;
• Сократить время на диагностику;
• Повысить стабильность и надежность сайта.

Для WordPress это особенно актуально, так как код и плагины постоянно обновляются, и новые баги могут появляться внезапно.

Создание AJAX обработчика для сбора ошибок

Идея состоит в том, чтобы на клиентской стороне (в браузере) отлавливать ошибки JavaScript и отправлять их на сервер через AJAX запрос. На сервере мы запишем эти данные в лог или отправим на email.

Для обработки AJAX в WordPress нужно зарегистрировать обработчик с помощью хуков wp_ajax_ и wp_ajax_nopriv_. Мы создадим функцию wporg_handle_js_error_report, которая будет принимать данные об ошибке и обрабатывать их.

add_action('wp_ajax_wporg_handle_js_error_report', 'wporg_handle_js_error_report');
add_action('wp_ajax_nopriv_wporg_handle_js_error_report', 'wporg_handle_js_error_report');

function wporg_handle_js_error_report() {
    if ( ! isset($_POST['error']) || empty($_POST['error']) ) {
        wp_send_json_error('Empty error data');
    }

    $error_data = sanitize_text_field(wp_unslash($_POST['error']));

    // Формируем сообщение
    $message = "Ошибка JS на сайте: \n" . $error_data;

    // Отправляем на email администратора
    wp_mail(get_option('admin_email'), 'Отчет об ошибке JavaScript', $message);

    wp_send_json_success('Error report sent');
}

Этот код добавляем в файл functions.php вашей темы или в отдельный плагин.

Объяснение кода AJAX обработчика

Сначала проверяем, что в POST запросе есть параметр error. Затем очищаем данные и формируем письмо. Функция wp_mail отправляет письмо на email администратора сайта. В конце возвращаем JSON ответ об успешной отправке.

Клиентская часть: отлов ошибок и отправка данных

Теперь нужно отслеживать ошибки JavaScript на фронтенде и отправлять их на сервер. Для этого используем обработчик события window.onerror или объект window.addEventListener('error', ...).

window.onerror = function(message, source, lineno, colno, error) {
    var errorData = {
        message: message,
        source: source,
        line: lineno,
        column: colno,
        stack: error ? error.stack : ''
    };

    var xhr = new XMLHttpRequest();
    xhr.open('POST', wporg_ajax_object.ajax_url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    xhr.send('action=wporg_handle_js_error_report&error=' + encodeURIComponent(JSON.stringify(errorData)));
};

Для работы этого скрипта нужно локализовать переменную wporg_ajax_object.ajax_url из PHP:

function wporg_enqueue_scripts() {
    wp_enqueue_script('wporg-error-reporter', get_template_directory_uri() . '/js/error-reporter.js', [], null, true);
    wp_localize_script('wporg-error-reporter', 'wporg_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wporg_enqueue_scripts');

Обработка и расширение функционала отчётов

Отправка простого письма — базовая версия. В дальнейшем можно улучшить систему:

• Добавить запись ошибок в отдельную таблицу базы данных для статистики;
• Интегрировать с сервисами типа Sentry или Slack для мгновенных уведомлений;
• Фильтровать и группировать ошибки по типам;
• Добавить отправку ошибок PHP через set_error_handler и register_shutdown_function;
• Настроить ограничение частоты отправки, чтобы не спамить при массовых ошибках.

Пример сохранения ошибок в базу данных

Создадим таблицу при активации плагина:

function wporg_create_error_log_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wporg_js_error_log';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
      id mediumint(9) NOT NULL AUTO_INCREMENT,
      error_text text NOT NULL,
      error_date datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
      PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'wporg_create_error_log_table');

Теперь изменим обработчик wporg_handle_js_error_report для записи в таблицу:

function wporg_handle_js_error_report() {
    global $wpdb;
    if ( ! isset($_POST['error']) || empty($_POST['error']) ) {
        wp_send_json_error('Empty error data');
    }

    $error_data = sanitize_text_field(wp_unslash($_POST['error']));

    $table_name = $wpdb->prefix . 'wporg_js_error_log';
    $wpdb->insert(
        $table_name,
        [
            'error_text' => $error_data,
            'error_date' => current_time('mysql')
        ]
    );

    wp_send_json_success('Error logged');
}

Использование плагинов для расширения возможностей

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

• Clearfy Pro — содержит инструменты для логгирования и оптимизации, в том числе для сбора ошибок;
• WP Debugging — помогает включить и вести логи ошибок;
• Query Monitor — инструмент для мониторинга запросов и ошибок в реальном времени;
• Simple Error Logging — плагин для записи ошибок PHP в отдельный файл.

Однако собственный AJAX-отчет удобен, если нужны именно клиентские ошибки JS и кастомный процессинг.

Выводы и рекомендации

Создание системы автоматического сбора и отправки отчетов об ошибках с помощью AJAX — практичный и мощный инструмент для повышения качества сайта на WordPress. Такой подход позволит вам получать актуальную информацию о возникающих проблемах и быстрее их исправлять.

Начинайте с простого варианта — отправки email и записи в базу данных, а дальше расширяйте функционал под свои задачи. Не забывайте про безопасность: фильтруйте и проверяйте входящие данные, ограничивайте частоту запросов, чтобы избежать злоупотреблений.

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