Обробка помилок: try/catch/finally в JavaScript

Обробка Помилок у JavaScript

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

Основний Синтаксис

javascript

try {
  // Код, який може викликати помилку
  const data = JSON.parse(invalidJson);
} catch (error) {
  // Обробка помилки
  console.error("Парсинг не вдався:", error.message);
} finally {
  // Завжди виконується, незалежно від помилки
  console.log("Очищення завершено");
}

Об'єкт Помилки

javascript

try {
  undefinedFunction();
} catch (error) {
  console.log(error.name);    // "ReferenceError"
  console.log(error.message); // "undefinedFunction не визначено"
  console.log(error.stack);   // Повний стек викликів
}

Вбудовані Типи Помилок

Тип Помилки	Коли Виникає
`Error`	Загальна помилка
`TypeError`	Неправильна операція з типом (`null.prop`)
`ReferenceError`	Доступ до неоголошеної змінної
`SyntaxError`	Неправильний синтаксис (`JSON.parse("{")`)
`RangeError`	Число поза межами діапазону (`new Array(-1)`)
`URIError`	Неправильне використання функції URI

Викидання Користувацьких Помилок

javascript

function divide(a, b) {
  if (b === 0) {
    throw new Error("Ділення на нуль");
  }
  return a / b;
}

// Клас користувацької помилки
class ValidationError extends Error {
  constructor(field, message) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

function validateAge(age) {
  if (typeof age !== "number") {
    throw new ValidationError("age", "Вік має бути числом");
  }
  if (age < 0 || age > 150) {
    throw new ValidationError("age", "Вік має бути в межах від 0 до 150");
  }
}

Ловлення Специфічних Помилок

javascript

try {
  validateAge("abc");
} catch (error) {
  if (error instanceof ValidationError) {
    console.log(`Поле: ${error.field}, Повідомлення: ${error.message}`);
  } else if (error instanceof TypeError) {
    console.log("Помилка типу:", error.message);
  } else {
    throw error; // Повторно викидаємо невідомі помилки
  }
}

Асинхронна Обробка Помилок

З використанням async/await

javascript

async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error("Запит не вдався:", error.message);
    return null;
  }
}

З використанням Промісів

javascript

fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(error => console.error("Помилка:", error));

Блок finally

finally завжди виконується — навіть якщо catch має return або throw:

javascript

function getData() {
  let connection;
  try {
    connection = openConnection();
    return connection.query("SELECT *");
  } catch (error) {
    return null;
  } finally {
    // Виконується навіть після return!
    connection?.close();
  }
}

Глобальна Обробка Помилок

javascript

// Браузер — необроблені помилки
window.addEventListener("error", (event) => {
  console.error("Глобальна помилка:", event.error);
});

// Необроблені відхилення промісів
window.addEventListener("unhandledrejection", (event) => {
  console.error("Необроблене відхилення:", event.reason);
  event.preventDefault();
});

Важливо:

Завжди обробляйте помилки в асинхронному коді (як проміси, так і async/await). Створюйте користувацькі класи помилок для специфічних помилок домену. Використовуйте finally для очищення (закриття з'єднань, видалення завантажувачів). Ніколи не ігноруйте помилки — принаймні, ведіть їх облік.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань