5 лучших практик обработки HTTP-ошибок в JavaScript

5 лучших практик обработки HTTP-ошибок в JavaScript

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

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

В этой статье рассматриваются некоторые рекомендации по обработке ошибок HTTP в приложении JavaScript.

Типы ошибок: Операционные и программные ошибки

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

Эти ошибки делятся на две категории: операционные и программные.

Операционные ошибки

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

Некоторые из наиболее распространенных операционных ошибок включают в себя:

• Сервер возвращает ответ HTTP 500.
• Запрос таймаута.
• Не удалось разрешить имя хоста.

Ошибки программиста

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

К наиболее частым ошибкам программиста относятся:

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

Рекомендации по обработке ошибок HTTP в JavaScript

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

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

Следующие рекомендации охватывают наиболее распространенные проблемы с обработкой ошибок в JavaScript.

Конкретные сообщения об ошибках

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

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

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

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

axios.get('/user/test').catch(function (error) {
 if (error.response) {
  // The request was made and the server responded with a status code that falls out of the range of 2xx
  console.log(error.response.data);
  console.log(error.response.status);
  console.log(error.response.headers);
  if (error.response.status === 500){
    //Custom Error Handler
    handlehttp500();
  }
  else if (error.response.status === 404){
    //Custom Error Handler
    handlehttp404();
  }
  else {
    handlehttpgenericerror();
  }
 }
});

Используйте пользовательские классы ошибок для определения конкретных ошибок

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

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

В следующем фрагменте кода показан пример этого сценария, расширенного для обработки ошибки HTTP 404.

class ResourceNotFoundError extends Error {
  constructor(code, message) {
    super(message);
    this.code = code;
    this.name = "ResourceNotFoundError";
  }
}

const doSomething = () => {
  try {
    throw new ResourceNotFoundError(404, "Resource not found");
  } catch (err) {
    if (err instanceof ResourceNotFoundError) {
      // error instance of ResourceNotFoundError
      console.log(err.code);
      console.log(err.message);
      return;
    }
    console.log(err);
  }
};

doSomething();

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

Использовать промежуточное ПО

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

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

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

Используйте обработку ошибок на основе обещаний вместо обратных вызовов

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

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

const fetchUsersCallback = () => {  
   // random url  
  const URL = '';  
  fetch(URL).then((success) => {  
    success.json().then((loggedinuser) => {  
      // do something with the data  
    }).catch((err) => {  
      console.log(err);  
    })  
  }).catch((error) => {  
    console.log(error);  
  });  
}

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

const fetchUsersPromise = async () => {
    // random urlconst URL = '';
    try {   
      const resp = await fetch(URL);
      const parsedResp = await resp.json();
    } catch (err) {
        console.log(err)
    }
}

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

Использование централизованного расположения для журналов и предупреждений об ошибках

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

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

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

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

Ключевые выводы

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

Я надеюсь, что вы нашли это полезным. Спасибо за чтение!

Пакет Syncfusion JavaScript Suite — единственный пакет, который вам когда-либо понадобится для создания приложения. Он содержит более 65 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию и оцените элементы управления уже сегодня.

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

Связанные блоги

• 10 советов и приемов по работе с объектами JavaScript
• Отладка JavaScript с помощью VS Code и Chrome
• Легко создать заполняемую форму с помощью текстового процессора JavaScript
• Методы манипулирования строками JavaScript, которые должен знать каждый разработчик

Первоначально опубликовано на https://www.syncfusion.com 27 февраля 2023 г.