Любопытный случай [ошибка nuxt] Ошибка ссылки: geoip2 не определен

Давайте устроим сцену ...

Руководитель отдела маркетинга обнаружил ошибку. Никто в нашем офисе не может воспроизвести ошибку. ЧТО ЗДЕСЬ ПРОИСХОДИТ!?

Все, что мы знаем, это то, что страница загружается некорректно, картинки ломаются почти везде - это абсолютный хаос. Также это происходит спорадически на небольшом количестве совершенно разных устройств и браузеров.

Мы используем CloudFront в качестве нашей CDN. Мы подумали, поскольку изображения не загружаются, это может означать, что изображения были неправильно кэшированы на краю? Как я сказал в предыдущем посте - 9 из 10 раз CloudFront НЕ является проблемой.

В этом случае вновь обретенная мудрость сослужила нам хорошую службу. Мы написали в AWS по электронной почте, надеясь, что они проливают свет на нашу проблему. Все, что у нас закончилось, - это потраченное впустую время в погоне за призраками, и мы не приблизились к выяснению, ЧТО ПРОИСХОДИТ !? Короче говоря, проблема не в CloudFront.

Следующая важная информация:

Nuxt используется для рендеринга нашего приложения на стороне сервера (SSR).
Vue - это наш интерфейсный фреймворк. (Nuxt должен был выдать это: P)
Мы не приблизились к обнаружению проблемы

НО Вселенная добрая. Наш главный операционный директор случайно наткнулся на ту же проблему - с помощью Brave browse r (да, я никогда о нем не слышал), браузера, ориентированного на конфиденциальность (действительно стоит проверить), который блокирует скрипты и отслеживание, чтобы вы могли оставаться анонимными. во время просмотра.

Он сообщил нам о том, что один из наших скриптов был заблокирован. Что также привело к следующей ошибке:

[nuxt] Ошибка при подключении приложения: ReferenceError: geoip2 не определен

Аллилуйя, наконец то, что нужно сделать.

Быстрый поиск по базе кода приводит к следующим двум местам geoip2:

Как сценарий в заголовке нашего nuxt.config.js

script: 
{
  src: 'https://js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js',
  async: 'async'
}

2. В нашей папке plugins для Nuxt у нас был плагин под названием usergeoip.js.

const userGeoIP = ({ app: { store } }) => 
let userCurrencyCookie = getCookie('userCurrency')
let localeCookie = getCookie('locale')
if (userCurrencyCookie === null || localeCookie === null) 
{
  geoip2.country(geoipOnSuccess, geoipOnError)
} 
else ...

Вышеупомянутое - лишь часть функции, остальное не имеет значения. Точка 2 - это источник ошибки привязки geoip2.

Чтобы сократить длинную историю отладки, мы обнаружили, что geoip2 не определен в usergeoip.js, когда скрипт (показанный выше в 1) заблокирован. Это имеет смысл, поскольку ошибка ссылки указывает на то, что переменная не была объявлена.

Еще одна важная вещь, о которой следует упомянуть, это то, что другие плагины Nuxt не загружаются, если плагин Nuxt не работает (если у вас нет запасных вариантов).

Мы поняли, что geoip2, выдающий ошибку при монтировании, имел каскадный эффект на остальные плагины - они не запускались. Одним из них была отложенная загрузка, которая объясняла, почему изображения были «битыми».

Хорошо, отлично, поэтому решение должно быть таким же простым, как добавление условия, чтобы проверить, не определено ли geoip2, верно? Примерно так:

if (geoip2 && (userCurrencyCookie === null || localeCookie === null))

Как и все, что я осознал в программировании - ЭТО НИКОГДА НЕ ТАК ЛЕГКО (ну, точнее, не часто). Ошибка сохранялась.

Если коротко, то ответ заключается в том, что

if (geoip2)

все равно будет выдавать ошибку ссылки, если geoip2 - необъявленная переменная. Единственный способ добавить работающее условие:

if (typeof geoip2 === 'undefined')

Вам необходимо использовать typeof, так как он не выдает эталонную ошибку, даже если geoip2 даже не был объявлен как переменная - СЛУЧАЙ РЕШЕН!

УРОКИ ВЫУЧЕНЫ:

Скорее всего, это не CloudFront
Если у вас возникают спорадические проблемы на разных устройствах и в разных браузерах, стоит проверить загружаемые или не загружаемые сценарии.
Ознакомьтесь с браузером Brave, чтобы узнать, как это легко сделать.
Обычная условная проверка, существует ли переменная, не работает с ошибками ссылок, вам нужно использовать typeof
Плагины Nuxt становятся узкими местами при монтировании, если плагин не загружается должным образом, помните об этом. Убедитесь, что у вас есть пробные ловушки или что-то еще, чтобы справиться с этим.
Вот еще одна интересная мелочь:

Любопытный случай [ошибка nuxt] Ошибка ссылки: geoip2 не определен