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

1. Основы: попробуй... поймай

Давайте начнем с классической попытки...пойма:

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

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

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

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

JavaScript имеет встроенные типы ошибок, например:

• Ошибка: общий объект ошибки.
• TypeError: выдается, когда переменная не соответствует ожидаемому типу.
• SyntaxError: выдается, когда код содержит синтаксическую ошибку.
• ReferenceError: выдается при ссылке на несуществующую переменную.

Пример:

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

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

3. Создание пользовательских ошибок

Почему пользовательские ошибки?

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

Как создавать собственные ошибки

Давайте в качестве примера создадим ValidationError:

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

try {
  const age = -5;
  if (age 



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


  
  
  4. Дополнение пользовательских ошибок дополнительной информацией


Зачем останавливаться на специальном сообщении? Давайте дополним нашу пользовательскую ошибку дополнительными свойствами, такими как errorCode или statusCode.



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

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}




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


  
  
  5. Построение глобальной стратегии обработки ошибок


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



function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}




Такая централизованная обработка ошибок помогает сохранить ваш код СУХИМ (не повторяться) и обеспечивает согласованную обработку ошибок во всем приложении.


  
  
  6. Наконец-то использование для очистки


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



try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}




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


  
  
  7. Интеграция со службами журналирования


Для производственных приложений важно регистрировать ошибки. Такие службы, как Sentry, LogRocket или Datadog, могут фиксировать ошибки с помощью полной трассировки стека, что значительно упрощает устранение неполадок.

Пример:



import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}




Эта интеграция обеспечивает лучшую видимость проблем и помогает отслеживать состояние вашего приложения в режиме реального времени.


  
  
  Заключительные мысли


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


  
  
  Что дальше?

• Поэкспериментируйте со специальными ошибками в текущем проекте.
• Реализовать централизованный обработчик ошибок.
• Интегрируйте службы регистрации ошибок в свое приложение.

Дайте мне знать, как вы справляетесь с ошибками в своих проектах, или если у вас есть какие-нибудь интересные советы и рекомендации, которыми вы можете поделиться!

Понравился этот пост? Следуйте за мной, чтобы получать больше советов и рекомендаций по JavaScript!