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

С помощью 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 ошибки в коде ниже и исправьте их.

Задание 1

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

Try/Catch in JavaScript – How to Handle Errors in JS

Bugs and errors are inevitable in programming. A friend of mine calls them unknown features :).

Call them whatever you want, but I honestly believe that bugs are one of the things that make our work as programmers interesting.

I mean no matter how frustrated you might be trying to debug some code overnight, I am pretty sure you will have a good laugh when you find out that the problem was a simple comma you overlooked, or something like that. Although, an error reported by a client will bring about more of a frown than a smile.

That said, errors can be annoying and a real pain in the behind. That is why in this article, I want to explain something called try / catch in JavaScript.

What is a try/catch block in JavaScript?

A try / catch block is basically used to handle errors in JavaScript. You use this when you don’t want an error in your script to break your code.

While this might look like something you can easily do with an if statement, try/catch gives you a lot of benefits beyond what an if/else statement can do, some of which you will see below.

try{
//...
}catch(e){
//...
}

A try statement lets you test a block of code for errors.

A catch statement lets you handle that error. For example:

try{ 
getData() // getData is not defined 
}catch(e){
alert(e)
}

This is basically how a try/catch is constructed. You put your code in the try block, and immediately if there is an error, JavaScript gives the catch statement control and it just does whatever you say. In this case, it alerts you to the error.

All JavaScript errors are actually objects that contain two properties: the name (for example, Error, syntaxError, and so on) and the actual error message. That is why when we alert e, we get something like ReferenceError: getData is not defined.

Like every other object in JavaScript, you can decide to access the values differently, for example e.name(ReferenceError) and e.message(getData is not defined).

But honestly this is not really different from what JavaScript will do. Although JavaScript will respect you enough to log the error in the console and not show the alert for the whole world to see :).

What, then, is the benefit of try/catch statements?

How to use try/catch statements

The `throw` Statement

One of the benefits of try/catch is its ability to display your own custom-created error. This is called (throw error).

In situations where you don’t want this ugly thing that JavaScript displays, you can throw your error (an exception) with the use of the throw statement. This error can be a string, boolean, or object. And if there is an error, the catch statement will display the error you throw.

let num =prompt("insert a number greater than 30 but less than 40")
try { 
if(isNaN(num)) throw "Not a number (☉｡☉)!" 
else if (num>40) throw "Did you even read the instructions ಠ︵ಠ, less than 40"
else if (num <= 30) throw "Greater than 30 (ب_ب)" 
}catch(e){
alert(e) 
}

This is nice, right? But we can take it a step further by actually throwing an error with the JavaScript constructor errors.

Basically JavaScript categorizes errors into six groups:

EvalError — An error occurred in the eval function.
RangeError — A number out of range has occurred, for example 1.toPrecision(500). toPrecision basically gives numbers a decimal value, for example 1.000, and a number cannot have 500 of that.
ReferenceError — Using a variable that has not been declared
syntaxError — When evaluating a code with a syntax error
TypeError — If you use a value that is outside the range of expected types: for example 1.toUpperCase()
URI (Uniform Resource Identifier) Error — A URIError is thrown if you use illegal characters in a URI function.

So with all this, we could easily throw an error like throw new Error("Hi there"). In this case the name of the error will be Error and the message Hi there. You could even go ahead and create your own custom error constructor, for example:

function CustomError(message){ 
this.value ="customError";
this.message=message;
}

And you can easily use this anywhere with throw new CustomError("data is not defined").

So far we have learnt about try/catch and how it prevents our script from dying, but that actually depends. Let’s consider this example:

try{ 
console.log({{}}) 
}catch(e){ 
alert(e.message) 
} 
console.log("This should run after the logged details")

But when you try it out, even with the try statement, it still does not work. This is because there are two main types of errors in JavaScript (what I described above –syntaxError and so on – are not really types of errors. You can call them examples of errors): parse-time errors and runtime errors or exceptions.

Parse-time errors are errors that occur inside the code, basically because the engine does not understand the code.

For example, from above, JavaScript does not understand what you mean by {{}}, and because of that, your try / catch has no use here (it won’t work).

On the other hand, runtime errors are errors that occur in valid code, and these are the errors that try/catch will surely find.

try{ 
y=x+7 
} catch(e){ 
alert("x is not defined")
} 
alert("No need to worry, try catch will handle this to prevent your code from breaking")

Believe it or not, the above is valid code and the try /catch will handle the error appropriately.

The `Finally` statement

The finally statement acts like neutral ground, the base point or the final ground for your try/ catch block. With finally, you are basically saying no matter what happens in the try/catch (error or no error), this code in the finally statement should run. For example:

let data=prompt("name")
try{ 
if(data==="") throw new Error("data is empty") 
else alert(`Hi ${data} how do you do today`) 
} catch(e){ 
alert(e) 
} finally { 
alert("welcome to the try catch article")
}

Nesting try blocks

You can also nest try blocks, but like every other nesting in JavaScript (for example if, for, and so on), it tends to get clumsy and unreadable, so I advise against it. But that is just me.

Nesting try blocks gives you the advantage of using just one catch statement for multiple try statements. Although you could also decide to write a catch statement for each try block, like this:

try { 
try { 
throw new Error('oops');
} catch(e){
console.log(e) 
} finally { 
console.log('finally'); 
} 
} catch (ex) { 
console.log('outer '+ex); 
}

In this case, there won’t be any error from the outer try block because nothing is wrong with it. The error comes from the inner try block, and it is already taking care of itself (it has it own catch statement). Consider this below:

try { 
try { 
throw new Error('inner catch error'); 
} finally {
console.log('finally'); 
} 
} catch (ex) { 
console.log(ex);
}

This code above works a little bit differently: the error occurs in the inner try block with no catch statement but instead with a finally statement.

Note that try/catch can be written in three different ways: try...catch, try...finally, try...catch...finally), but the error is throw from this inner try.

The finally statement for this inner try will definitely work, because like we said earlier, it works no matter what happens in try/catch. But even though the outer try does not have an error, control is still given to its catch to log an error. And even better, it uses the error we created in the inner try statement because the error is coming from there.

If we were to create an error for the outer try, it would still display the inner error created, except the inner one catches its own error.

You can play around with the code below by commenting out the inner catch.

try { 
try { 
throw new Error('inner catch error');
} catch(e){ //comment this catch out
console.log(e) 
} finally { 
console.log('finally'); 
} 
throw new Error("outer catch error") 
} catch (ex) { 
console.log(ex);
}

The Rethrow Error

The catch statement actually catches all errors that come its way, and sometimes we might not want that. For example,

"use strict" 
let x=parseInt(prompt("input a number less than 5")) 
try{ 
y=x-10 
if(y>=5) throw new Error(" y is not less than 5") 
else alert(y) 
}catch(e){ 
alert(e) 
}

Let’s assume for a second that the number inputted will be less than 5 (the purpose of «use strict» is to indicate that the code should be executed in «strict mode»). With strict mode, you can not, for example, use undeclared variables (source).

I want the try statement to throw an error of y is not… when the value of y is greater than 5 which is close to impossible. The error above should be for y is not less… and not y is undefined.

In situations like this, you can check for the name of the error, and if it is not what you want, rethrow it:

"use strict" 
let x = parseInt(prompt("input a number less than 5"))
try{
y=x-10 
if(y>=5) throw new Error(" y is not less than 5") 
else alert(y) 
}catch(e){ 
if(e instanceof ReferenceError){ 
throw e
}else alert(e) 
}

This will simply rethrow the error for another try statement to catch or break the script here. This is useful when you want to only monitor a particular type of error and other errors that might occur as a result of negligence should break the code.

Conclusion

In this article, I have tried to explain the following concepts relating to try/catch:

What try /catch statements are and when they work
How to throw custom errors
What the finally statement is and how it works
How Nesting try / catch statements work
How to rethrow errors

Thank you for reading. Follow me on twitter @fakoredeDami.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Try/Catch in JavaScript – How to Handle Errors in JS

Bugs and errors are inevitable in programming. A friend of mine calls them unknown features :).

Call them whatever you want, but I honestly believe that bugs are one of the things that make our work as programmers interesting.

That said, errors can be annoying and a real pain in the behind. That is why in this article, I want to explain something called try / catch in JavaScript.

What is a try/catch block in JavaScript?

A try / catch block is basically used to handle errors in JavaScript. You use this when you don’t want an error in your script to break your code.

While this might look like something you can easily do with an if statement, try/catch gives you a lot of benefits beyond what an if/else statement can do, some of which you will see below.

try{
//...
}catch(e){
//...
}

A try statement lets you test a block of code for errors.

A catch statement lets you handle that error. For example:

try{ 
getData() // getData is not defined 
}catch(e){
alert(e)
}

Like every other object in JavaScript, you can decide to access the values differently, for example e.name(ReferenceError) and e.message(getData is not defined).

What, then, is the benefit of try/catch statements?

How to use try/catch statements

The `throw` Statement

One of the benefits of try/catch is its ability to display your own custom-created error. This is called (throw error).

let num =prompt("insert a number greater than 30 but less than 40")
try { 
if(isNaN(num)) throw "Not a number (☉｡☉)!" 
else if (num>40) throw "Did you even read the instructions ಠ︵ಠ, less than 40"
else if (num <= 30) throw "Greater than 30 (ب_ب)" 
}catch(e){
alert(e) 
}

This is nice, right? But we can take it a step further by actually throwing an error with the JavaScript constructor errors.

Basically JavaScript categorizes errors into six groups:

EvalError — An error occurred in the eval function.
RangeError — A number out of range has occurred, for example 1.toPrecision(500). toPrecision basically gives numbers a decimal value, for example 1.000, and a number cannot have 500 of that.
ReferenceError — Using a variable that has not been declared
syntaxError — When evaluating a code with a syntax error
TypeError — If you use a value that is outside the range of expected types: for example 1.toUpperCase()
URI (Uniform Resource Identifier) Error — A URIError is thrown if you use illegal characters in a URI function.

function CustomError(message){ 
this.value ="customError";
this.message=message;
}

And you can easily use this anywhere with throw new CustomError("data is not defined").

So far we have learnt about try/catch and how it prevents our script from dying, but that actually depends. Let’s consider this example:

try{ 
console.log({{}}) 
}catch(e){ 
alert(e.message) 
} 
console.log("This should run after the logged details")

Parse-time errors are errors that occur inside the code, basically because the engine does not understand the code.

For example, from above, JavaScript does not understand what you mean by {{}}, and because of that, your try / catch has no use here (it won’t work).

On the other hand, runtime errors are errors that occur in valid code, and these are the errors that try/catch will surely find.

try{ 
y=x+7 
} catch(e){ 
alert("x is not defined")
} 
alert("No need to worry, try catch will handle this to prevent your code from breaking")

Believe it or not, the above is valid code and the try /catch will handle the error appropriately.

The `Finally` statement

let data=prompt("name")
try{ 
if(data==="") throw new Error("data is empty") 
else alert(`Hi ${data} how do you do today`) 
} catch(e){ 
alert(e) 
} finally { 
alert("welcome to the try catch article")
}

Nesting try blocks

You can also nest try blocks, but like every other nesting in JavaScript (for example if, for, and so on), it tends to get clumsy and unreadable, so I advise against it. But that is just me.

Nesting try blocks gives you the advantage of using just one catch statement for multiple try statements. Although you could also decide to write a catch statement for each try block, like this:

try { 
try { 
throw new Error('oops');
} catch(e){
console.log(e) 
} finally { 
console.log('finally'); 
} 
} catch (ex) { 
console.log('outer '+ex); 
}

try { 
try { 
throw new Error('inner catch error'); 
} finally {
console.log('finally'); 
} 
} catch (ex) { 
console.log(ex);
}

This code above works a little bit differently: the error occurs in the inner try block with no catch statement but instead with a finally statement.

Note that try/catch can be written in three different ways: try...catch, try...finally, try...catch...finally), but the error is throw from this inner try.

If we were to create an error for the outer try, it would still display the inner error created, except the inner one catches its own error.

You can play around with the code below by commenting out the inner catch.

try { 
try { 
throw new Error('inner catch error');
} catch(e){ //comment this catch out
console.log(e) 
} finally { 
console.log('finally'); 
} 
throw new Error("outer catch error") 
} catch (ex) { 
console.log(ex);
}

The Rethrow Error

The catch statement actually catches all errors that come its way, and sometimes we might not want that. For example,

"use strict" 
let x=parseInt(prompt("input a number less than 5")) 
try{ 
y=x-10 
if(y>=5) throw new Error(" y is not less than 5") 
else alert(y) 
}catch(e){ 
alert(e) 
}

In situations like this, you can check for the name of the error, and if it is not what you want, rethrow it:

"use strict" 
let x = parseInt(prompt("input a number less than 5"))
try{
y=x-10 
if(y>=5) throw new Error(" y is not less than 5") 
else alert(y) 
}catch(e){ 
if(e instanceof ReferenceError){ 
throw e
}else alert(e) 
}

Conclusion

In this article, I have tried to explain the following concepts relating to try/catch:

What try /catch statements are and when they work
How to throw custom errors
What the finally statement is and how it works
How Nesting try / catch statements work
How to rethrow errors

Thank you for reading. Follow me on twitter @fakoredeDami.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Конструкция try...catch пытается выполнить инструкции в блоке try, и, в случае ошибки, выполняет блок catch.

Синтаксис

try {
   try_statements
}
[catch (exception_var_1 if condition_1) { // не стандартно
   catch_statements_1
}]
...
[catch (exception_var_2) {
   catch_statements_2
}]
[finally {
   finally_statements
}]

try_statements: Инструкции для выполнения.

catch_statements_1, catch_statements_2: Инструкции, которые будут выполнены, если произойдёт ошибка в блоке try.

exception_var_1, exception_var_2: Идентификатор для хранения объекта ошибки, который впоследствии используется в блоке catch

condition_1: Условное выражение.

finally_statements: Инструкции, которые выполняются после завершения блока try. Выполнение происходит в независимости от того, произошла ошибка или нет.

Описание

Конструкция try содержит блок try, в котором находится одна или несколько инструкций (Блок ({} ) обязательно должен присутствовать, даже если выполняется всего одна инструкция), и хотя бы один блок catch или finally. Таким образом, есть три основные формы конструкции try:

try {...} catch {...}
try {...} finally {...}
try {...} catch {...} finally {...}

Блок catch содержит инструкции, которые будут выполнены, если в блоке try произошла ошибка. Если любая инструкция в блоке try выбрасывает исключение, то управление сразу же переходит в блок catch. Если в блок try не было выброшено исключение, то блок catch не выполняется.

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

Вы можете использовать вложенные конструкции try. Если внутренняя конструкция try не имеет блока catch (такое может быть при её использовании в виде try {...} finaly {...}, потому что try {...} не может быть без блоков catch или finally), будет вызван сatch внешней конструкции try.

Конструкция try также используется для обработки исключений JavaScript (то есть, выброшенных внутренними функциями языка или парсером). Загляните в JavaScript руководство для дополнительной информации о JavaScript исключениях.

Безусловный блок catch

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

try {
   throw 'myException'; // создание исключения
}
catch (e) {
   // инструкции для обработки ошибок
   logMyErrors(e); // передать объект исключения обработчику ошибок
}

Блок catch задаёт идентификатор (e в примере выше) который содержит объект исключения (в примере выше — значение, переданное оператору throw). Область видимости этого объекта ограничивается блоком catch.

Условный блок `catch`

«Условные блоки catch» можно создавать, используя try...catch с if...else if...else, как здесь:

try {
  myroutine(); // может выбрасывать три вида исключений
} catch (e) {
  if (e instanceof TypeError) {
    // обработка исключения TypeError
  } else if (e instanceof RangeError) {
    // обработка исключения RangeError
  } else if (e instanceof EvalError) {
    // обработка исключения EvalError
  } else {
    // обработка остальных исключений
    logMyErrors(e); // передать обработчику ошибок
  }
}

Частый сценарий использования — обработать известные исключения, а при неизвестных ошибках, пробросить их дальше:

try {
  myRoutine();
} catch(e) {
  if (e instanceof RangeError) {
    // обработка известного исключения, с которым
    // понятно, что делать
  } else {
    throw e; // пробросить неизвестные ошибки
  }
}

Примечание: Обратите внимание: Firefox раньше поддерживал краткую запись условных блоков catch:

try {
  myroutine(); // может выбрасывать три вида исключения
} catch (e if e instanceof TypeError) {
  // обработка исключений TypeError
} catch (e if e instanceof RangeError) {
  // обработка исключений RangeError
} catch (e if e instanceof EvalError) {
  // обработка исключений EvalError
} catch (e) {
  // обработка остальных исключения
  logMyErrors(e);
}

Однако, такой синтаксис никогда не был частью спецификации ECMAScript и был удалён из Firefox после версии 59. Сейчас он не поддерживается ни в одном браузере.

Идентификатор исключения

Когда в блоке try выбрасывается исключение, exception_var (т. е. e в конструкции catch (e)) содержит значение исключения. Его можно использовать, чтобы получить больше информации об выброшенном исключении. Идентификатор доступен только в области видимости блока catch.

try {
  if (!firstValidation()) {
    throw 1;
  }
  if (!secondValidation()) {
    throw 2;
  }
} catch (e) {
  // Выводит 1 или 2 (если не произошло никаких других ошибок)
  console.log(e);
}

Блок finally

Блок finally содержит код который будет запущен после кода в блоках try и catch. Обратите внимание, что код в блоке finally запускается в независимости от того, было ли выброшено исключение или нет. Также код в блоке finally будет запущен вне зависимости от того, присутствует блок catch или нет. Блок finally можно использовать для того, чтобы скрипт безопасно завершил работу в случае ошибки. Например, если необходимо освободить память и ресурсы которые использовал скрипт.

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

function expensiveCalculations() {
  // Сложные вычисления
}

function maybeThrowError() {
  // Функция, которая может выбросить исключение
  if(Math.random() > 0.5) throw new Error()
}

try {
  // Теперь при прокрутке страницы будут происходить
  // сложные вычисления, что сильно скажется на
  // производительности
  window.addEventListener('scroll', expensiveCalculations)
  maybeThrowError()
} catch {
  // Если функция maybeThrowError выбросит исключения,
  // управление сразу перейдёт в блок catch и
  // сложные вычисления продолжат выполняться до
  // перезагрузки страницы
  maybeThrowError()
}
window.removeEventListener('scroll', expensiveCalculations)

В этом примере, если функция maybeThrowError выбросит исключение внутри блока try, управление перейдёт в блок catch. Если и в блоке catch эта функция тоже выбросит исключение, то выполнение кода прервётся, и обработчик события не будет снят, пока пользователь не перезагрузит страницу, что плохо скажется на скорости работы. Для того, чтобы избежать таких ситуаций, следует использовать блок finally:

try {
  window.addEventListener('scroll', expensiveCalculations)
  maybeThrowError()
} catch {
  maybeThrowError()
} finally {
  window.removeEventListener('scroll', expensiveCalculations)
}

Другой пример: работа с файлами. В следующем фрагменте кода показывается, как скрипт открывает файл и записывает в него какие-то данные (в серверном окружении JavaScript имеет доступ к файловой системе). Во время записи может произойти ошибка. Но после открытия файл очень важно закрыть, потому что незакрытый файл может привести к утечкам памяти. В таких случаях используется блок finally:

openMyFile();
try {
   // Сделать что-то с файлом
   writeMyFile(theData);
}
finally {
   closeMyFile(); // Закрыть файл, что бы ни произошло
}

Примеры

Вложенные блоки try

Для начала давайте посмотрим что делает этот код:

try {
  try {
    throw new Error('упс');
  }
  finally {
    console.log('finally');
  }
}
catch (e) {
  console.error('внешний блок catch', e.message);
}

// Вывод:
// "finally"
// "внешний блок catch" "упс"

Теперь отловим исключение во внутреннем блоке try, добавив к нему блок catch:

try {
  try {
    throw new Error('упс');
  }
  catch (e) {
    console.error('внутренний блок catch', e.message);
  }
  finally {
    console.log('finally');
  }
}
catch (e) {
  console.error('внешний блок catch', e.message);
}

// Output:
// "внутренний блок catch" "упс"
// "finally"

Наконец, пробросим ошибку

try {
  try {
    throw new Error('упс');
  }
  catch (e) {
    console.error('внутренний блок catch', e.message);
    throw e;
  }
  finally {
    console.log('finally');
  }
}
catch (e) {
  console.error('внешний блок catch', e.message);
}

// Вывод:
// "внутренний блок catch" "oops"
// "finally"
// "внешний блок catch" "oops"

Любое исключение будет передано только в ближайший блок catch, если он не пробросит его дальше. Все исключения, выброшенными внутренними блоками (потому что код в блоке catch также может выбросить исключение), будут пойманы внешними.

Возвращение значения из блока finally

Если блок finally возвращает какое-либо значение, оно становится значением, которое возвращает вся конструкция try...catch...finally, вне зависимости от любых инструкций return в блоках try и catch. Также игнорируются исключения, выброшенные блоком catch.

try {
  try {
    throw new Error('упс');
  }
  catch (e) {
    console.error('внутренний блок catch', e.message);
    throw e;
  }
  finally {
    console.log('finally');
    return;
  }
}
catch (e) {
  console.error('внешний блок catch', e.message);
}

// Output:
// "внутренний блок catch" "упс"
// "finally"

«упс» не доходит до внешнего блока из-за инструкции return в блоке finally. То же самое произойдёт с любым значением, возвращаемым из блока catch.

Спецификации

Specification
ECMAScript Language Specification # sec-try-statement

Совместимость

BCD tables only load in the browser

Смотрите также

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

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

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

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

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

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

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

Пример

В этом примере мы в место alert написали adddlert, чтобы намеренно выдать ошибку:

document.getElementById(«demo»).innerHTML = err.message;
}
</script>

Попробуйте сами »

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

JavaScript try и catch

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

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

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

try {
Блок кода для проверки
}
catch(err) {
Блок кода для обработки ошибок
}

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

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

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

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

Оператор throw

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

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

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

throw «Слишком большой»; // пропустить текст
throw 500; // пропустить число

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

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

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

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

<!DOCTYPE html>
<html>
<body>

<p>Пожалуйста, введите число от 5 до 10:</p>

<input id=»demo» type=»text»>
<button type=»button»
onclick=»myFunction()»>Ввод текста</button>
<p id=»p01″></p>

try {
if(x == «») throw «пусто»;

if(isNaN(x)) throw «не число»;

x = Number(x);
    if(x < 5) throw
«слишком маленькое»;
    if(x > 10) throw «слишком
большое»;
  }
  catch(err) {
    message.innerHTML =
«Вывод » + err;
  }
}
</script>

</body>
</html>

Попробуйте сами »

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

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

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

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

Оператор finally

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

Синтаксис

try {
блок кода для попытки обнаружить ошибки
}
catch(err) {
блок кода для обработки поймать ошибки
}

finally {
блок кода, который будет выполняться независимо от результата try/catch
}

Пример

function myFunction() {
var message, x;
message =
document.getElementById(«p01»);
message.innerHTML = «»;
x =
document.getElementById(«demo»).value;

try {

if(x == «») throw «пусто»;
if(isNaN(x))
throw «не число»;

x = Number(x);
    if(x >
10) throw «слишком большое»;
    if(x <
5) throw «слишком маленькое»;
  }
  catch(err)
{
    message.innerHTML = «Ошибка: » +
err + «.»;
  }
  finally {
    document.getElementById(«demo»).value = «»;
  }
}

Попробуйте сами »

Объект Error

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

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

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

Свойство	Описание
имя	Задает или возвращает имя ошибки
сообщение	Устанавливает или возвращает сообщение об ошибке (строку)

Значения Error Name

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

Error Name	Описание
EvalError	Произошла ошибка в функции eval()
RangeError	Произошло число «вне допустимого диапазона»
ReferenceError	Произошла недопустимая ссылка
SyntaxError	Произошла синтаксическая ошибка
TypeError	Произошла ошибка типа
URIError	Произошла ошибка в encodeURI()

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

Ошибка EvalError

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

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

Ошибка RangeError

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

Mozilla и Microsoft определяют некоторые нестандартные свойства объекта ошибки:

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Не используйте эти свойства на общедоступных веб-сайтах. Они не будут работать во всех браузерах.

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

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

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

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

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

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

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

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

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

В следующем примере, чтобы умышленно создать ошибку, мы вместо команды alert написали adddlert:


<p id="demo"></p>

<script>
try {
    adddlert("Добро пожаловать, гость!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

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

Операторы try и catch

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

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

Операторы try и catch всегда используются в паре:


try {
     // проверяемый блок кода
}
 catch(err) {
     // блок кода для обработки ошибок
}

JavaScript генерирует ошибки

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

Если говорить техническими терминами, то интерпретатор JavaScript сгенерирует исключение (сгенерирует ошибку).

На самом деле интерпретатор JavaScript создаст объект Error с двумя свойствами — name и message.

Оператор throw

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

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

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


throw "Слишком большой";
throw 500;

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

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

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

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


<!DOCTYPE html>
<html>
<body>

<p>Введите число от 5 до 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Проверка ввода</button>
<p id="p01"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("p01");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "пусто";
        if(isNaN(x)) throw "не число";
        x = Number(x);
        if(x < 5) throw "слишком мало";
        if(x > 10) throw "слишком много";
    }
    catch(err) {
        message.innerHTML = "Вы ввели " + err;
    }
}
</script>

</body>
</html>

HTML проверка

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

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


<input id="demo" type="number" min="5" max="10" step="1" >

Оператор finally

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


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

Пример:


function myFunction() {
    var message, x;
    message = document.getElementById("p01");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try {
        if(x == "") throw "пусто";
        if(isNaN(x)) throw "не число";
        x = Number(x);
        if(x < 5) throw "слишком мало";
        if(x > 10) throw "слишком много";
    }
    catch(err) {
        message.innerHTML = "Ошибка: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Объект Error

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

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

Свойство	Описание
name	Устанавливает или возвращает имя ошибки
message	Устанавливает или возвращает сообщение об ошибке (строку)

Значения свойства name

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

Имя ошибки	Описание
EvalError	Ошибка в функции eval()
RangeError	Число «за пределами диапазона»
ReferenceError	Недопустимая ссылка (обращение)
SyntaxError	Синтаксическая ошибка
TypeError	Ошибка типов
URIError	Ошибка в encodeURI()

EvalError

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

В более новых версиях JavaScript никогда не генерируется ошибка EvalError. Вместо нее используется SyntaxError.

RangeError

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

Например, нельзя задать число с 500 знаковыми цифрами.


var num = 1;
try {
    num.toPrecision(500);   // Число не может иметь 500 знаковых цифр
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ReferenceError

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


var x;
try {
    x = y + 1;   // нельзя использовать (ссылаться на) переменную y
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

SyntaxError

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


try {
    eval("alert('Hello)");   // Пропуск ' приведет к синтаксической ошибке
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

TypeError

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


var num = 1;
try {
    num.toUpperCase();   // Нельзя преобразовать число в верхний регистр
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

URIError

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


try {
    decodeURI("%%%");   // Нельзя декодировать эти символы процентов
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

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

Mozilla и Microsoft определяют ряд нестандартных свойств объекта Error:

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Никогда не используйте эти свойства в публичном веб-сайте. Они не будут работать во всех браузерах.

Источник

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

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

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

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

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

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

В следующем примере, чтобы умышленно создать ошибку, мы вместо команды alert написали adddlert:


<p id="demo"></p>

<script>
try {
    adddlert("Добро пожаловать, гость!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

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

Операторы try и catch

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

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

Операторы try и catch всегда используются в паре:


try {
     // проверяемый блок кода
}
 catch(err) {
     // блок кода для обработки ошибок
}

JavaScript генерирует ошибки

Если говорить техническими терминами, то интерпретатор JavaScript сгенерирует исключение (сгенерирует ошибку).

На самом деле интерпретатор JavaScript создаст объект Error с двумя свойствами — name и message.

Оператор throw

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

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

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


throw "Слишком большой";
throw 500;

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

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


<!DOCTYPE html>
<html>
<body>

<p>Введите число от 5 до 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Проверка ввода</button>
<p id="p01"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("p01");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "пусто";
        if(isNaN(x)) throw "не число";
        x = Number(x);
        if(x < 5) throw "слишком мало";
        if(x > 10) throw "слишком много";
    }
    catch(err) {
        message.innerHTML = "Вы ввели " + err;
    }
}
</script>

</body>
</html>

HTML проверка

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


<input id="demo" type="number" min="5" max="10" step="1" >

Оператор finally

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


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

Пример:


function myFunction() {
    var message, x;
    message = document.getElementById("p01");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try {
        if(x == "") throw "пусто";
        if(isNaN(x)) throw "не число";
        x = Number(x);
        if(x < 5) throw "слишком мало";
        if(x > 10) throw "слишком много";
    }
    catch(err) {
        message.innerHTML = "Ошибка: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Объект Error

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

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

Свойство	Описание
name	Устанавливает или возвращает имя ошибки
message	Устанавливает или возвращает сообщение об ошибке (строку)

Значения свойства name

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

Имя ошибки	Описание
EvalError	Ошибка в функции eval()
RangeError	Число «за пределами диапазона»
ReferenceError	Недопустимая ссылка (обращение)
SyntaxError	Синтаксическая ошибка
TypeError	Ошибка типов
URIError	Ошибка в encodeURI()

EvalError

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

В более новых версиях JavaScript никогда не генерируется ошибка EvalError. Вместо нее используется SyntaxError.

RangeError

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

Например, нельзя задать число с 500 знаковыми цифрами.


var num = 1;
try {
    num.toPrecision(500);   // Число не может иметь 500 знаковых цифр
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ReferenceError


var x;
try {
    x = y + 1;   // нельзя использовать (ссылаться на) переменную y
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

SyntaxError

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


try {
    eval("alert('Hello)");   // Пропуск ' приведет к синтаксической ошибке
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

TypeError

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


var num = 1;
try {
    num.toUpperCase();   // Нельзя преобразовать число в верхний регистр
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

URIError

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


try {
    decodeURI("%%%");   // Нельзя декодировать эти символы процентов
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

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

Mozilla и Microsoft определяют ряд нестандартных свойств объекта Error:

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Никогда не используйте эти свойства в публичном веб-сайте. Они не будут работать во всех браузерах.

Источник

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

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

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

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

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

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

throw new Error('something went wrong')

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

Начинающие JS-программисты обычно не используют инструкцию throw. Они, как правило, сталкиваются с исключениями, выдаваемыми либо средой выполнения языка, либо сторонними библиотеками. Когда это происходит — в консоль попадает нечто вроде ReferenceError: fs is not defined и выполнение программы останавливается.

▍Объект Error

У экземпляров объекта Error есть несколько свойств, которыми мы можем пользоваться. Первое интересующее нас свойство — message. Именно сюда попадает та строка, которую можно передать конструктору ошибки в качестве аргумента. Например, ниже показано создание экземпляра объекта Error и вывод в консоль переданной конструктором строки через обращение к его свойству message.

const myError = new Error('please improve your code')
console.log(myError.message) // please improve your code

Второе свойство объекта, очень важное, представляет собой трассировку стека ошибки. Это — свойство stack. Обратившись к нему можно просмотреть стек вызовов (историю ошибки), который показывает последовательность операций, приведшую к неправильной работе программы. В частности, это позволяет понять — в каком именно файле содержится сбойный код, и увидеть, какая последовательность вызовов функций привела к ошибке. Вот пример того, что можно увидеть, обратившись к свойству stack.

Error: please improve your code
 at Object.<anonymous> (/Users/gisderdube/Documents/_projects/hacking.nosync/error-handling/src/general.js:1:79)
 at Module._compile (internal/modules/cjs/loader.js:689:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
 at Module.load (internal/modules/cjs/loader.js:599:32)
 at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
 at Function.Module._load (internal/modules/cjs/loader.js:530:3)
 at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
 at startup (internal/bootstrap/node.js:266:19)
 at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

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

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

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

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

Блок try...catch представляет собой самый простой способ обработки ошибок, о котором часто забывают. В наши дни, правда, он используется гораздо интенсивнее чем раньше, благодаря тому, что его можно применять для обработки ошибок в конструкциях async/await.

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

const a = 5

try {
    console.log(b) // переменная b не объявлена - возникает ошибка
} catch (err) {
    console.error(err) // в консоль попадает сообщение об ошибке и стек ошибки
}

console.log(a) // выполнение скрипта не останавливается, данная команда выполняется

Если бы в этом примере мы не заключили бы сбойную команду console.log(b) в блок try...catch, то выполнение скрипта было бы остановлено.

▍Блок finally

Иногда случается так, что некий код нужно выполнить независимо от того, произошла ошибка или нет. Для этого можно, в конструкции try...catch, использовать третий, необязательный, блок — finally. Часто его использование эквивалентно некоему коду, который идёт сразу после try...catch, но в некоторых ситуациях он может пригодиться. Вот пример его использования.

const a = 5

try {
    console.log(b) // переменная b не объявлена - возникает ошибка
} catch (err) {
    console.error(err) // в консоль попадает сообщение об ошибке и стек ошибки
} finally {
    console.log(a) // этот код будет выполнен в любом случае
}

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

Программируя на JavaScript всегда стоит обращать внимание на участки кода, выполняющиеся асинхронно. Если у вас имеется асинхронная функция и в ней возникает ошибка, скрипт продолжит выполняться. Когда асинхронные механизмы в JS реализуются с использованием коллбэков (кстати, делать так не рекомендуется), соответствующий коллбэк (функция обратного вызова) обычно получает два параметра. Это нечто вроде параметра err, который может содержать ошибку, и result — с результатами выполнения асинхронной операции. Выглядит это примерно так:

myAsyncFunc(someInput, (err, result) => {
    if(err) return console.error(err) // порядок работы с объектом ошибки мы рассмотрим позже
    console.log(result)
})

Если в коллбэк попадает ошибка, она видна там в виде параметра err. В противном случае в этот параметр попадёт значение undefined или null. Если оказалось, что в err что-то есть, важно отреагировать на это, либо так как в нашем примере, воспользовавшись командой return, либо воспользовавшись конструкцией if...else и поместив в блок else команды для работы с результатом выполнения асинхронной операции. Речь идёт о том, чтобы, в том случае, если произошла ошибка, исключить возможность работы с результатом, параметром result, который в таком случае может иметь значение undefined. Работа с таким значением, если предполагается, например, что оно содержит объект, сама может вызвать ошибку. Скажем, это произойдёт при попытке использовать конструкцию result.data или подобную ей.

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

Для выполнения асинхронных операций в JavaScript лучше использовать не коллбэки а промисы. Тут, в дополнение к улучшенной читабельности кода, имеются и более совершенные механизмы обработки ошибок. А именно, возиться с объектом ошибки, который может попасть в функцию обратного вызова, при использовании промисов не нужно. Здесь для этой цели предусмотрен специальный блок catch. Он перехватывает все ошибки, произошедшие в промисах, которые находятся до него, или все ошибки, которые произошли в коде после предыдущего блока catch. Обратите внимание на то, что если в промисе произошла ошибка, для обработки которой нет блока catch, это не остановит выполнение скрипта, но сообщение об ошибке будет не особенно удобочитаемым.

(node:7741) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: something went wrong
(node:7741) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. */

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

Promise.resolve(1)
    .then(res => {
        console.log(res) // 1

        throw new Error('something went wrong')

        return Promise.resolve(2)
    })
    .then(res => {
        console.log(res) // этот блок выполнен не будет
    })
    .catch(err => {
        console.error(err) // о том, что делать с этой ошибкой, поговорим позже
        return Promise.resolve(3)
    })
    .then(res => {
        console.log(res) // 3
    })
    .catch(err => {
        // этот блок тут на тот случай, если в предыдущем блоке возникнет какая-нибудь ошибка
        console.error(err)
    })

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

После того, как в JavaScript появилась конструкция async/await, мы вернулись к классическому способу обработки ошибок — к try...catch...finally. Обрабатывать ошибки при таком подходе оказывается очень легко и удобно. Рассмотрим пример.

;(async function() {
    try {
        await someFuncThatThrowsAnError()
    } catch (err) {
        console.error(err) // об этом поговорим позже
    }

    console.log('Easy!') // будет выполнено
})()

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

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

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

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

Универсальная обработка ошибок — некий базовый механизм, подходящий для обработки любых ошибок, в ходе работы которого просто выдаётся сообщение наподобие Something went wrong, please try again or contact us, предлагающее пользователю попробовать выполнить операцию, давшую сбой, ещё раз или связаться с владельцем сервера. Эта система не отличается особой интеллектуальностью, но она, по крайней мере, способна сообщить пользователю о том, что что-то пошло не так. Подобное сообщение гораздо лучше, чем «бесконечная загрузка» или нечто подобное.
Обработка конкретных ошибок — механизм, позволяющий сообщить пользователю подробные сведения о причинах неправильного поведения системы и дать ему конкретные советы по борьбе с неполадкой. Например, это может касаться отсутствия неких важных данных в запросе, который пользователь отправляет на сервер, или в том, что в базе данных уже существует некая запись, которую он пытается добавить ещё раз, и так далее.

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

Здесь мы воспользуемся стандартным классом Error и расширим его. Пользоваться механизмами наследования в JavaScript — дело рискованное, но в данном случае эти механизмы оказываются весьма полезными. Зачем нам наследование? Дело в том, что нам, для того, чтобы код удобно было бы отлаживать, нужны сведения о трассировке стека ошибки. Расширяя стандартный класс Error, мы, без дополнительных усилий, получаем возможности по трассировке стека. Мы добавляем в наш собственный объект ошибки два свойства. Первое — это свойство code, доступ к которому можно будет получить с помощью конструкции вида err.code. Второе — свойство status. В него будет записываться код состояния HTTP, который планируется передавать клиентской части приложения.

Вот как выглядит класс CustomError, код которого оформлен в виде модуля.

class CustomError extends Error {
    constructor(code = 'GENERIC', status = 500, ...params) {
        super(...params)

        if (Error.captureStackTrace) {
            Error.captureStackTrace(this, CustomError)
        }

        this.code = code
        this.status = status
    }
}

module.exports = CustomError

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

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

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

{
    error: 'SOME_ERROR_CODE',
    description: 'Something bad happened. Please try again or contact support.'
}

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

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

const express = require('express')
const router = express.Router()
const CustomError = require('../CustomError')

router.use(async (req, res) => {
    try {
        const route = require(`.${req.path}`)[req.method]

        try {
            const result = route(req) // Передаём запрос функции route
            res.send(result) // Передаём клиенту то, что получено от функции route
        } catch (err) {
            /*
            Сюда мы попадаем в том случае, если в функции route произойдёт ошибка
            */
            if (err instanceof CustomError) {
                /* 
                Если ошибка уже обработана - трансформируем её в 
                возвращаемый объект
                */

                return res.status(err.status).send({
                    error: err.code,
                    description: err.message,
                })
            } else {
                console.error(err) // Для отладочных целей

                // Общая ошибка - вернём универсальный объект ошибки
                return res.status(500).send({
                    error: 'GENERIC',
                    description: 'Something went wrong. Please try again or contact support.',
                })
            }
        }
    } catch (err) {
        /* 
         Сюда мы попадём, если запрос окажется неудачным, то есть,
         либо не будет найдено файла, соответствующего пути, переданному
         в запросе, либо не будет экспортированной функции с заданным
         методом запроса
        */
        res.status(404).send({
            error: 'NOT_FOUND',
            description: 'The resource you tried to access does not exist.',
        })
    }
})

module.exports = router

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

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

const CustomError = require('../CustomError')

const GET = req => {
    // пример успешного выполнения запроса
    return { name: 'Rio de Janeiro' }
}

const POST = req => {
    // пример ошибки общего характера
    throw new Error('Some unexpected error, may also be thrown by a library or the runtime.')
}

const DELETE = req => {
    // пример ошибки, обрабатываемой особым образом
    throw new CustomError('CITY_NOT_FOUND', 404, 'The city you are trying to delete could not be found.')
}

const PATCH = req => {
    // пример перехвата ошибок и использования CustomError
    try {
        // тут случилось что-то нехорошее
        throw new Error('Some internal error')
    } catch (err) {
        console.error(err) // принимаем решение о том, что нам тут делать

        throw new CustomError(
            'CITY_NOT_EDITABLE',
            400,
            'The city you are trying to edit is not editable.'
        )
    }
}

module.exports = {
    GET,
    POST,
    DELETE,
    PATCH,
}

В этих примерах с самими запросами ничего не делается. Тут просто рассматриваются разные сценарии возникновения ошибок. Итак, например, запрос GET /city попадёт в функцию const GET = req =>..., запрос POST /city попадёт в функцию const POST = req =>... и так далее. Эта схема работает и при использовании параметров запросов. Например — для запроса вида GET /city?startsWith=R. В целом, здесь продемонстрировано, что при обработке ошибок, во фронтенд может попасть либо общая ошибка, содержащая лишь предложение попробовать снова или связаться с владельцем сервера, либо ошибка, сформированная с использованием конструктора CustomError, которая содержит подробные сведения о проблеме.
Данные общей ошибки придут в клиентскую часть приложения в таком виде:

{
    error: 'GENERIC',
    description: 'Something went wrong. Please try again or contact support.'
}

Конструктор CustomError используется так:

throw new CustomError('MY_CODE', 400, 'Error description')

Это даёт следующий JSON-код, передаваемый во фронтенд:

{
    error: 'MY_CODE',
    description: 'Error description'
}

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

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

3. Работа с ошибками на клиенте

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

▍Сохранение сведений об ошибках в состоянии приложения

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

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

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

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

Здесь будет использоваться встроенная в React система управления состоянием приложения, но, при необходимости, вы можете воспользоваться и специализированными решениями для управления состоянием — такими, как MobX или Redux.

▍Глобальные ошибки

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

Сообщение о глобальной ошибке

Теперь взглянем на код, который хранится в файле Application.js.

import React, { Component } from 'react'

import GlobalError from './GlobalError'

class Application extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
        }

        this._resetError = this._resetError.bind(this)
        this._setError = this._setError.bind(this)
    }

    render() {
        return (
            <div className="container">
                <GlobalError error={this.state.error} resetError={this._resetError} />
                <h1>Handling Errors</h1>
            </div>
        )
    }

    _resetError() {
        this.setState({ error: '' })
    }

    _setError(newError) {
        this.setState({ error: newError })
    }
}

export default Application

Как видно, в состоянии, в Application.js, имеется место для хранения данных ошибки. Кроме того, тут предусмотрены методы для сброса этих данных и для их изменения.

Ошибка и метод для сброса ошибки передаётся компоненту GlobalError, который отвечает за вывод сообщения об ошибке на экран и за сброс ошибки после нажатия на значок x в поле, где выводится сообщение. Вот код компонента GlobalError (файл GlobalError.js).

import React, { Component } from 'react'

class GlobalError extends Component {
    render() {
        if (!this.props.error) return null

        return (
            <div
                style={{
                    position: 'fixed',
                    top: 0,
                    left: '50%',
                    transform: 'translateX(-50%)',
                    padding: 10,
                    backgroundColor: '#ffcccc',
                    boxShadow: '0 3px 25px -10px rgba(0,0,0,0.5)',
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                {this.props.error}
                 
                <i
                    className="material-icons"
                    style={{ cursor: 'pointer' }}
                    onClick={this.props.resetError}
                >
                    close
                </font></i>
            </div>
        )
    }
}

export default GlobalError

Обратите внимание на строку if (!this.props.error) return null. Она указывает на то, что при отсутствии ошибки компонент ничего не выводит. Это предотвращает постоянный показ красного прямоугольника на странице. Конечно, вы, при желании, можете поменять внешний вид и поведение этого компонента. Например, вместо того, чтобы сбрасывать ошибку по нажатию на x, можно задать тайм-аут в пару секунд, по истечении которого состояние ошибки сбрасывается автоматически.

Теперь, когда всё готово для работы с глобальными ошибками, для задания глобальной ошибки достаточно воспользоваться _setError из Application.js. Например, это можно сделать в том случае, если сервер, после обращения к нему, вернул сообщение об общей ошибке (error: 'GENERIC'). Рассмотрим пример (файл GenericErrorReq.js).

import React, { Component } from 'react'
import axios from 'axios'

class GenericErrorReq extends Component {
    constructor(props) {
        super(props)

        this._callBackend = this._callBackend.bind(this)
    }

    render() {
        return (
            <div>
                <button onClick={this._callBackend}>Click me to call the backend</button>
            </div>
        )
    }

    _callBackend() {
        axios
            .post('/api/city')
            .then(result => {
                // сделать что-нибудь с результатом в том случае, если запрос оказался успешным
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                }
            })
    }
}

export default GenericErrorReq

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

▍Обработка специфических ошибок, возникающих при выполнении запросов

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

Сообщение о специфической ошибке

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

import React, { Component } from 'react'
import axios from 'axios'

import InlineError from './InlineError'

class SpecificErrorRequest extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
        }

        this._callBackend = this._callBackend.bind(this)
    }

    render() {
        return (
            <div>
                <button onClick={this._callBackend}>Delete your city</button>
                <InlineError error={this.state.error} />
            </div>
        )
    }

    _callBackend() {
        this.setState({
            error: '',
        })

        axios
            .delete('/api/city')
            .then(result => {
                // сделать что-нибудь с результатом в том случае, если запрос оказался успешным
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                } else {
                    this.setState({
                        error: err.response.data.description,
                    })
                }
            })
    }
}

export default SpecificErrorRequest

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

▍Ошибки, возникающие в клиентской части приложения

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

В поле ничего нет, мы сообщаем об этом пользователю

Вот код файла SpecificErrorFrontend.js, реализующий вышеописанный функционал.

import React, { Component } from 'react'
import axios from 'axios'

import InlineError from './InlineError'

class SpecificErrorRequest extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
            city: '',
        }

        this._callBackend = this._callBackend.bind(this)
        this._changeCity = this._changeCity.bind(this)
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.city}
                    style={{ marginRight: 15 }}
                    onChange={this._changeCity}
                />
                <button onClick={this._callBackend}>Delete your city</button>
                <InlineError error={this.state.error} />
            </div>
        )
    }

    _changeCity(e) {
        this.setState({
            error: '',
            city: e.target.value,
        })
    }

    _validate() {
        if (!this.state.city.length) throw new Error('Please provide a city name.')
    }

    _callBackend() {
        this.setState({
            error: '',
        })

        try {
            this._validate()
        } catch (err) {
            return this.setState({ error: err.message })
        }

        axios
            .delete('/api/city')
            .then(result => {
                // сделать что-нибудь с результатом в том случае, если запрос оказался успешным
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                } else {
                    this.setState({
                        error: err.response.data.description,
                    })
                }
            })
    }
}

export default SpecificErrorRequest

▍Интернационализация сообщений об ошибках с использованием кодов ошибок

Возможно, сейчас вы задаётесь вопросом о том, зачем нам нужны коды ошибок (наподобие GENERIC), если мы показываем пользователю только сообщения об ошибках, полученных с сервера. Дело в том, что, по мере роста и развития приложения, оно, вполне возможно, выйдет на мировой рынок, а это означает, что настанет время, когда создателям приложения нужно будет задуматься о поддержке им нескольких языков. Коды ошибок позволяют отличать их друг от друга и выводить сообщения о них на языке пользователя сайта.

Итоги

Надеемся, теперь у вас сформировалось понимание того, как можно работать с ошибками в веб-приложениях. Нечто вроде console.error(err) следует использовать только в отладочных целях, в продакшн подобные вещи, забытые программистом, проникать не должны. Упрощает решение задачи логирования использование какой-нибудь подходящей библиотеки наподобие loglevel.

Уважаемые читатели! Как вы обрабатываете ошибки в своих проектах?

Источник

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

Ваш набор инструментов для борьбы с ошибками

1. Оператор печати

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

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

2. Отладчик

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

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

3. Система отслеживания ошибок

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

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

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

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

4. Верификация программ

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

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

5. Контроль версий

Также как и использование системы отслеживания ошибок, применение системы контроля версии – это самая лучшая практика в разработке программного обеспечения, которая не может быть игнорирована при разработке любого проекта значительного размера.

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

6. Модульность

Плохо спроектированный код – это главный источник трудно исправляемых ошибок. Если код легко понять, и он может быть « выполнен » в уме или на бумаге, есть большая вероятность, что программисты смогут быстро находить и исправлять ошибки.

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

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

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

7. Автоматизированные тесты

Модульные тесты и другие типы автоматизированных тестов идут рука об руку с модульным программированием.

Автоматизированный код – это участок кода, который выполняет программу с определенными входными параметрами и проверяет, соответствует ли поведение программы ожидаемому.

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

8. Метод «Плюшевый мишка» (или отладка «Резиновая уточка»)

Если верить легендам программирования Брайану Кернигану и Робу Пайку (Brain Kernighan и Rob Pike), отладка по типу «Резиновая уточка» возникла в университетском компьютерном центре, где студенты должны были садиться напротив плюшевого мишки и объяснять ему их ошибки, прежде чем обращаться за помощью к живому человеку.

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

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

9. Пишите комментарии к коду

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

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

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

10. Пишите документацию

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

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

На пути к мастерству: избавляемся от ошибок

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

Какими из этих 10 средств отладки вы пользуетесь сейчас? Какими вы могли бы начать пользоваться с сегодняшнего дня? Какие из этих инструментов требуют времени на практику и освоения новых навыков?

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

Тестирование и поиск ошибок: в чем разница

Это для опытного специалиста разница очевидна. А для начинающего между этими двумя процессами обычно стоит знак равно. Давайте раз и навсегда закроем вопрос о том, почему тестирование и поиск багов — это разные вещи.

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

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

Поиск багов

Итак, моя задача — найти баги. Что я буду делать? Искать как можно больше багов. Это логично. А чем больше я их найду, тем лучше. Ну и тем моя ценность, как сотрудника, выше.

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

Также не важно насколько абсурдными будут действия. Главное, что они приведут к багу. Никто не будет нажимать 100 раз подряд на эту кнопку? Не важно, зато это приводит к ошибке. Правда пропущу много критических, ведь буду копаться только там, где возможно большая концентрация багов.

А что делать с багами, которые сложно воспроизвести? Давайте подумаем: лучше найти 1 серьезный, но сложно воспроизводимый, баг или 10 обычных. Конечно 10 обычных. Ведь задача просто найти баги. И чем больше, тем лучше.

Что мы имеем в итоге?

Тестирование

Теперь к тестированию. Какими наши действия будут тут?

Задача тестирования — не найти ошибки, а проверить корректность работы программы. То есть на выходе мы должны иметь не 100 найденных багов, а работающий продукт.

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

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

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

Что мы имеем в итоге?

Разница

Давайте на примере из жизни. Есть стиральная машина. При поиске ошибок мы будем пробовать нажать на кнопку выключения 50 раз подряд. Потом во время стирки покрутим переключатель программ во все стороны 20 минут без перерыва.
Но мы не проверим, запускается ли она при одинарном нажатии на кнопку пуск или нет. Ведь в этом месте вряд ли найдется ошибка. А если в этом месте она будет, то мне, как пользователю, такая стиральная машинка будет не нужна и я от нее откажусь.

А теперь ближе к тестированию. Возьмем сайт по заказу пиццы. Где искать ошибки? Конечно будем добавлять в корзину невообразимое количество пицц. Еще попробуем уменьшать и увеличивать количество персон 50 раз подряд. Потом в поле отправки заказа будем вводить такое, что просто не вообразить.
А банальную проверку отправки заказа обойдем стороной. И если там был баг, то никто не сможет оформить заказ.

Чувствуете разницу? Она просто колоссальная.

В случае с поиском ошибок мы по факту совсем не заботимся о качестве продукта.

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

Как верно отметил Дмитрий Безносов, продукт может быть без единого дефекта (условно), но совершенно непригоден к использованию юзерами как в плане UI/IX, так и в плане функциональности.

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

Кто-то может сказать, что я сильно преувеличиваю. Может в краткосрочной перспективе так и покажется. Но на длинной дистанции однозначно придем к тому, что продукт перестанет соответствовать ожиданиям пользователей и от него попросту отвернутся.

Источники:

https://www. internet-technologies. ru/articles/10-sovetov-dlya-otladki-i-ustraneniya-nepoladok-v-programmirovanii. html

https://sedtest-school. ru/foundation/testirovanie-i-poisk-oshibok-v-chem-raznicza/

Источник

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

Блок finally

Команда throw

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

What is a try/catch block in JavaScript?

How to use try/catch statements

The throw Statement

The Finally statement

Nesting try blocks

The Rethrow Error

Conclusion

What is a try/catch block in JavaScript?

How to use try/catch statements

The throw Statement

The Finally statement

Nesting try blocks

The Rethrow Error

Conclusion

Синтаксис

Описание

Безусловный блок catch

Условный блок catch

Идентификатор исключения

Блок finally

Примеры

Вложенные блоки try

Возвращение значения из блока finally

Спецификации

Совместимость

Смотрите также

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

Пример

JavaScript try и catch

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

Оператор throw

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

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

Оператор finally

Синтаксис

Пример

Объект Error

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

Значения Error Name

Ошибка EvalError

Ошибка RangeError

Пример

Ошибка ReferenceError

Пример

Ошибка SyntaxError

Пример

Ошибка TypeError

Пример

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

Пример

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

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

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

Операторы try и catch

JavaScript генерирует ошибки

Оператор throw

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

HTML проверка

Оператор finally

Объект Error

Значения свойства name

EvalError

RangeError

ReferenceError

SyntaxError

TypeError

URIError

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

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

Операторы try и catch

JavaScript генерирует ошибки

Оператор throw

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

HTML проверка

Оператор finally

Объект Error

The `throw` Statement

The `Finally` statement

The `throw` Statement

The `Finally` statement

Условный блок `catch`