JS-ошибки на сайте: как найти и исправить то, что ломает пользователям браузер

Утро понедельника, которое начинается с молчания

Открываешь Яндекс.Метрику, смотришь на воронку — а там провал. Вчера на странице оформления заказа было 120 попыток, сегодня — 12. Конверсия упала в ноль. Пользователи заходят, но не кликают. Ни в поддержку не пишут, ни на почту не жалуются. Просто закрывают вкладку и уходят к конкуренту.

Ты лезешь в консоль браузера — пусто. Перезагружаешь страницу — работает. Чистишь кэш — тоже. Но проблема остаётся у тех, кто пришёл с конкретной версией Chrome на Windows 10. Или у кого-то с AdBlock. Или с медленным интернетом, из-за которого скрипт не загрузился.

Такие сценарии — классика. И именно для них в KinMetric есть встроенный мониторинг JS-ошибок. Без отдельной настройки Sentry, без лишнего кода. Просто подключаешь трекер — и видишь, что именно падает в браузерах твоих посетителей.

Что ловим и как это работает

KinMetric перехватывает два глобальных события браузера: window.onerror и unhandledrejection. Первое — это когда скрипт упал с исключением. Второе — когда промис завершился с ошибкой, но ты не написал для неё .catch().

Из каждого такого события мы вытаскиваем четыре параметра:

текст сообщения об ошибке (что именно пошло не так);

имя файла и номер строки (где именно в коде);

стек вызова (какой цепочкой функций дошло до падения);

метаданные браузера (версия, ОС, разрешение экрана).

Всё это собирается без какого-либо влияния на скорость загрузки страницы — код асинхронный и весит меньше килобайта.

Дедупликация: чтобы ошибка не превратилась в DDoS

Представь, что у тебя на странице есть баг из-за которого скрипт входит в бесконечный цикл падений. Обычный мониторинг за несколько секунд засрёт базу данных сотнями тысяч одинаковых записей. Ты получишь не отчёт, а мусор, а ещё можешь случайно положить сервер своей же аналитики.

KinMetric решает это просто: в рамках одной сессии каждая уникальная ошибка считается только один раз. Если у пользователя крашнулся скрипт на странице корзины — мы запишем это один раз. Даже если он продержал вкладку открытой час, и ошибка повторялась каждые две секунды. В дашборде ты увидишь одну запись с одним счётчиком. Никакого само-DDoS.

Дашборд: топ-15 проблем, которые решают всё

В интерфейсе KinMetric ты видишь таблицу из 15 самых частых JS-ошибок за выбранный период. Каждая строка содержит:

текст сообщения об ошибке (например, "Cannot read property 'price' of undefined");

файл и строку (например, /static/js/main.abc123.js:42);

количество срабатываний (сколько раз эта ошибка случилась у разных пользователей);

количество уникальных пользователей, которых она задела;

образец браузера, в котором произошла ошибка (например, Chrome 120 / Windows 11).

Этого достаточно, чтобы за пять минут принять решение: фиксить прямо сейчас или отложить до следующего спринта. Если ошибка бьёт по 40% пользователей на странице оплаты — это красный флаг. Если она случается раз в неделю у кого-то на устаревшем Firefox — можно не дёргаться.

Реальный кейс: потеря 15% конверсии из-за одной строки

Приведу пример из практики. У интернет-магазина на React упала конверсия на странице товара. Визуально всё работало, но кнопка «В корзину» перестала реагировать на клик. Разработчики два дня искали баг в коде корзины — безрезультатно.

Подключили KinMetric. Через час в дашборде появилась ошибка: TypeError: Cannot read properties of null (reading 'addEventListener') в файле /assets/js/product.bundle.js:156. Оказалось, что скрипт пытался повесить обработчик на элемент, который не успел загрузиться из-за медленного API. Проблема проявлялась только у пользователей с задержкой сети более 300 мс — примерно 15% аудитории.

Одна правка — и конверсия вернулась. Без KinMetric могли бы искать неделями.

Пошаговая инструкция: как начать ловить ошибки за 10 минут

Зарегистрируйтесь на kinmetric.cc (бесплатный тариф подходит для небольших проектов).

Добавьте свой сайт в панели управления — получите трекер-код.

Вставьте код в вашего сайта (перед закрывающим тегом ).

Перейдите на вкладку «JS Errors» в дашборде.

Подождите 15-30 минут, пока соберётся первая статистика.

Отфильтруйте по страницам (например, «/checkout» или «/cart»).

Отсортируйте по количеству затронутых пользователей — увидите самые критичные баги.

Кликните на любую ошибку, чтобы увидеть полный стек и браузер жертвы.

Скопируйте данные и отправьте разработчикам — они скажут спасибо за готовый stack trace.

После исправления проверьте, что ошибка исчезла из топа в течение суток.

Что ты выигрываешь, используя встроенный мониторинг

Главное преимущество — скорость реакции. Когда ошибка только появилась, ты узнаёшь о ней в течение нескольких минут, а не через неделю по жалобам пользователей. Это превращает «почему упала конверсия?» в «ага, вот же баг, фиксим».

Второй момент — точность. Ты видишь не просто «что-то сломалось», а конкретный файл, строку и стек. Разработчику не нужно воспроизводить баг на своей машине — у него уже есть готовый сценарий. Это экономит часы, а иногда и дни.

Третье — приоритизация. Топ-15 ошибок показывает, что бьёт по наибольшему числу пользователей. Ты не будешь фиксить редкий баг в Internet Explorer, когда 30% аудитории не могут оформить заказ в Chrome. KinMetric помогает фокусироваться на том, что реально влияет на бизнес.

И наконец — никакой лишней инфраструктуры. Не нужно поднимать отдельный Sentry, платить за хостинг или настраивать алерты. Всё уже встроено в аналитику KinMetric. Одна интеграция — и ты видишь и поведение пользователей, и технические ошибки в одном окне.

Когда это особенно нужно

Мониторинг JS-ошибок — не роскошь, а необходимость, если у тебя:

интернет-магазин с формой заказа (каждый баг = потерянные деньги);

сайт на React, Vue или Angular (SPA-приложения особенно чувствительны к ошибкам в маршрутизации);

лендинг с A/B-тестами (кривой скрипт эксперимента может сломать всю страницу);

сайт с кастомными скриптами аналитики или ретаргетинга (они часто конфликтуют друг с другом);

любой проект, где ты хочешь спать спокойно, а не дёргаться каждый раз, когда конверсия падает на 5%.

KinMetric делает мониторинг доступным для всех — от фрилансеров до команд из трёх разработчиков. Это как Sentry, только не требует настройки и стоит копейки (а на старте — вообще бесплатно).

Хочешь попробовать? Зарегистрируйся бесплатно и подключи мониторинг за пять минут. А если хочешь изучить детали — почитай про функцию в каталоге. И да: если у тебя уже есть аккаунт, просто зайди в раздел «JS Errors» — скорее всего, ты уже собираешь данные, просто не знал об этом.