Я не фанат футбола. Но вчера вечером я узнал кое-что о футболе, JavaScript и о том, как совершаются ошибки, когда люди устают.
Краткая предыстория…
Odds.com.au - это веб-сайт, который помогает людям находить лучшие коэффициенты для ставок на различные спортивные события. Сайт использует инфраструктуру AWS для получения данных о результатах и хранения их в базе данных. Он также отправляет события через Pusher на веб-страницы, которые уже загружены в браузере, что позволяет нам обновлять счет без обновления страницы (или опроса API).
Проблема с распределенными архитектурами заключается в том, что их сложно тестировать от начала до конца. Я протестировал все отдельные компоненты и проверил, что выходные данные «компонента A» будут успешно обрабатываться «компонентом B» (и так далее), но никогда не видел, чтобы все это работало «в дикой природе» .
Сегодня была ночь.
10pm
Перед сном подумал, что лучше проверить, во сколько начинается первый матч ЧМ-2018 в Мельбурне, Австралия (где я живу). Быстрый Google привел меня на сайт SBS, где подтвердили, что матч начался в 1:00. Я поставил будильник и пошел спать.
1:15am
Звонит будильник. В замешательстве беру телефон и выключаю будильник. FaceID ™ ️ не очень хорош, когда вы прищуриваетесь в телефоне из-за яркости экрана. Открыв браузер телефона, я вижу следующее:
«Похоже, сайт не работает», - подумал я. Но я был сбит с толку. Мне показалось странным, что на экране показывался «Газинский», но при счете 0–0. Несколько мгновений спустя мне также пришло в голову, что веб-страница выглядела иначе, чем я ее запомнил. «Может, дело в мобильной версии». Я встал с постели, чтобы проверить свой ноутбук….
1:20am
Когда ноутбук был открыт, я был приятно удивлен, увидев это:
Россия забила, и счет показывал! Потом меня осенило - я просматривал веб-сайт SBS на своем телефоне! Итак, их веб-сайт был сломан, а не наш. Облегчение ... но почему Саудовская Аравия не набрала очков?
1:25am
После некоторого расследования я заметил этот код JavaScript в веб-компоненте, который отвечал за рендеринг оценок:
Хммм… журналы AWS показали, что мы отправляли оценки правильно для обеих команд (1 и 0 соответственно на тот момент). Сможете определить проблему?
Нулевой час
В JavaScript есть «особенность», позволяющая преобразовывать значения в логические значения. Такие значения, как "foo", 1, 200, {}, []
, рассматриваются JavaScript true
, но «пустые» значения - "", undefined, null, 0
считаются false
.
Таким образом, причина, по которой оценка Саудовской Аравии не отображается, заключалась в том, что это выражение score && viewportWidth >= 760
оценивается как false
, потому что score
было 0
. Следовательно, значение шаблона {{score}}
никогда не отображалось.
Решением этой проблемы является явная проверка значения без оценки, которое в нашем случае равно null
:
Вы можете увидеть результат изменений здесь или ниже:
Обратно в постель
Подождав еще несколько минут, чтобы увидеть изменение счета с 1- ‹blank› на 2- ‹blank› (поскольку приведенные выше изменения кода еще не были реализованы (но они есть сейчас)), я был уверен, что результаты в реальном времени работали сквозно.
В итоге
- Текущие результаты для AFL, NRL и футбола (футбол) корректно работают на www.odds.com.au.
- Нулевые результаты в футболе - обычное дело (так что нам следовало бы проверить это перед выходом в эфир 😬).
- Полезно знать, как JavaScript преобразует небулевские значения в логические, поскольку не все «ложные» значения эквивалентны в каждом контексте (например,
null
и0
). - Ошибки будут совершаться, когда люди устают. Даже командой SBS. 😉