Ошибки в консоли браузера
Добрый день! Сегодня поговорим о поиске ошибок на сайте своими силами без помощи технической поддержки, используя лишь браузер .
Безусловно, доверить дело профессионалам чаще всего самый простой и быстрый путь, в условиях, когда время не терпит, лучше предпочесть его. Но как быть если тех поддержка молчит или вовсе отсутствует как таковая?
Прежде всего, чтобы не происходило, первым делом – успокойтесь. Конечно, для многих из нас, наш блог это и смысл жизни, и кормилец, и даже в некотором смысле надежный друг. Смотришь на него и понимаешь, как много было сделано, сколько всего пережито, аж невольно слеза наворачивается. И тут Ваш друг заболевает, любой начнет волноваться, но решение проблемы надо искать на холодную голову.
Что предпринимать?
Мы успокоились и сели с твердой решимостью разделаться с болезнями нашего блога. Теперь надо понять масштаб бедствия. Бывает отваливаются ссылки или не грузится плагин со стороннего сайта. К сожалению, все описать не выйдет, поэтому просто покажу, что можно найти в панели разработчика.
Первое, это открыть сайт через Chrome или Mozilla , а далее нажать клавишу « f12 ». Появится панель с инструментами разработчика. Если на сайте есть ошибки, они будут здесь во вкладке « Console ».
Ошибки в скриптах
К примеру, частенько могут быть ошибки в скриптах (файлы с расширением js), если мы говорим о CMS, то чаще всего решение можно поискать по тексту ошибки, вполне вероятно, что кто-то сталкивался с такими проблемами и описал выход из ситуации.
Правда, не удивляйтесь, если ответ будет лишь на англоязычных форумах, тогда переводчик вам в помощь. Конечно, вы можете просто спросить, очень рекомендую сервис StackOverFlow , там сидит множество спецов во всех возможных областях, может быть кто-то ответит и расскажет, что делать.
Браузер чаще всего даже говорит в какой строке скрипта ошибка, правда если файлы объединены в бандлы или минифицированы, о них можно узнать здесь , то это не сильно поможет.
Проблемы с картинками, файлами или данными
Ссылки
Если говорить о ссылках, то тут два варианта. Первое проблема в том, что изменился путь стороннего ресурса, на который дана ссылка или же она не верно задана изначально. Сам путь ссылки содержится в атрибуте “ href ” html тега, чаще всего это – “ a ”. Проверить работоспособность, проще всего, копируете текст из кавычек атрибута “ href ” и вставляете в строку браузера, если ссылка не верная, будет ошибка.
Выделение интересующего объекта в браузере
В панели есть очень удобный инструмент для поиска интересующего объекта на странице.
С его помощью можно не искать ссылку или какой-то другой объект в исходном коде страницы, а быстро отыскать в браузере. После активации инструмента, просто наведите на интересующий объект и кликните левой кнопкой мыши. Здесь вы можете изменить тег html и посмотреть, что будет или поглядеть ссылку, которая отображается на странице. Однако, внесенные изменения сбросятся после обновления страницы, поэтому здесь можно творить, что угодно. Если же Вам хочется их зафиксировать, делать это надо через администраторскую панель или админку в простонародье.
Сканирование сайта
Кроме того, есть различные сервисы, которые проверяют на наличие заражений или ошибок на сайте, можно использовать их. К несчастью, некоторые из них лишь изображают деятельность и высвечивают абсолютно бесполезную информацию о вредоносных скриптах, которые таковыми не являются или о несуществующих ошибках и багах.
Итоги
Стоит понимать, что данные инструменты рассчитаны больше на разработчиков, а значит простому пользователю, будет не всегда понятна выводимая информация. Кроме того, есть ряд ошибок, которые не влияют на работоспособность сайта, например, у вас завис интернет из-за этого в консоли может отобразиться куча ошибок, но стоит обновить страницу, и они исчезают. Или же решение требует правки файлов скрипта, тут нужно быть аккуратней, чтобы хуже не стало, если хуже может быть.
Итак, подводя итоги, когда на сайте что-то не работает, действуйте по простому алгоритму:
1. Успокойтесь и не паникуйте;
2. Откройте панель инструментов разработчика в браузере и
посмотрите, есть ли там ошибки;
3. Если да, то поищите по тексту, возможно уже есть решение;
4. Проблема осталась? Тогда попробуйте просканировать на наличие
вредоносных скриптов и пишите в тех поддержку.
Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.
Для каких целей они используются и как можно выявить ошибки через консоль – поговорим в сегодняшней статье.
Как открыть консоль на разных браузерах
Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».
Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.
Второй путь заключается в просмотре кода текущей страницы – для этого необходимо кликнуть правой кнопкой мыши по любому элементу сайта и в отобразившемся меню выбрать опцию «Посмотреть код». Обратите внимание, что это название опции в Google Chrome, в других браузерах оно может отличаться. Например, в Яндексе функция называется «Исследовать элемент».
В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.
Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.
Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».
Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.
Какие вкладки есть в консоли и за что они отвечают
Консоль каждого браузера содержит практически идентичные вкладки с одним и тем же функционалом, поэтому рассмотрим каждый из блоков на примере веб-обозревателя Google Chrome.
Перед тем как перейти к разбору каждой вкладки, давайте рассмотрим основное элементы, которые могут быть полезны при работе с консолью. Первый – это включение адаптивного режима. Для этого необходимо открыть консоль и в верхнем левом углу нажать на кнопку в виде телефона/планшета.
В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.
Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.
И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.
На этом стандартный набор функций консольной панели заканчивается. Давайте посмотрим, какие в ней есть вкладки и за что они отвечают.
Elements
Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.
Console
Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.
Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.
Также в данной консоли мы можем посмотреть информацию об ошибках плагина, воспользоваться поиском по слову или фразе, а также установить различные фильтры на отображаемую информацию.
Sources
Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.
Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.
Network
Из названия уже понятно, что данный раздел предназначен для отслеживания сетевого трафика. Его основная функция – запись сетевого журнала. Можно выявить время загрузки и обработки различных файлов, чтобы впоследствии оптимизировать страницу.
Performance
Панель отображает таймлайн использования сети, выполнения JavaScript-кода и загрузки памяти. После первоначального построения графиков будут доступны подробные данные о выполнении кода и всем жизненном цикле страницы.
Memory
В этой вкладке можно отслеживать использование памяти веб-приложением или страницей. Мы можем узнать, где тратится много ресурсов – эту информацию в последующем можно использовать для оптимизации кода.
Application
Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.
Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.
Security
Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:
- проверке сертификата – подтвердил ли сайт свою подлинность TLS;
- tls-соединении – использует ли сайт современные безопасные протоколы;
- безопасности второстепенных источников.
Lighthouse
Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:
- Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
- TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
- TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
- (unknown):Scripterror. Обозначает ошибку скрипта.
- TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
- TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
- Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
- TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
- Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
- ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Заключение
Иногда консоль пригождается не только верстальщикам – она бывает полезна для самых простых действий. Например, чтобы посмотреть мобильную версию, скачать картинку либо узнать используемый шрифт на сайте. В общем, применять консольное окно можно в различных ситуациях – как для просмотра содержимого сайта, так и для анализа потребления памяти.
Изучайте и находите свои применения этому инструменту – он может многое. Удачи!
Если ваш веб-сайт перестает нормально работать, консоль браузера – это первое место, на которое вам следует обратить внимание для диагностики проблемы. В большинстве популярных браузеров консоль довольно легко найти. Но если вы никогда не отваживались на инструменты разработчика своего браузера, то поиск и исправление ошибок веб-сайта могут показаться вам немного непонятными, пока вы не прочитаете эту статью.
Причины ошибок JavaScript
JavaScript замечательный, и у него есть много преимуществ, которые улучшают ваш сайт. На самом деле плагины на основе CMS, которые управляют многими магазинами электронной коммерции, используют JavaScript для интеграции всех видов функциональных возможностей, которые улучшают пользовательский опыт.
Но у JavaScript также есть несколько незначительных недостатков, главный из которых заключается в том, что одна ошибка JavaScript может привести к полной остановке всех других скриптов на странице. Так что, если вы используете какой-либо скрипт на основе CMS для своего сайта электронной коммерции, тогда другой плагин или расширение может нарушить JavaScript вашей платформы и наоборот. Проблемы могут возникнуть разные, трудно дать однозначный ответ заранее, поэтому главное – это понимать как диагностировать ошибки и научиться хотя бы понимать с чем они связаны.
Консоль браузера и проверка ошибок JavaScript?
Если вы считаете, что проблема на вашем сайте вызвана ошибкой JavaScript, ваш браузер Chrome может легко это проверить. Вот как.
Шаг 1. Откройте консоль либо в виде отдельной панели, либо в виде ящика рядом с другой панелью.
У вас есть два варианта открытия панели консоли:
- Windows / Linux – Нажмите Ctrl + Shift + J.
- Mac – Нажмите Cmd + Opt + J.
У вас также есть два варианта открытия консоли в виде ящика рядом с другой панелью:
Шаг 2: Теперь вы увидите данные, отображаемые в консоли. Вот пример на скриншоте.
Поиск распространенных ошибок JavaScript
Теперь, когда у вас есть открытая консоль, пришло время выяснить, какого черта мы смотрим, и посмотреть, есть ли какие-либо ошибки JavaScript.
Оставаясь на вкладке браузера, которую вы использовали для открытия консоли, перейдите на страницу, которую вы хотите проверить на наличие ошибок. Если вы уже находитесь на этой странице, перезагрузите ее, чтобы вы могли прочитать вывод консоли.
Топ 10 самых распространенных ошибок JavaScript
Теперь давайте углубимся и обсудим некоторые наиболее распространенные ошибки JavaScript, с которыми вы можете столкнуться в Chrome, Safari и Internet Explorer.
1. Uncaught TypeError: Cannot read property. Невозможно прочитать свойство.
Эта ошибка возникает в Chrome при вызове метода или при чтении свойства для неопределенного объекта.
2. TypeError: ‘undefined’ is not an object (evaluating). ‘undefined’ не является объектом (оценка).
Эта ошибка возникает в Safari при вызове метода или при чтении свойства для неопределенного объекта.
3. TypeError: null is not an object (evaluating). null не является объектом (оценка).
Это еще одна ошибка Safari, возникающая при вызове метода или при чтении свойства для нулевого объекта.
4. (unknown): Script error. Ошибка скрипта.
Вы увидите эту ошибку, когда ошибка JavaScript, которая не была обнаружена, нарушает политику перекрестного происхождения и пересекает границы домена.
5. TypeError: Object doesn’t support property. Объект не поддерживает свойство.
Это ошибка Internet Explorer, возникающая при вызове неопределенного метода.
6. TypeError: ‘undefined’ is not a function. «undefined» не является функцией.
Эта ошибка возникает в Chrome, когда вызывается неопределенная функция.
7. Uncaught RangeError: Maximum call stack. Максимальный стек вызовов.
Это еще одна ошибка Chrome, которая может быть вызвана рядом сценариев.
8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство ‘length’.
Эта ошибка Chrome срабатывает, когда свойство длины чтения неопределенной переменной.
9. Uncaught TypeError: Cannot set property. Невозможно установить свойство.
Эта ошибка возникает, когда скрипт пытается получить доступ к неопределенной переменной. Без сбоев он вернется как «неопределенный», потому что невозможно установить или получить свойство неопределенной переменной.
10. ReferenceError: event is not defined. Событие не определено.
Эта ошибка JavaScript возникает, когда скрипт пытается получить доступ к неопределенной переменной или переменной, которая не входит в текущую область.
В большинстве случаев, если у вас есть плагин или скрипт, вызывающий эти ошибки JavaScript, обращение к разработчику за поддержкой приведет вас к решению. Как правило, они предоставляют исправление или просто выкладывают исправление со следующим обновлением плагина или скрипта.
Однако не всем нам так повезло, так как некоторые обновления и поддержка скриптов полностью прекращаются разработчиками по разным причинам. Они могут обанкротиться или перестать быть заинтересованными в поддержке проекта. Такое случается. Поэтому всегда полезно иметь кого-то в режиме ожидания, чтобы помочь, если вам неудобно самостоятельно устранять ошибки JavaScript.
Как решить проблему с javaScript
Поиск и исправление ошибок JavaScript на вашем веб-сайте электронной коммерции может оказаться сложной задачей даже с помощью простых шагов, которые мы предоставили выше. Однако, если вы подозреваете, что ошибки JavaScript мешают вашему сайту работать должным образом, важно как можно скорее устранить их, чтобы не потерять работоспособность сайта или его отдельных страниц.
Первым шагом попробуйте поискать решение и описание проблемы в интернете, зачастую во многом опыт решения таких ошибок уже присутствует на форумах и площадках где обсуждают различные технические вопросы сайтов. Во вторых попробуйте найти и решение и описание проблемы более детальнее. Возможно стоит определить строку кода где появляется проблема и что её вызывает на вашем сайте.
То есть по сути перед вами выбор: изучить и сделать самому или нанимать специалиста, который сделает исправление ошибок и решит вашу проблему.
Если вам критически нужна помощь в поиске и исправлении ошибок JavaScript или поддержке вашего сайта, свяжитесь с нами и я постараюсь помочь вам решить проблему.
Яндекс Браузер
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Google Chrome
Откройте меню → Дополнительные инструменты → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Opera
В левом верхнем углу нажмите кнопку Opera , выберите в меню пункт Разработка → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Mozilla Firefox
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Консоль .
Убедитесь, что во всех фильтрах (Сеть, CSS, JS, Защита, Журнал, Сервер) отмечен только один пункт — Ошибки . Для этого рядом с каждым фильтром нажмите значок .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Microsoft Edge
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Safari
Чтобы активировать консоль ошибок, в меню выберите Safari → Настройки → Дополнения и включите опцию Показывать меню «Разработка» в строке меню .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить объект и перейдите на вкладку Консоль .
Перейдите на вкладку Консоль и включите фильтр Ошибки . В узком окне название фильтра может быть скрыто: разверните окно.
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Сеть .
Яндекс Браузер
Откройте меню → Дополнительно → Дополнительные инструменты → Консоль JavaScript .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Google Chrome
Откройте меню → Дополнительные инструменты → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Opera
В левом верхнем углу нажмите кнопку Opera , выберите в меню пункт Разработка → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Mozilla Firefox
Откройте меню → Веб-разработка → Веб-консоль .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Консоль .
Убедитесь, что во всех фильтрах (Сеть, CSS, JS, Защита, Журнал, Сервер) отмечен только один пункт — Ошибки . Для этого рядом с каждым фильтром нажмите значок .
Внимание. Если вместо значка нажать название фильтра, то проверка ошибок будет отключена.
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Microsoft Edge
Откройте меню → Другие инструменты → Средства разработчика .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Safari
Чтобы активировать консоль ошибок, в меню выберите Safari → Настройки → Дополнения и включите опцию Показывать меню «Разработка» в строке меню .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить объект и перейдите на вкладку Консоль .
Перейдите на вкладку Консоль и включите фильтр Ошибки . В узком окне название фильтра может быть скрыто: разверните окно.
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Сеть .
Ошибки — это хорошо. Автор материала, перевод которого мы сегодня публикуем, говорит, что уверен в том, что эта идея известна всем. На первый взгляд ошибки кажутся чем-то страшным. Им могут сопутствовать какие-то потери. Ошибка, сделанная на публике, вредит авторитету того, кто её совершил. Но, совершая ошибки, мы на них учимся, а значит, попадая в следующий раз в ситуацию, в которой раньше вели себя неправильно, делаем всё как нужно.
Код демонстрационного проекта, используемого в данном материале, можно найти в этом репозитории.
1. Ошибки в JavaScript и универсальные способы работы с ними
Если в вашем коде что-то пошло не так, вы можете воспользоваться следующей конструкцией.
В ходе выполнения этой команды будет создан экземпляр объекта Error и будет сгенерировано (или, как говорят, «выброшено») исключение с этим объектом. Инструкция throw может генерировать исключения, содержащие произвольные выражения. При этом выполнение скрипта остановится в том случае, если не были предприняты меры по обработке ошибки.
Начинающие JS-программисты обычно не используют инструкцию throw . Они, как правило, сталкиваются с исключениями, выдаваемыми либо средой выполнения языка, либо сторонними библиотеками. Когда это происходит — в консоль попадает нечто вроде ReferenceError: fs is not defined и выполнение программы останавливается.
▍Объект Error
У экземпляров объекта Error есть несколько свойств, которыми мы можем пользоваться. Первое интересующее нас свойство — message . Именно сюда попадает та строка, которую можно передать конструктору ошибки в качестве аргумента. Например, ниже показано создание экземпляра объекта Error и вывод в консоль переданной конструктором строки через обращение к его свойству message .
Второе свойство объекта, очень важное, представляет собой трассировку стека ошибки. Это — свойство stack . Обратившись к нему можно просмотреть стек вызовов (историю ошибки), который показывает последовательность операций, приведшую к неправильной работе программы. В частности, это позволяет понять — в каком именно файле содержится сбойный код, и увидеть, какая последовательность вызовов функций привела к ошибке. Вот пример того, что можно увидеть, обратившись к свойству stack .
▍Генерирование и обработка ошибок
Создание экземпляра объекта Error , то есть, выполнение команды вида new Error() , ни к каким особым последствиям не приводит. Интересные вещи начинают происходить после применения оператора throw , который генерирует ошибку. Как уже было сказано, если такую ошибку не обработать, выполнение скрипта остановится. При этом нет никакой разницы — был ли оператор throw использован самим программистом, произошла ли ошибка в некоей библиотеке или в среде выполнения языка (в браузере или в Node.js). Поговорим о различных сценариях обработки ошибок.
▍Конструкция try. catch
Блок try. catch представляет собой самый простой способ обработки ошибок, о котором часто забывают. В наши дни, правда, он используется гораздо интенсивнее чем раньше, благодаря тому, что его можно применять для обработки ошибок в конструкциях async/await .
Этот блок можно использовать для обработки любых ошибок, происходящих в синхронном коде. Рассмотрим пример.
Если бы в этом примере мы не заключили бы сбойную команду console.log(b) в блок try. catch , то выполнение скрипта было бы остановлено.
▍Блок finally
Иногда случается так, что некий код нужно выполнить независимо от того, произошла ошибка или нет. Для этого можно, в конструкции try. catch , использовать третий, необязательный, блок — finally . Часто его использование эквивалентно некоему коду, который идёт сразу после try. catch , но в некоторых ситуациях он может пригодиться. Вот пример его использования.
▍Асинхронные механизмы — коллбэки
Программируя на JavaScript всегда стоит обращать внимание на участки кода, выполняющиеся асинхронно. Если у вас имеется асинхронная функция и в ней возникает ошибка, скрипт продолжит выполняться. Когда асинхронные механизмы в JS реализуются с использованием коллбэков (кстати, делать так не рекомендуется), соответствующий коллбэк (функция обратного вызова) обычно получает два параметра. Это нечто вроде параметра err , который может содержать ошибку, и result — с результатами выполнения асинхронной операции. Выглядит это примерно так:
Если в коллбэк попадает ошибка, она видна там в виде параметра err . В противном случае в этот параметр попадёт значение undefined или null . Если оказалось, что в err что-то есть, важно отреагировать на это, либо так как в нашем примере, воспользовавшись командой return , либо воспользовавшись конструкцией if. else и поместив в блок else команды для работы с результатом выполнения асинхронной операции. Речь идёт о том, чтобы, в том случае, если произошла ошибка, исключить возможность работы с результатом, параметром result , который в таком случае может иметь значение undefined . Работа с таким значением, если предполагается, например, что оно содержит объект, сама может вызвать ошибку. Скажем, это произойдёт при попытке использовать конструкцию result.data или подобную ей.
▍Асинхронные механизмы — промисы
В результате можно порекомендовать всегда, при работе с промисами, использовать блок catch . Взглянем на пример.
▍Асинхронные механизмы и try. catch
После того, как в JavaScript появилась конструкция async/await , мы вернулись к классическому способу обработки ошибок — к try. catch. finally . Обрабатывать ошибки при таком подходе оказывается очень легко и удобно. Рассмотрим пример.
При таком подходе ошибки в асинхронном коде обрабатываются так же, как в синхронном. В результате теперь, при необходимости, в одном блоке catch можно обрабатывать более широкий диапазон ошибок.
2. Генерирование и обработка ошибок в серверном коде
Теперь, когда у нас есть инструменты для работы с ошибками, посмотрим на то, что мы можем с ними делать в реальных ситуациях. Генерирование и правильная обработка ошибок — это важнейший аспект серверного программирования. Существуют разные подходы к работе с ошибками. Здесь будет продемонстрирован подход с использованием собственного конструктора для экземпляров объекта Error и кодов ошибок, которые удобно передавать во фронтенд или любым механизмам, использующим серверные API. Как структурирован бэкенд конкретного проекта — особого значения не имеет, так как при любом подходе можно использовать одни и те же идеи, касающиеся работы с ошибками.
В качестве серверного фреймворка, отвечающего за маршрутизацию, мы будем использовать Express.js. Подумаем о том, какая структура нам нужна для организации эффективной системы обработки ошибок. Итак, вот что нам нужно:
▍Разработка собственного конструктора объектов ошибок
Вот как выглядит класс CustomError , код которого оформлен в виде модуля.
▍Маршрутизация
Теперь, когда наш объект ошибки готов к использованию, нужно настроить структуру маршрутов. Как было сказано выше, нам требуется реализовать унифицированный подход к обработке ошибок, позволяющий одинаково обрабатывать ошибки для всех маршрутов. По умолчанию фреймворк Express.js не вполне поддерживает такую схему работы. Дело в том, что все его маршруты инкапсулированы.
Если на данном этапе происходящие кажется вам непонятным — не беспокойтесь — просто продолжайте читать, пробуйте работать с тем, о чём идёт речь, и постепенно вы во всём разберётесь. На самом деле, если говорить о компьютерном обучении, здесь применяется подход «сверху-вниз», когда сначала обсуждаются общие идеи, а потом осуществляется переход к частностям.
Вот как выглядит код обработчика маршрутов.
Полагаем, комментарии в коде достаточно хорошо его поясняют. Надеемся, читать их удобнее, чем объяснения подобного кода, данные после него.
Теперь взглянем на файл маршрутов.
В этих примерах с самими запросами ничего не делается. Тут просто рассматриваются разные сценарии возникновения ошибок. Итак, например, запрос GET /city попадёт в функцию const GET = req =>. , запрос POST /city попадёт в функцию const POST = req =>. и так далее. Эта схема работает и при использовании параметров запросов. Например — для запроса вида GET /city?startsWith=R . В целом, здесь продемонстрировано, что при обработке ошибок, во фронтенд может попасть либо общая ошибка, содержащая лишь предложение попробовать снова или связаться с владельцем сервера, либо ошибка, сформированная с использованием конструктора CustomError , которая содержит подробные сведения о проблеме.
Данные общей ошибки придут в клиентскую часть приложения в таком виде:
Конструктор CustomError используется так:
Это даёт следующий JSON-код, передаваемый во фронтенд:
Теперь, когда мы основательно потрудились над серверной частью приложения, в клиентскую часть больше не попадают бесполезные логи ошибок. Вместо этого клиент получает полезные сведения о том, что пошло не так.
Не забудьте о том, что здесь лежит репозиторий с рассматриваемым здесь кодом. Можете его загрузить, поэкспериментировать с ним, и, если надо, адаптировать под нужды вашего проекта.
3. Работа с ошибками на клиенте
Теперь пришла пора описать третью часть нашей системы обработки ошибок, касающуюся фронтенда. Тут нужно будет, во-первых, обрабатывать ошибки, возникающие в клиентской части приложения, а во-вторых, понадобится оповещать пользователя об ошибках, возникающих на сервере. Разберёмся сначала с показом сведений о серверных ошибках. Как уже было сказано, в этом примере будет использована библиотека React.
▍Сохранение сведений об ошибках в состоянии приложения
Следующее, с чем надо разобраться, заключается в том, что ошибки одного типа нужно показывать в одном стиле. По аналогии с сервером, здесь можно выделить 3 типа ошибок.
Здесь будет использоваться встроенная в React система управления состоянием приложения, но, при необходимости, вы можете воспользоваться и специализированными решениями для управления состоянием — такими, как MobX или Redux.
▍Глобальные ошибки
Теперь взглянем на код, который хранится в файле Application.js .
Как видно, в состоянии, в Application.js , имеется место для хранения данных ошибки. Кроме того, тут предусмотрены методы для сброса этих данных и для их изменения.
Обратите внимание на строку if (!this.props.error) return null . Она указывает на то, что при отсутствии ошибки компонент ничего не выводит. Это предотвращает постоянный показ красного прямоугольника на странице. Конечно, вы, при желании, можете поменять внешний вид и поведение этого компонента. Например, вместо того, чтобы сбрасывать ошибку по нажатию на x , можно задать тайм-аут в пару секунд, по истечении которого состояние ошибки сбрасывается автоматически.
▍Обработка специфических ошибок, возникающих при выполнении запросов
Тут используется тот же принцип, который мы применяли при работе с глобальными ошибками. Только сведения о таких ошибках хранятся в локальном состоянии соответствующих компонентов. Работа с ними очень похожа на работу с глобальными ошибками. Вот код файла SpecificErrorReq.js .
▍Ошибки, возникающие в клиентской части приложения
В поле ничего нет, мы сообщаем об этом пользователю
Вот код файла SpecificErrorFrontend.js , реализующий вышеописанный функционал.
Итоги
Надеемся, теперь у вас сформировалось понимание того, как можно работать с ошибками в веб-приложениях. Нечто вроде console.error(err) следует использовать только в отладочных целях, в продакшн подобные вещи, забытые программистом, проникать не должны. Упрощает решение задачи логирования использование какой-нибудь подходящей библиотеки наподобие loglevel.
Читайте также: