Проверяет понимание обработки ошибок в обработчиках событий и того, как исключение в одном слушателе влияет на остальные слушатели и на поведение браузера.
Когда пользователь кликает по элементу, браузер вызывает зарегистрированные обработчики события. Если внутри одного из них выбрасывается исключение, оно не передаётся в код, который вызвал dispatchEvent или инициировал клик, потому что вызов происходит асинхронно из цикла событий. Вместо этого браузер перехватывает ошибку и сообщает о ней через window.onerror или событие error, а также выводит её в консоль разработчика.
Спецификация DOM гарантирует, что исключение в одном слушателе не мешает вызову других слушателей того же события. Браузер просто логирует ошибку и продолжает обход списка. Это важно для аналитики: если ваш трекер упадёт, основной обработчик клика (например, отправка формы) всё равно сработает.
const btn = document.querySelector('#buy');
btn.addEventListener('click', () => {
// аналитика падает
throw new Error('analytics failed');
});
btn.addEventListener('click', () => {
// этот обработчик всё равно выполнится
console.log('purchase logic runs');
});
Чтобы падение трекера не влияло даже на код внутри того же обработчика, оборачивайте вызов аналитики в try/catch или используйте отдельный слушатель. Также полезно применять window.addEventListener('error', ...) для централизованного логирования.
btn.addEventListener('click', () => {
try {
trackEvent('click', { id: 'buy' });
} catch (e) {
console.warn('analytics error', e);
}
// основной код продолжит работу
submitOrder();
});
Итог: исключение в обработчике аналитики не сломает страницу и не остановит другие слушатели, но прервёт текущий обработчик. Изолируйте аналитику через try/catch, чтобы гарантировать выполнение бизнес-логики.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию