Я не фанат футбола. Но вчера вечером я узнал кое-что о футболе, 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› (поскольку приведенные выше изменения кода еще не были реализованы (но они есть сейчас)), я был уверен, что результаты в реальном времени работали сквозно.

В итоге

  1. Текущие результаты для AFL, NRL и футбола (футбол) корректно работают на www.odds.com.au.
  2. Нулевые результаты в футболе - обычное дело (так что нам следовало бы проверить это перед выходом в эфир 😬).
  3. Полезно знать, как JavaScript преобразует небулевские значения в логические, поскольку не все «ложные» значения эквивалентны в каждом контексте (например, null и 0).
  4. Ошибки будут совершаться, когда люди устают. Даже командой SBS. 😉