Как отловить ошибку JavaScript на WEB клиенте

Отлов ошибок JavaScript на WEB-клиенте

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

Основные механизмы отлова ошибок

1. Глобальный обработчик ошибок window.onerror

Это основной способ перехвата необработанных ошибок времени выполнения (runtime errors).

window.onerror = function(message, source, lineno, colno, error) {
    // Логирование в консоль для отладки
    console.error('Global error caught:', { message, source, lineno, colno, error });
    
    // Отправка на сервер для сбора статистики
    sendErrorToServer({
        type: 'unhandled_error',
        message: message,
        url: source,
        line: lineno,
        column: colno,
        stack: error?.stack,
        userAgent: navigator.userAgent,
        timestamp: new Date().toISOString()
    });
    
    // Можно предотвратить вывод ошибки в консоль браузера
    return true;
};

2. Обработка промисов с unhandledrejection

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

window.addEventListener('unhandledrejection', function(event) {
    console.error('Unhandled promise rejection:', event.reason);
    
    sendErrorToServer({
        type: 'unhandled_promise_rejection',
        reason: event.reason?.toString(),
        stack: event.reason?.stack,
        timestamp: new Date().toISOString()
    });
    
    // Предотвращаем вывод в консоль браузера по умолчанию
    event.preventDefault();
});

3. Try-Catch для критических участков кода

Для синхронного кода и async/await используйте блоки try-catch.

async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return await response.json();
    } catch (error) {
        console.error('Failed to fetch user:', error);
        // Логируем и показываем пользователю понятное сообщение
        showUserNotification('Не удалось загрузить данные пользователя');
        // Пробрасываем ошибку для глобального обработчика, если нужно
        throw error;
    }
}

Инструменты и подходы для QA

Мониторинг в реальном времени

• Встроенная консоль браузера (F12) — первый инструмент для исследования ошибок во время тестирования.
• Сетевые запросы (Network tab) — анализ неудачных XHR/Fetch запросов (статусы 4xx, 5xx).
• Инструменты разработчика → Sources/Debugger — постановка точек останова и пошаговое выполнение.

Автоматизированный сбор ошибок

Интеграция сервисов для сбора ошибок с продакшена:

• Sentry, LogRocket, TrackJS — предоставляют полный контекст ошибки: стектрейс, состояние приложения, действия пользователя, данные об окружении.
• Custom endpoint — свой API для приема и агрегации ошибок.

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

function sendErrorToServer(errorData) {
    // Используем navigator.sendBeacon для надежной отправки, даже при закрытии страницы
    if (navigator.sendBeacon) {
        const blob = new Blob([JSON.stringify(errorData)], { type: 'application/json' });
        navigator.sendBeacon('/api/log-error', blob);
    } else {
        // Fallback на fetch
        fetch('/api/log-error', {
            method: 'POST',
            body: JSON.stringify(errorData),
            headers: { 'Content-Type': 'application/json' },
            keepalive: true // Аналог sendBeacon для fetch
        });
    }
}

Стратегии тестирования

• Негативное тестирование — преднамеренное введение невалидных данных, отключение сети, проверка обработки ошибок API.
• Тестирование на разных устройствах и браузерах — ошибки часто проявляются в специфичных окружениях.
• Тестирование производительности — отслеживание ошибок, связанных с памятью (утечки) или таймаутами.
• Валидация пользовательского интерфейса — проверка, что сообщения об ошибках понятны пользователю и не содержат технических деталей.

Рекомендации по внедрению

1. Не подавляйте все ошибки — обрабатывайте ожидаемые (например, валидация ввода), но давайте неожиданным ошибкам всплыть до глобального обработчика для логирования.
2. Собирайте контекст — вместе с ошибкой отправляйте версию приложения, данные пользователя (анонимизированные), историю действий.
3. Настройка фильтрации — избегайте дублирования одинаковых ошибок от многих пользователей, настройте группировку.
4. Интеграция с CI/CD — автоматизируйте прогон линтеров (ESLint) и статических анализаторов кода для выявления потенциальных проблем до деплоя.

Роль QA Engineer в процессе

QA-инженер должен:

• Знать, как включить/отключить логирование в разных средах (development, staging, production).
• Уметь воспроизводить ошибки на основе данных из систем мониторинга.
• Проверять полноту и понятность информации в логах ошибок.
• Участвовать в проектировании обработки ошибок — как система должна вести себя при различных сбоях.
• Тестировать сам механизм отлова ошибок — убедиться, что ошибки действительно попадают в систему мониторинга.

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