меню

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

1. Перехват всех ошибок.

Если вы хотите перехватить все возможные исключения в своем коде, вы можете использовать блок catch. Например:

  
try {
  // ...
} catch {
  // ...
}
 

Этот метод позволит перехватить все исключения, включая ошибки синтаксиса (syntax errors), ошибки времени выполнения (runtime errors) и пользовательские ошибки (custom errors). В производственной среде рекомендуется указывать конкретные типы ошибок, чтобы выявить более точно проблему.

2. Перехват конкретных типов ошибок.

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

  
try {
  // ...
} catch (error) {
  if (error instanceof TypeError) {
     // ...
  }
}
  

Вы также можете использовать оператор switch, чтобы проверить тип исключения:

 
try {
   // ...
} catch (error) {
  switch (error.constructor) {
    case TypeError:
      // ...
      break;
    case RangeError:
      // ...
      break;
    // ...
  }
}
  

3. Перехват асинхронных ошибок.

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

 
try {
  const resource = await fetch("/resource");
  // ...
} catch (error) {
  // ...
}
 

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

4. Очистка ресурсов в блоке кода finally

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

 
let resource;
try {
  resource = acquireResource();
  // ...
} catch (error) {
  // ...
} finally {
  releaseResource(resource);
}
  

5. Генерация исключения.

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

 
function divide(a, b) {
  if (b === 0) {
    throw new Error("error");
  }
  return a / b;
}
 

Если значение b в функции равно 0, генерируется исключение с сообщением об ошибке. Для перехвата этого исключения и принятия соответствующих мер можно использовать try...catch.

6. Передача дополнительной информации в исключении.

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

  
function divide(a, b) {
  if (b === 0) {
    throw new Error("error", { a, b });
  }
  return a / b;
}
 

В этом примере объект исключения a содержит значения b и делимого, когда знаменатель равен нулю. При перехвате этого исключения можно получить доступ к этим значениям и действовать соответствующим образом.

7. Повторная генерация исключения.

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

  
try {
  // ...
} catch (error) {
  // ...
  throw error;
}
 

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

8. Перехватывайте ошибки и игнорируйте их.

Иногда, когда вы отлаживаете свой код, вам нужно будет временно проигнорировать некоторые ошибки. Для этого можно использовать пустые блоки catch для перехвата и игнорирования ошибок. Например:

 
try {
  // ...
} catch {
  // ...
}
 

Однако не рекомендуется использовать этот метод в производственной среде. Игнорирование ошибок в производственной среде может привести к непредсказуемому поведению вашего кода.

9. Использование метода Promise.catch.

Если вы используете асинхронный код с использованием Promise, вы можете использовать метод Promise.catch для перехвата ошибок. Например:

  
fetch("/resource")
  .then((response) => response.json())
  .then((data) => {
    // ...
  })
  .catch((error) => {
    // ...
  });
 

В этом примере, если методы fetch или json возвращают исключения, они передаются методу catch для обработки.

10. Используйте window.onerror.

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

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

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

В заключении.

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


Возможно, вам будет интересно

Как отключить ввод текста по переключателю disabled

В данном материале будет представлен самый простой способ включения и отключения ввода информации в текстовое поле INPUT=TEXT с помощью библиотеки jQuery и html атрибута disabled.

Использование HTML5-элемента audio в JavaScript

Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType

Обработка ошибок в JavaScript. 10 примеров использования конструкции try...catch

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

Замыкания в JavaScript

Замыкание — это функция, объявленная внутри другой функции и имеющая доступ к переменным внешней (вмещающей) функции. Простыми словами замыкание — это функция, описанная внутри другой функции.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

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

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

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