JavaScript errors — это невидимая проблема. Пользователь открывает сайт, кликает по кнопке, но ничего не происходит. Форма не отправляется, слайдер не крутится, меню не раскрывается. Внешне сайт выглядит рабочим, но интерактив сломан. Иногда ошибки JavaScript не проявляются на десктопе, но ломают мобильную версию. Иногда они видны только в старых браузерах. Для SEO это критично: поисковый робот выполняет JavaScript при рендеринге страницы. Если скрипт падает с ошибкой, робот может не увидеть часть контента, не обнаружить ссылки, не отрендерить динамические элементы. Страница индексируется некорректно, позиции падают. В этой статье разберём, как найти ошибки JavaScript на сайте: через консоль браузера, логи сервера, онлайн-инструменты. И что делать, когда ошибки найдены.
Почему ошибки JavaScript опасны для SEO
Современные сайты всё больше зависят от JavaScript. SPA, React, Vue, Angular — контент генерируется на клиенте. Поисковые роботы Яндекса и Google умеют выполнять JavaScript при рендеринге, но у этого есть ограничения. Первое ограничение: бюджет. Робот выделяет ограниченное время на рендеринг каждой страницы. Если скрипт падает с ошибкой — рендеринг прерывается, контент не индексируется. Второе ограничение: сложность отладки. Робот не сообщает разработчику, что именно сломалось. Нужно самостоятельно искать ошибки. Третье ограничение: скрытые ошибки. Некоторые ошибки JavaScript проявляются только в определённых условиях: на мобильных, в старых браузерах, при медленном интернете. Робот может попасть в эти условия и увидеть сломанную страницу. Четвёртое: контент, подгружаемый через JavaScript, может не попасть в индекс, если скрипт не отработал. Всё это ведёт к проблемам с индексацией, падению позиций и потере трафика. Регулярная проверка на ошибки JavaScript — обязательная часть технического SEO.
Способ 1: Консоль браузера — базовый инструмент
Консоль браузера — это первый инструмент для поиска ошибок JavaScript. Откройте страницу в браузере, нажмите F12, перейдите на вкладку Console. Все ошибки JavaScript выводятся здесь красным цветом. Ошибки делятся на два типа: runtime errors (возникают при выполнении кода) и syntax errors (ошибки в синтаксисе, ломают весь скрипт). Каждая ошибка содержит: тип, описание, файл и строку, где она возникла. Например: «Uncaught TypeError: Cannot read property addEventListener of null at script.js:45». Это означает, что код пытается добавить обработчик события к элементу, которого нет на странице. Чтобы диагностировать проблему, кликните по имени файла в ошибке — браузер откроет исходный код на нужной строке. Проверьте: существует ли элемент, к которому обращается код? Не загружается ли скрипт раньше, чем DOM готов? Не блокирует ли ошибка выполнение остальных скриптов? Просматривайте консоль на каждой ключевой странице сайта: главной, категории, карточке товара, статьях, формах. Ошибки могут отличаться.
Способ 2: Проверка на мобильных устройствах
Ошибки JavaScript часто проявляются только на мобильных устройствах. Причины: другой набор API, другие размеры экрана, touch-события вместо mouse, ограничения производительности. Как проверить: откройте сайт на реальном мобильном устройстве и посмотрите консоль через удалённую отладку. В Chrome на Android: подключите телефон к компьютеру через USB, откройте chrome://inspect, выберите сайт — откроется консоль мобильного браузера. В Safari на iOS: включите «Web Inspector» в настройках Safari, подключите iPhone к Mac, откройте Safari → Разработка → выберите устройство. Альтернатива — эмуляция мобильного в десктопном браузере (F12 → Toggle Device Toolbar). Но эмуляция не всегда воспроизводит реальные условия. Лучше проверять на настоящих устройствах. Обратите внимание: mobile-first индексация Google означает, что ошибки на мобильной версии критичнее, чем на десктопной. Если мобильная версия сломана — страница может не индексироваться корректно.
Способ 3: Логи сервера и сервисы мониторинга
Ошибки JavaScript не всегда видны в консоли. Некоторые возникают только у части пользователей, в определённых браузерах или при определённых условиях. Чтобы поймать их, нужны инструменты логирования. Первый вариант: собственный сбор ошибок через JavaScript. Добавьте в код обработчик window.onerror, который отправляет информацию об ошибке на ваш сервер. Пример: window.addEventListener(error, function(event) { отправка данных на сервер }). Это позволит видеть все ошибки, которые происходят у реальных пользователей. Второй вариант: сервисы мониторинга ошибок. Самый популярный — Sentry (есть бесплатный тариф). Он автоматически собирает ошибки, группирует их, показывает частоту, браузеры, устройства. Аналог: Rollbar, Bugsnag. Эти сервисы работают через JavaScript-скрипт, который подключается к сайту. Третий вариант: логи сервера. Если JavaScript вызывает серверные запросы и они падают с ошибкой 500, это видно в логах сервера. Проверьте error.log nginx или Apache. Подробнее о чтении логов читайте в статье Как читать логи сервера.
Способ 4: Онлайн-инструменты проверки
Онлайн-инструменты позволяют проверить ошибки JavaScript без открытия консоли. Инструмент Проверка устаревших HTML тегов косвенно покажет, если на странице используются устаревшие конструкции, которые могут вызывать ошибки в современных браузерах. Инструмент Проверка defer и async покажет, как загружаются скрипты, и выявит потенциальные проблемы с порядком выполнения. Инструмент Проверка размера DOM покажет, если DOM слишком большой — это может замедлять выполнение скриптов. Для комплексной проверки используйте SEO аудит сайта онлайн — он проверит сайт по техническим параметрам, включая потенциальные проблемы с JavaScript.
Типичные ошибки JavaScript и их причины
Ошибка первая: «Cannot read property X of null». Код обращается к свойству элемента, которого нет. Причина: скрипт выполняется до того, как DOM полностью загружен, или элемент был удалён. Решение: обернуть код в DOMContentLoaded или использовать defer. Ошибка вторая: «X is not defined». Код использует переменную или функцию, которая не определена. Причина: скрипт, определяющий переменную, не загрузился или загрузился позже. Решение: проверить порядок загрузки скриптов, использовать defer для зависимых скриптов. Ошибка третья: «Failed to load resource». Браузер не может загрузить ресурс: скрипт, стиль, изображение. Причина: неверный URL, ресурс удалён, проблема с CORS. Решение: проверить Network в инструментах разработчика, найти проблемный ресурс, исправить URL или восстановить ресурс. Ошибка четвёртая: «Uncaught (in promise)». Ошибка в асинхронном коде, которая не была обработана. Причина: промис отклонён без catch. Решение: добавить catch или try/catch в async-функции. Ошибка пятая: «Maximum call stack size exceeded». Бесконечная рекурсия. Причина: функция вызывает саму себя без условия выхода. Решение: найти и исправить рекурсию.
Как исправить найденные ошибки
Шаг 1: соберите список всех ошибок через консоль браузера на ключевых страницах. Шаг 2: приоритезируйте — какие ошибки блокируют функциональность, какие косметические. Шаг 3: найдите источник каждой ошибки. Кликните по файлу в консоли — браузер откроет код на нужной строке. Шаг 4: исправьте код. Часто ошибка вызвана простыми причинами: опечатка в имени переменной, забытый defer, отсутствующий элемент в DOM. Шаг 5: протестируйте исправление. Обновите страницу, проверьте консоль — ошибка должна исчезнуть. Шаг 6: проверьте, что функциональность работает. Если ошибка была в форме — отправьте форму. Если в слайдере — прокрутите слайдер. Шаг 7: повторно проверьте на мобильных и в разных браузерах. Ошибка, исправленная на десктопе, может остаться на мобильном. Если исправить самостоятельно не получается, обратитесь к разработчику. Ошибки JavaScript — это не та область, где стоит экспериментировать без знаний. Неудачное исправление может сломать сайт сильнее, чем исходная ошибка.
Профилактика: как не допустить ошибок JavaScript
Первое: используйте строгий режим (use strict) — он помогает ловить ошибки на этапе разработки. Второе: тестируйте код в разных браузерах и на разных устройствах до публикации. Третье: подключайте мониторинг ошибок (Sentry или аналог) — он будет ловить ошибки, которые вы не видите. Четвёртое: не используйте устаревшие библиотеки и плагины — они могут содержать ошибки, несовместимые с современными браузерами. Пятое: минифицируйте код с source maps — если ошибка произойдёт, вы сможете найти её в исходном коде. Шестое: регулярно проверяйте консоль браузера и логи мониторинга — не ждите, пока пользователи сообщат о проблеме. Седьмое: перед крупными изменениями делайте бэкап — если что-то сломается, можно откатить. Регулярная проверка ошибок JavaScript — это часть технического SEO. Проблемы с интерактивом косвенно влияют на поведенческие факторы, а через них — на позиции.
Часто задаваемые вопросы
Как проверить сайт на ошибки JavaScript?
Откройте консоль браузера (F12 → Console) на ключевых страницах. Все ошибки выводятся красным. Для массовой проверки используйте сервисы мониторинга: Sentry, Rollbar, Bugsnag. Также проверьте логи сервера на серверные ошибки, вызванные JavaScript.
Влияют ли ошибки JavaScript на SEO?
Да, косвенно. Поисковый робот выполняет JavaScript при рендеринге страницы. Если скрипт падает с ошибкой, робот может не увидеть часть контента или ссылок. Это приводит к неполной индексации и падению позиций.
Почему ошибки JavaScript видны только на мобильных?
Мобильные браузеры имеют другой набор API, другие размеры экрана, touch-события вместо mouse. Некоторые скрипты, работающие на десктопе, падают на мобильных. Mobile-first индексация делает такие ошибки особенно критичными.
Что делать, если ошибка JavaScript мешает индексации?
Исправьте ошибку или добавьте fallback — контент, который будет виден без JavaScript. Например, используйте серверный рендеринг для критического контента. Проверьте результат через Вебмастер или Search Console — рендеринг страницы должен показывать весь контент.
