Руководство по обработке ошибок в JavaScript

Nikita

Ошибки — это хорошо. Автор материала говорит, что уверен в том, что эта идея известна всем. На первый взгляд ошибки кажутся чем-то страшным. Им могут сопутствовать какие-то потери. Ошибка, сделанная на публике, вредит авторитету того, кто её совершил. Но, совершая ошибки, мы на них учимся, а значит, попадая в следующий раз в ситуацию, в которой раньше вели себя неправильно, делаем всё как нужно.

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

Этот материал, посвящённый обработке ошибок в JavaScript, разбит на три части. Сначала мы сделаем общий обзор системы обработки ошибок в JavaScript и поговорим об объектах ошибок. После этого мы поищем ответ на вопрос о том, что делать с ошибками, возникающими в серверном коде (в частности, при использовании связки Node. js + Express. js). Далее — обсудим обработку ошибок в React. js. Фреймворки, которые будут здесь рассматриваться, выбраны по причине их огромной популярности. Однако рассматриваемые здесь принципы работы с ошибками универсальны, поэтому вы, даже если не пользуетесь Express и React, без труда сможете применить то, что узнали, к тем инструментам, с которыми работаете.

Код демонстрационного проекта, используемого в данном материале, можно найти в этом репозитории.

1. Ошибки в JavaScript и универсальные способы работы с ними

Если в вашем коде что-то пошло не так, вы можете воспользоваться следующей конструкцией.

В ходе выполнения этой команды будет создан экземпляр объекта Error и будет сгенерировано (или, как говорят, «выброшено») исключение с этим объектом. Инструкция throw может генерировать исключения, содержащие произвольные выражения. При этом выполнение скрипта остановится в том случае, если не были предприняты меры по обработке ошибки.

Объект Error

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

Генерирование и обработка ошибок

Конструкция try…catch

Этот блок можно использовать для обработки любых ошибок, происходящих в синхронном коде. Рассмотрим пример.

Блок finally

Асинхронные механизмы — коллбэки

Асинхронные механизмы — промисы

Асинхронные механизмы и try…catch

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

2. Генерирование и обработка ошибок в серверном коде

Теперь, когда у нас есть инструменты для работы с ошибками, посмотрим на то, что мы можем с ними делать в реальных ситуациях. Генерирование и правильная обработка ошибок — это важнейший аспект серверного программирования. Существуют разные подходы к работе с ошибками. Здесь будет продемонстрирован подход с использованием собственного конструктора для экземпляров объекта Error и кодов ошибок, которые удобно передавать во фронтенд или любым механизмам, использующим серверные API. Как структурирован бэкенд конкретного проекта — особого значения не имеет, так как при любом подходе можно использовать одни и те же идеи, касающиеся работы с ошибками.

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

Разработка собственного конструктора объектов ошибок

Маршрутизация

Теперь, когда наш объект ошибки готов к использованию, нужно настроить структуру маршрутов. Как было сказано выше, нам требуется реализовать унифицированный подход к обработке ошибок, позволяющий одинаково обрабатывать ошибки для всех маршрутов. По умолчанию фреймворк Express. js не вполне поддерживает такую схему работы. Дело в том, что все его маршруты инкапсулированы.

Для того чтобы справиться с этой проблемой, мы можем реализовать собственный обработчик маршрутов и определять логику маршрутов в виде обычных функций. Благодаря такому подходу, если функция маршрута (или любая другая функция) выбрасывает ошибку, она попадёт в обработчик маршрутов, который затем может передать её клиентской части приложения. При возникновении ошибки на сервере мы планируем передавать её во фронтенд в следующем формате, полагая, что для этого будет применяться JSON-API:

Если на данном этапе происходящие кажется вам непонятным — не беспокойтесь — просто продолжайте читать, пробуйте работать с тем, о чём идёт речь, и постепенно вы во всём разберётесь. На самом деле, если говорить о компьютерном обучении, здесь применяется подход «сверху-вниз», когда сначала обсуждаются общие идеи, а потом осуществляется переход к частностям.

Вот как выглядит код обработчика маршрутов.

Полагаем, комментарии в коде достаточно хорошо его поясняют. Надеемся, читать их удобнее, чем объяснения подобного кода, данные после него.

Теперь взглянем на файл маршрутов.

JavaScript error! Как исправить ошибку в JavaScript коде?

javascript errorУзнайте, как можно исправить ошибки JavaScript кода с помощью консоли браузера и не только. Будем учиться на примерах, как бороться с js error и другими проблемами. А также поделимся своей практикой борьбы с ошибками в комментариях.

Что мы сегодня узнаем?

Встречаем консоль!

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

Визуализация при исправлении ошибок

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

Консоль браузера, это объект, который может быть использован для вывода информации об ошибках во время загрузки страницы. Для примера: вы можете добраться к любому DOM элементу, например, картинке которая имеет не правильный URL. Для этого нужно навести на элемент (картинку) и нажать правую кнопку мыши. Найти «Проинспектировать элемент» или что-то подобное. В Opera это выглядит так:

Доступ в консоль Opera, для исправления ошибки

Вот мы и в консоле. Почти, остальось выбрать вкладку «консоль».

В консоле оперы

Консоль, в отличии от «исходного кода», способна видеть текущие изменения на странице, которые вызваны JavaScript кодом.

А вот доступ к консоли в Chrome браузере:

Выявление ошибок в Chrome браузере

Простые примеры выявления ошибок

Консоль поддерживает множество опций, но можно обойтись 3-4, этого достаточно для выявления и дальнейшего исправления ошибки. Из моего собственного опыта, функция log(), наиболее удобная. Она выводит новые сообщения, DOM элементы, переменные в консоль, где мы можем их видеть. Примеры ниже показывают применение функций, которые я использую.

В этом скрипте, консоль выводит разные результаты в зависимости значения переменной full_name (пустая или нет).

Для события jQuery click, консоль выведет информацию о нажатии элемента (трассировка):

Консоль это больше чем вывод сообщений, она также может принимать команды. Для примера, наберите «document» и нажмите Enter для получения информации о странице.

Запуск команд в консоле

Как исправить ошибку без консоли?

Если вам сложно разобраться с функциями консоли, или ваш браузер не поддерживает данной функции. Советую воспользоваться простым и проверенным способом для исправления ошибки в коде javascript. По ходу программного кода, можно просто вставлять вывод сообщения alert();

Примеры выявления ошибок с помощью alert

Этот пример позволяет просто вывести значение переменной:

Также можно понять где значение, а где объект:

Еще одно применение – это определение в какой строке кода произошла ошибка. Для этого вам просто нужно вставить сообщения типа alert(‘Здесь ошибка’); через каждую строку кода. Например:

Держите страницу в чистоте!

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

Какими способами пользуетесь вы? Как вам удается исправлять ошибки в JS коде? Поделитесь своим опытом в комментариях.

Источники:

https://medium. com/webbdev/js-6c7a3c5b4e61

https://sitear. ru/material/javascript-error-kak-ispravit-oshybku

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: