Какое выражение позволяет проверять участки кода на наличие ошибок

С помощью JavaScript выражения try..catch Вы можете проверять участки кода на наличие ошибок.

Выражение try..catch

Выражение try..catch позволяет проверять участки кода на наличие ошибок.

Блок try содержит код, который проверяется на ошибки.

Блок catch содержит код, который будет выполнен если в блоке try будет найдена ошибка.

Синтаксис:

try  {
   //Код, который проверяется на наличие ошибок
}
catch(ошибка) {
   //Код, который будет выполнен если в блоке try были найдены ошибки
}

ошибка содержит пояснение к ошибке найденной в блоке try (если ошибка не была найдена переменная останется пустой).

//Проверим участок кода на ошибки
try 
{ 
//В данном коде ошибка (dddocument вместо document)
dddocument.write('Привет всем!');
}
catch (er)
{
//Выведем пояснение к ошибке
document.write(er);
}

Блок finally

Данный блок является необязательной частью конструкции try..catch.

Код находящийся в данном блоке начинает выполняться после исполнения кода в блоках try и catch, но перед исполнением команд, которые следуют за данной конструкцией.

Обратите внимание: код в данном блоке будет выполнен независимо от того были ли найдена ошибка в блоке try или нет.

try 
{ 
document.write('Привет всем!');
}
finally 
{
document.write('<hr />Проверка ошибок была завершена успешно');
}

Команда throw

Если автоматически сгенерированное пояснение к ошибке Вас не устраивает можете использовать команду throw, чтобы создавать собственные пояснения к возможным ошибкам.

Синтаксис:

f=prompt('Введите число от 1 до 5: ','');
try  {
   if (f>5) {
      throw 'Число которые Вы ввели больше 5';
   }
   if (f<1) {
      throw 'Число которое Вы ввели меньше 1';
   }
   if (isNaN(f)) {
      throw 'То, что Вы ввели не является числом';
   }
   else {
      document.write('Вы ввели: ' + f);
   }
   }
   catch (er) {
      document.write(er);
   }

Сделайте сами

Задание 1. Найдите с помощью try..catch ошибки в коде ниже и исправьте их.

docuemnt.write('Первое сообщение');
document.wirte('Второе сообщение');
getElementById('mes').innerHTML="Третье сообщение";
getElemeNtById('mes1').innerHTML="Четвертое сообщение";

Оператор try позволяет вам проверить блок кода на наличие ошибок.

Оператор catch позволяет вам обработать ошибку.

Оператор throw позволяет создавать собственные ошибки.

Оператор finally позволяет выполнить код, после того, как попытаться поймать, независимо от результата.

Ошибки будут!

При выполнении кода JavaScript могут возникать разные ошибки.

Ошибки могут быть ошибками кодирования, допущенны программистом, ошибками из-за неправильного ввода или другими непредвиденными ситуациями.

JavaScript перехватывает adddlert, как ошибку и выполняет код перехвата для ее обработки.

JavaScript try и catch

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

Оператор catch, позволяет поймать блок кода, который будет выполняться, если в блоке try возникает ошибка.

Оператор JavaScript try и catch идут в парах:

JavaScript выдает ошибки

Когда происходит ошибка, JavaScript обычно останавливается и генерирует сообщение об ошибке.

Технический термин для этого: JavaScript вызовет исключение (выдаст ошибку).

JavaScript фактически создаст объект Error с двумя свойствами: name и message.

Оператор throw

Оператор throw позволяет создать пользовательскую ошибку.

Технически вы можете сгенерировать исключение (сгенерировать ошибку).

Исключением может быть JavaScript String, Number, Boolean или Object:

Если вы используете throw вместе с try и catch, вы можете контролировать выполнение программы и генерировать собственные сообщения об ошибках.

Пример проверки ввода

В этом примере исследуется ввод. Если значение неверно, генерируется исключение (ошибка).

Исключение (err) перехватывается оператором catch, и отображается настраиваемое сообщение об ошибке:

Проверка HTML на валидность

Код выше — является просто примером.

Современные браузеры часто используют комбинацию JavaScript и встроенной проверки HTML, используя предопределенные правила проверки, определенные в атрибутах HTML:

Вы можете узнать больше о проверке форм в следующей главе этого руководства.

Оператор finally

Оператор finally позволяет выполнить код, после try и catch, еще раз попытаться поймать, независимо от результата:

Объект Error

JavaScript имеет встроенный объект Error, который предоставляет информацию об ошибке при возникновении ошибки.

Объект Error предоставляет два полезных свойства: имя и сообщение.

Свойства объекта Error

Значения Error Name

Шесть различных значений могут быть возвращены свойством Error Name:

Ниже описаны шесть различных значений.

Ошибка EvalError

Один EvalError указывает на ошибку в функции eval().

Новые версии JavaScript не генерируют EvalError. Вместо этого используйте SyntaxError.

Ошибка RangeError

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

Например: Вы не можете установить количество значащих цифр числа на 500.

Ошибка ReferenceError

Ошибка ReferenceError генерируется, если вы используете (ссылаетесь на неё) переменную,
которая не была объявлена:

Ошибка SyntaxError

Ошибка SyntaxError генерируется, если вы пытаетесь запустить код с синтаксической ошибкой.

Ошибка TypeError

Ошибка TypeError генерируется, если вы используете значение, которое находится за пределами диапазона ожидаемых типов:

Ошибка URIError (Единый идентификатор ресурса)

Ошибка URIError генерируется, если вы используете недопустимые символы в функции URI:

Нестандартные свойства объекта ошибок

Полный справочник ошибок

Чтобы получить полную информацию об объекте Error, перейдите в Полный справочник ошибок JavaScript ..

Инструкция try позволяет тестировать блок кода на наличие ошибок.

Оператор catch позволяет обработать ошибку.

Инструкция throw позволяет создавать пользовательские ошибки.

Оператор finally позволяет выполнять код после try и catch независимо от результата.

Ошибки будут происходить!

При выполнении кода JavaScript могут возникать различные ошибки.

Ошибки могут быть кодирование ошибки, сделанные программистом, ошибки из-за неправильного ввода, и другие непредвиденные вещи.

JavaScript ловит адддлерт как ошибку и выполняет код catch для его обработки.

JavaScript попробовать и поймать

Инструкция try позволяет определить блок кода для проверки на наличие ошибок во время его выполнения.

Инструкция catch позволяет определить блок кода, который будет выполняться, если в блоке try возникает ошибка.

Операторы JavaScript try и catch поставляются парами:

JavaScript бросает ошибки

При возникновении ошибки JavaScript обычно останавливается и генерирует сообщение об ошибке.

Технический термин для этого: JavaScript будет генерировать исключение (выбросить ошибку).

JavaScript фактически создаст объект Error с двумя свойствами: Name и Message.

Инструкция throw

Инструкция throw позволяет создать пользовательскую ошибку.

Технически вы можете вызвать исключение (выбросить ошибку).

Исключением может быть строка JavaScript, число, логическое значение или объект:

Если вы используете throw вместе с try и catch, вы можете управлять потоком программы и генерировать пользовательские сообщения об ошибках.

Пример проверки ввода

В этом примере анализируется ввод. Если значение неверно, генерируется исключение (ERR).

Исключение (ERR) перехватывается оператором catch и отображается пользовательское сообщение об ошибке:

Проверка HTML

Приведенный выше код является лишь примером.

Современные браузеры часто используют комбинацию JavaScript и встроенную проверку HTML, используя предопределенные правила проверки, определенные в атрибутах HTML:

Подробнее о проверке форм можно прочитать в следующей главе этого учебного пособия.

Окончательное заявление

Оператор finally позволяет выполнять код после try и catch независимо от результата:

Объект Error

JavaScript имеет встроенный объект Error, предоставляющий сведения об ошибке при возникновении ошибки.

Объект Error предоставляет два полезных свойства: Name и Message.

Свойства объекта Error

Значения имени ошибки

В свойстве «имя ошибки» может быть возвращено шесть различных значений:

Шесть различных значений описаны ниже.

Ошибка eval

евалеррор указывает на ошибку в функции eval ().

Новые версии JavaScript не выбрасывают никаких евалеррор. Вместо этого используйте синтаксическая ошибка.

Ошибка диапазона

RangeError создается, если используется число, которое выходит за пределы диапазона правовых значений.

Например: нельзя задать число значащих цифр числа 500.

Ошибка ссылки

ReferenceError создается, если используется (ссылка) переменная, которая не была объявлена:

Синтаксическая ошибка

