JavaScript | console.error()

Введение

Изучая JavaScript, вторым по популярности выражением можно встретить console.error(). Что оно означает и зачем нужно?

Если говорить простыми словами, то console.error() — это способ увидеть ошибочные места работы программы (или алгоритма). Если мы находимся в браузере, то мы сможем красным цветом подсветить проблемные места работы нашего алгоритма на клиентской стороне. Так мы будем понимать, что что-то пошло не так. Мы сможем детальнее расписать причину ошибки. Современные браузеры помогают фильтровать различные консольные сообщения по их типам.

Выражение console.error() нужно только для разработчиков и оно не представляет никакой ценности для конечного пользователя, который пользуется приложением.

Выражение console.error() записывается в исполняемых файлах приложения, в тех местах, где нужно отследить ошибочные места работы программы.

Выражение console.error() можно запихнуть в любое место программы безболезненно. Ничего страшного при этом не произойдёт.

Объект console является свойством глобального объекта JavaScript, поэтому он виден из любого места программы.

 

Чем console.error() отличается от console.log()?

Обычно в log() мы стараемся выводить какой-то промежуточный результат работы нашего алгоритма, чтобы понимать, что функции работают корректно. В основном это нужно только на этапе разработки. Мы написали функцию, накидали в неё «console.log()» в нужные места, протестировали и если всё работает корректно, то можем убрать все нормальные выводы в журнал.

После этого мы также в нужных местах функции добавляем проверки — через IF или через TRY. И уже в этих проверках (ветвлениях) мы добавляем выражения «console.error()«. Они так там и остаются, как правило. Что мы можем проверять? Если наша функция работает с массивами, то нам нужно проверять её аргументы на принадлежность к массиву, а не числу или объекту. Мы же не знаем в какой момент функция получит параметры. А вдруг этой программой будем пользоваться не только мы. Представьте, что на странице сайта мы не получаем никаких уведомлений, но видим, что страница оформляется не так как нам это нужно. И где тогда искать проблему? Из-за чего контент страницы отображается некорректно? Куда смотреть?

Вот для этого и нужны выражения «console.error()«.

 

Зачем нужен «console.error()» на серверной стороне?

Если вы ещё не касались серверной стороны, то рано или поздно дорога JavaScript пути приведёт вас к NodeJS. Это тот же самый язык программирования JavaScript, но только на сервере.

Так вот там вы ощутите всю прелесть использования выражения «console.error()«. Как оно будет работать на сервере? Все сообщения об ошибках будут записываться в специальный файл — журнал ошибок. И когда вы не увидите правильного поведения своей программы, тогда вы сможете заглянуть в этот журнал ошибок и посмотреть что пошло не так и в какой момент времени это произошло. Но если вы не напишите в коде «console.error()«, то вы никак не узнаете, что что-то пошло не так.

Работая с методом «error()» вы как-бы заранее стараетесь предугадать проблемные места и подстраховаться с их обработкой.

 

Что нужно знать до console.error()?

Прежде всего вам нужно понимать, что такое ОБЪЕКТ в JavaScript. То есть что является объектом в JS.

После этого нужно знать, что такое ПРИКЛАДНЫЕ ИНТЕРФЕЙСЫ ПРОГРАММИРОВАНИЯ в браузере — API.

Соединив эти два понятия вместе мы получаем такой ОБЪЕКТ в браузере, при помощи которого можно отслеживать работу наших алгоритмов (функций) и выводить информацию в специальную вкладку браузера на любом этапе выполнения программы.

Этот объект называется console.

У объектов в JavaScript могут быть свои собственные методы, которые знают всю информацию о самом объекте и которые могут вносить определённые изменения в работу. Таким образом, объект console является одним из свойств Глобального Объекта в JavaScript. Если мы говорим про клиентскую сторону, то это объект window. Если мы говорим про серверную сторону, то это объект global.

 

В чём проблема? Простой пример необходимости использования console.error()

Давайте напишем (объявим) простую функцию, которая складывает два числа друг с другом:

function sumab (a,b){
  return a+b
}

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

Например, мы всегда ожидаем передать два Числа:

sumab(1, 2)

В этом случае всё пройдёт гладко так как оба параметра являются Числами.

Но что случится, если мы передадим строку и число?

sumab('sas', 2)

В этом случае всё тоже будет хорошо и вместо сложения получится конкатенация. Но нам такой вариант не подходит. Мы хотим во время разработки отлавливать такие моменты. Как это сделать?

 

Решение

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

Для отлова ошибочных данных на клиенте можно использовать выражение console.error().

Мы изменим написание нашей функции:

function sumzx (z, x){
  if(z.constructor.name!='Number' || x.constructor.name!='Number'){
    console.error('Переменная не является числом');
    return;
  }
  return z+x;
}

Результат работы

sumzx(1,4)
sumzx('asa',4)
sumzx([],4)

Обратите внимание на то как выполняются вызовы функций. Как только мы передаём в неё объект, отличный от Number, тогда мы получаем специальное графическое уведомление на вкладку браузера в инструментах разработчика.

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

В браузере Google Chrome метод «error()» оформляется в виде красного кружочка с крестиком из белых линий посередине. Справа от значка ошибки идёт серый треугольник, который раскрывает проблему.

 

Официальная документация по объекту console

Объект console является прикладным интерфейсом программирования в браузере и он расширяет функционал «глобального объекта«.

Ознакомиться с документацией по объекту console можно по адресу — https://console.spec.whatwg.org