После долгого перерыва в личных проектах ситуация вокруг вируса вдохновила меня снова надстроить что-то побочное. Я избавлю вас от подробностей, но я решил создать новый вид доски объявлений, который позволил бы разработчикам просматривать открытые вакансии на основе технологий, которые им интересны.
Это простое полнофункциональное приложение JavaScript, использующее React в браузере, Express на сервере и Dynamo для хранения. Как бы я ни хотел попробовать Go или Svelte, я хотел выпустить что-нибудь быстро. Изучение новой технологии на ходу несовместимо с этой целью.
Первые испытания
Поэтому я потратил около 40–50 часов на альфа-версию, в которой были задействованы все основные функции. Визуально это не выглядело привлекательно, но работа была сделана. Я решил использовать Heroku для приложения Express и Vercel для приложения React.
Как только альфа-версия была готова, я ввел несколько команд в терминал и развернул ее, чтобы мир увидел. Я отправил его нескольким своим друзьям, чтобы получить отзывы. Они рассказали мне, что им нравится, а что нет, и обнаружили несколько ошибок. У меня было много работы.
«Наверное, ничего серьезного…»
Одна из обнаруженных ими ошибок была весьма неудачной. Самой важной особенностью приложения была обширная длинная форма с множеством клиентских функций. Он имеет разные поля, редакторы WYSIWYG, загрузку файлов, элементы перетаскивания и многое другое. Оказывается, в Chrome не было всей формы.
Приложение все еще находилось в зачаточном состоянии, поэтому я не обращал на это особого внимания. Вероятно, я случайно сломал что-то маленькое прямо перед развертыванием. Наверное, ничего серьезного. Или я так думал ...
Сюжет сгущается
Через пару недель я внес некоторые улучшения и исправления. Я остановился на названии, выбрал шрифты и цвета и придал приложению немного индивидуальности. Пришло время выпустить следующую версию. Я тестировал локально, и все работало нормально, включая форму.
Я выполнил несколько команд, набрал доменное имя в браузере, и вот оно. Все выглядело отлично. Я снова разослал ссылки и ждал ответов, стуча ногой по полу. В окне чата появились три точки, сигнализирующие о том, что кто-то пишет. Через пару секунд появилось первое сообщение - «Форма снова не работает».
Это не может быть правдой - я проверял это несколько раз. Я проверил консоль, предупреждений не было. Я не хотел, чтобы это было препятствием для теста, поэтому засучил рукава и начал копать. Я открыл форму в производственной среде, написал несколько букв в одном из текстовых полей - и форма не сработала.
Сбоку был небольшой виджет предварительного просмотра, который должен обновляться по мере ввода, но не работал. В консоли ошибок тоже нет. Я запустил приложение локально, и все работало без проблем. Что-то не так с производственной средой.
Но как это могло повлиять на страницу? Я не использовал там никаких переменных среды, ничего специфичного для платформы тоже. Решил проверить поведение в разных браузерах. Я запустил Firefox, зашел в приложение и открыл форму. Это сработало. Все обновилось как положено. Я запустил Safari и проверил там форму. Все снова работает.
Мы знаем кто, но не знаем почему
Мой друг испытал такое же поведение - ошибка была только в Chrome. Я был совершенно озадачен. Я никогда не думал, что Chrome из всех браузеров будет вызывать неожиданные ошибки. Обычно особого внимания требуют другие. По крайней мере, я знаю, в чем проблема - пора копать.
Я закатал рукава и открыл инструменты разработчика. Я не использовал неподдерживаемые API-интерфейсы браузера, так что дело не в этом. Ошибок приложения нет, но на вкладке «Сеть» я вижу, что некоторые запросы помечены как заблокированные без кода состояния для ответа. Хм?
Неудивительно, что эти запросы относятся к пакетам JavaScript, которые делают страницу формы функциональной. Однако другие страницы работают нормально. Их JS загружается успешно. Однако форма для формы помечена как заблокированная без какого-либо сообщения или ответа.
Моя первая мысль заключалась в том, что правило безопасности в Chrome может по какой-то причине блокировать файлы. Я немного почитал файлы cookie, CORS, проверил конфигурацию в Vercel, но не нашел там потенциальных клиентов. Я рылся в сети (и под этим я имел в виду переполнение стека), искал различные фразы и проблемы, которые могли бы дать мне некоторое представление о том, что происходит.
Ни одна ветка или страница документации не содержали для меня ответов.
На грани отчаяния
То, что я считал тривиальной проблемой, связанной с отсутствием проверки в JavaScript, оказалось серьезным препятствием. Я не могу отправить приложение без формы. Если бы это было не так, только в Safari, я бы с этим смирился. Но это Chrome - все его используют.
К этому моменту я уже безуспешно провел субботний полдень. Здесь было бы мудро положить этому конец и вернуться завтра с чистым умом. Но, так как я был так заинтересован, я продолжал нажимать на случайные слова, связанные с проблемой, в строке поиска.
Потом что-то случилось. Как-то я поставил правильное сочетание слов, звездочки выровнял и вверху списка увидел ссылку. У него все еще был синий цвет страницы, которую я еще не открывал. Конечно, речь шла о переполнении стека.
Я уже открыл около 10 таких тем, все с похожими названиями, но надежда умирает последней. Я нажимаю на ссылку, задерживаю дыхание и начинаю рыться в комментариях. Большинство ответов и идей, которые я уже пробовал, не помогли. Но когда я собирался нажать кнопку «Назад», мое внимание привлек один из ответов ниже в списке.
Новая надежда
У него было скудные семь голосов, но попытаться стоило. Все, что он сказал, - это проверить расширения Chrome, поскольку одно из них может мешать сетевому вызову. До этого момента я даже не думал о них. У них есть доступ ко всему, что есть на странице, но за 6 лет веб-разработки у меня не было никаких проблем из-за расширения.
Но на данный момент я не мог этого исключить.
Я еще раз осмотрел злополучную связку. Все они названы идентификатором, за которым следуют хэш и расширение файла - index, create, listing, advert. Заблокированным, нарушающим работу страницы формы, был пакет advert. Я смотрел на имя секунду. Затем я посмотрел на строку расширений рядом с адресной строкой. Я снова посмотрел на имя. Затем вернемся к расширениям. О нет...
Мое внимание привлек маленький красный значок на панели расширения - AdBlocker. Может ли это быть? Я отключил AdBlocker и о чудо - страница полностью работоспособна. Мой друг получил такой же результат. Видимо, из-за того, что файл содержал слово реклама, расширение блокировало его.
У всех, кто тестировал Chrome, возникала проблема с формой. Это потому, что это их браузер по умолчанию и, скорее всего, у них есть надстройка для блокировки рекламы. Как только они перейдут на другой браузер, который они не использовали и не установили никаких расширений, все заработало.
Я не ожидал, что AdBlocker будет настолько беспощадным, но как человек, который не слишком любит рекламу, я должен быть осторожен с тем, какой язык домена я использую в своих приложениях.
Заключение - живи, чтобы рассказать сказку
Итак, вот оно. Результат субботнего дня, проведенного за отладкой неясных проблем. После такого сеанса вы обычно выходите из комнаты с суровым выражением лица. Идти как ветеран со всеми своими знаниями и увиденным. Что ж, я не могу сказать, что узнал что-то новое, но с этого момента я буду очень осторожен с тем, как называть свои файлы.
Присоединяйтесь к моей рассылке новостей
Каждые несколько недель я отправляю информационный бюллетень. Обычно он содержит мои последние статьи, некоторые полезные ресурсы по программированию и цитату о программной инженерии, над которой стоит задуматься. Оставьте свой адрес электронной почты, если вам это интересно. Никакой рекламы и спама. Отпишитесь в любой момент.
Первоначально опубликовано на https://alexkondov.com.
