5 javascript ошибок, которые появляются без предупреждений

5 javascript ошибок, которые появляются без предупреждений

Недавно я познакомился с TrackJS, служба мониторинга JavaScript вашего сайта и она меня очень впечатлила. Вы сразу видите всю информацию о возникшей ошибке, включая проблемный файл скрипта, URL, браузер и т.д. Я предлагаю ознакомиться со статьей от автора TrackJS.

Web - самая неблагоприятная среда для разработки ПО, которую только можно придумать. - Дуглас Крокфорд

Итак, мы работаем с веб-приложениями в неблагоприятной среде. С каждым просмотром страницы наш JavaScript передается по непредсказуемой сети в неконтролируемый нами браузер пользователя. Звучит устрашающе, но давайте разобьём все ошибки на 5 групп, которые оказывают влияние на современные JavaScript приложения, которые разработчик зачастую не замечает вовсе.

1. Неудачная загрузка ресурсов

Большинство приложений загружает несколько JavaScript ресурсов: фреймворк из CDN, некоторые сторонние библиотеки и несколько своих скриптов. Что произойдет если что-то из вышеперечисленного не загрузится?

Вопрос этот не гипотетический. Статистика TrackJS показывает, что 1 из 500 загруженных страниц сталкивается с этой проблемой. И причин тому множество: плохое соединение, ошибки сервера, изменения провайдера и DDoS атаки. Конечно, проще когда не загрузился ни один скрипт, в таком случае будет просто показана страница с UI без JavaScript. Но ситуация усложняется, когда не загружается только один скрипт.

Например, проблема с загрузкой библиотеки по обработке платежей может привести к раскрытию информации о платеже и пользователе. А ошибка в загрузке скрипта работающего с социальными, рекламными и другими сетями приведет к проблемам с отрисовкой интерфейса.

2. Синхронизация асинхронных запросов

Большая часть JavaScript направлена на обработку асинхронных событий, таких как действия пользователя или передача данных по сети. При нескольких одновременных запросах могут возникнуть проблемы с их синхронизацией. Рассмотрим пример:

var obj = {};

$.post("/api/thing1", {}, function (resp) {
    obj.thing1 = resp;
});

$.post("/api/thing2", {}, function (resp) {
    obj.thing2 = resp;
    obj.result = obj.thing1 + obj.thing2;
});

Запущено 2 ajax запроса. При завершении второго, оба используются для получения результата. Все работает как задумано когда /api/thing1 завершается до /api/thing2, а вот если происходит наоборот, то возникают проблемы.

3. Изменения в сторонних библиотеках

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

Но, следует понимать, что вы подключаете зависимость со всеми вытекающими последствиями. Разработчики могут вносить изменения в эти библиотеки без предупреждения.

4. Изменения браузера

Сами браузеры изменяются каждый день. Разработчики добавляют в них новый функционал, исправляют старые проблемы. Но иногда мы знаем каких ошибок ожидать от браузера, а иногда мы сталкиваемся с новыми.

В октябре Apple выпустили новую версию WebKit в iOS, с изменениями в DOM. В результате возникли ошибки в Ember, Angular и Polymore. Скоро будет выпущен Microsoft Edge. Конечно, в нем тоже будут изменения обработчиков JavaScript, DOM и CSS. Нам придется перепроверить наши приложения.

5. Наступление плагинов для браузеров

Многие современные браузеры поддерживают систему плагинов, позволяющих значительно расширить способности браузера. Но они могут изменять DOM, а иногда вмешиваться в работу вашего приложения. Достаточно одного пользователя, чтобы на проблему обратили внимание:

“Босс нашел ошибку, но она происходит только на компьютере его жены. Ошибку надо исправить до обеда!” - разговор с клиентом.

Поисковые плагины очень часто вмешиваются в работу приложений, особенно в формы ввода данных. Они также иногда понижают производительность, вмешиваются в работу API и изменяют события.

Отслеживание и предупреждение

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

Как только вы запустили приложение, вы должны всегда следить за его работой с помощью TrackJS. Он наблюдает за поведением пользователей и сообщает при возникновении ошибки. Вы всегда видите полною информацию о проблеме: что делал пользователь, состояние сети и так далее. TrackJS не просто считает ошибки, он дает вам всю необходимую информацию для их исправления.

TrackJS - отличный инструмент для мониторинга работы JavaScript на вашем сайте. Каждый день я получаю email со списком ошибок на сайте. После авторизации на сайте TrackJS я вижу детальную информацию о каждой ошибке, включая версию браузера, страницы с этой ошибкой и многое другое. Не встречал лучше инструмента для отслеживания ошибок! - Девид Уолш.

С помощью 30 дневной пробной версии TrackJS вы сможете начать работать с ним уже сегодня и устранить все возникающие ошибки на вашем сайте.

Комментарии

0
Войти
Комментариев нет.
Войдите чтобы оставлять комментарии.