При попытке вычисления кода с ошибкой синтаксиса создается Синтаксическая ошибка.

Ошибка типа

Если используется значение, находящиеся вне диапазона ожидаемых типов, создается TypeError.

Ошибка URI

При использовании недопустимых символов в функции URI создается уриеррор :

Нестандартные свойства объекта Error

В этой статье мы познакомимся с инструкцией для обработки ошибок try...catch и throw для генерирования исключений.

Непойманные ошибки

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

Когда возникает ошибка, выполнение кода прекращается, и эта ошибка выводится в консоль:

const json = '{name:"Александр"}';
const person = JSON.parse(json); // Uncaught SyntaxError: Unexpected token n in JSON at position 1
console.log('Это сообщение мы не увидим!');

Выполнение этого примера остановится при парсинге строки JSON. В консоль будет выведена непойманная ошибка (uncaught error). Она так называется, потому что мы её не поймали (не обработали). Дальше код выполняться не будет и сообщение, которые мы выводим с помощью console.log() не отобразится.

Обработка ошибок в JavaScript осуществляется с помощью try...catch.

try...catch – это специальный синтаксис, состоящий из 2 блоков кода:

try {
  // блок кода, в котором имеется вероятность возникновения ошибки
} catch(error) {
  // этот блок выполняется только в случае возникновения ошибки в блоке try
}

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

Второй блок располагается за ключевым словом catch. В него помещаем код, который будет выполнен только в том случае, если в первом блоке возникнет ошибка. В круглых скобках после catch указываем параметр error. В этот параметр будет помещена ошибка, которая возникла в блоке try.

Код, приведённый выше мы обернули в try...catch, а именно ту его часть, в котором может возникнуть ошибка:

const text = '{name:"Александр"}';
try {
  const person = JSON.parse(text); // Uncaught SyntaxError: Unexpected token n in JSON at position 1
} catch(error) {
  console.error(error);
  console.log(error.message);
}
console.log('Это сообщение мы увидим!');

Здесь в блоке try произойдет ошибка, так как в данном примере мы специально присвоили переменной text некорректную строку JSON. В catch эта ошибка будет присвоена параметру error, и в нём мы будем просто выводить эту ошибку в консоль с помощью console.error(). Таким образом она будет выведена также красным цветом, но без слова Uncaught, т.к. эта ошибка была поймана.

Ошибка – это объект и у него имеются следующие свойства:

• message – описание ошибки;
• name – тип ошибки, например, RangeError при указании значения выходящего за пределы диапазона;
• stack – строка стека, которая используется в целях отладки; она позволяет узнать о том, что происходило в скрипте на момент возникновения ошибки.

В этом примере мы также написали инструкцию для вывода описание ошибки error.message в консоль с помощью console.log().

Пример функции для проверки корректности JSON:

const isValidJSON = (text) => {
  try {
    JSON.parse(text);
    return true;
  } catch {
    return false;
  }
}

При вызове функции, сначала будет выполняться инструкция JSON.parse(text). Если ошибки не возникнет, то возвратится значение true. В противном случае, интерпретатор перейдёт в секцию catch. В итоге будет возвращено false. Кстати здесь catch записан без указания круглых скобок и параметра внутри них. Эта возможность была добавлена в язык, начиная с версии ECMAScript 2019.

Блок «finally»

В JavaScript возможны три формы инструкции try:

• try...catch
• try...finally
• try...catch...finally

Блок finally выполняется всегда, независимо от того возникли ошибки в try или нет. Он выполняется после try, если ошибок не было, и после catch, если ошибки были. Секция finally не имеет параметров.

Пример с использованием finally:

let result = 0;
try {
  result = sum(10, 20);
  console.log('Это сообщение мы не увидим!');
} catch(error) {
  console.log(error.message);
} finally {
  console.log(result);
}

В этом примере произойдет ошибка в секции try, так как sum нигде не определена. После возникновения ошибки интерпретатор перейдём в catch. Здесь с помощью метода console.log() сообщение об ошибке будет выведено в консоль. Затем выполнится инструкция, находящаяся в блоке finally.

В JavaScript имеется также конструкция без catch:

try {
  // ...
} finally {
  // завершаем какие-то действия
}

Инструкция throw

В JavaScript имеется инструкция throw, которая позволяет генерировать ошибку.

Синтаксис инструкции throw:

throw expression;

