Недавно столкнулся с интересным багом.

У нас часть интерфейса уже на Angular, а часть живёт на старом фреймворке и jQuery. Когда-то в Angular-компонент был обернут старый модуль многофункционального списка. Подписались на событие выбора элемента. Работало.

Пока пользователь не сообщил, что элементы списка перестали выбираться. Просто «иногда не выбираются». Мы два дня тыкались в интерфейс чтобы повторить ошибку, пока один из разработчиков не заметил закономерность: если перед этим выделить текст в поле поиска, всё ломается. Оказалось, в обработчик вместо ожидаемого объекта с данными прилетает нативное DOM-событие select от <input>. Браузер генерирует его при выделении текста, имя совпадает с нашим кастомным событием выбора, Angular честно передаёт его в подписанный метод. А дальше код пытается прочитать свойства несуществующего объекта и падает с «Cannot read properties of undefined».

Причина: старый код делегирует события через jQuery, Angular слушает их через свой механизм. Всплывающее событие от поля поиска проходит мимо всех stopPropagation и добирается до нашего обработчика.

Выбрал такой вариант решения. Там, где принимаем событие от списка, добавляем на вход проверку:   if (result instanceof Event) {   return; // игнорируем нативные DOM-события }

Минимум вмешательства. Проверяем только соответствие ожидаемому объекту.

Сталкивались с подобным при миграции легаси? Как решали? #технологии #JavaScript #Angular #jQuery #frontend