Как правило, в качестве выражения обычно используют встроенный основной класс для ошибок Error или более конкретный, например: RangeError, ReferenceError, SyntaxError, TypeError, URIError или другой.

Создаём новый объект Error и выбрасываем его в качестве исключения:

throw new Error('Какое-то описание ошибки');

Пример генерирования синтаксической ошибки:

throw new SyntaxError('Описание ошибки');

В качестве выражения можно использовать не только объект ошибки, но и строки, числа, логические значения и другие величины. Но делать это не рекомендуется:

throw 'Значение не является числом';

При обнаружении оператора throw выполнение кода прекращается, и ошибка выбрасывается в консоль.

Например, создадим функцию, которая будет просто выбрасывать новую ошибку:

// создаём стрелочную функцию и присваиваем её переменной myFn
const myFn = () => {
  throw new Error('Описание ошибки');
}
// вызываем функцию
myFn();
console.log('Это сообщение мы не увидим в консоли!');

Для обработки ошибки обернём вызов функции в try...catch:

const myFn = () => {
  throw new Error('Описание ошибки');
}
try {
  myFn();
} catch(error) {
  console.error(error);
}
console.log('Это сообщение мы увидим в консоли!');

В этом примере вы увидите в консоли ошибку и дальше сообщение, которые мы выводим с помощью console.log(). То есть выполнение кода продолжится.

Кроме встроенных классов ошибок можно создать свои собственные, например, путем расширения Error:

class FormError extends Error {
  constructor(message) {
    super(message);
    this.name = 'FormError';
  }
}

Использование своего класса FormError для отображение ошибок формы:

<form novalidate>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <button type="submit">Отправить</button>
</form>

<script>
  class FormError extends Error {
    constructor(message) {
      super(message);
      this.name = 'FormError';
    }
  }
  const elForm = document.querySelector('form');
  elForm.onsubmit = (e) => {
    e.preventDefault();
    elForm.querySelectorAll('input').forEach((el) => {
      if (!el.checkValidity()) {
        try {
          throw new FormError(`[name="${el.name}"] ${el.validationMessage}`);
        } catch(error) {
          console.error(`${error.name} ${error.message}`);
        }
      }
    });
  }
</script>

Глобальная ловля ошибок

Возникновение ошибок, которые мы никак не обрабатываем с помощью try, можно очень просто перехватить посредством window.onerror:

window.onerror = function(message, source, lineno, colno, error) {
  // ...
}

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

• message — строка, содержащее сообщение об ошибке;
• source — URL-адрес скрипта или документа, в котором произошла ошибка;
• lineno и colno — соответственно номер строки и столбца, в которой произошла ошибка;
• error — объект ошибки или null, если соответствующий объект ошибки недоступен;

Передача ошибок на сервер

Что делать с этими ошибками? Их, например, можно передавать на сервер для того чтобы позже можно было проанализировать эти ошибки и принять меры по их устранению.

Пример кода для отправки ошибок, возникающих в браузере на сервер через AJAX с использованием fetch:

window.onerror = (message, source, lineno, colno) => {
  const err = { message, source, lineno, colno };
  fetch('/assets/php/error-log.php', {
    method: 'post',
    body: JSON.stringify(err)
  });
}

На сервере, если, например, сайт на PHP, можно написать такой простенький скрипт:

<?php
define('LOG_FILE', 'logs/' . date('Y-m-d') . '.log');
$json = file_get_contents('php://input');
$data = json_decode($json, true);
try {
  error_log('[' . date('d.m.Y h:i:s') . '] [' . $data['message'] . '] [' . $data['lineno'] . ', ' . $data['colno'] . '] [' . $data['source'] . '] [' . $_SERVER['HTTP_USER_AGENT'] . ']' . PHP_EOL, 3, LOG_FILE);
} catch(Exception $e) {
  $message = implode('; ', $data);
  error_log('[' . date('d.m.Y h:i:s') . '] [' . $message . '] [' . $_SERVER['HTTP_USER_AGENT'] . ']' . PHP_EOL, 3, LOG_FILE);
}

Его следует сохранить в файл /assets/php/error-log.php, а также в этом каталоге создать папку logs для сохранения в ней логов.

В результате когда на клиенте, то есть в браузере будет возникать JavaScript ошибки, они будут сохраняться на сервер в файл следующим образом: