Какие знаешь способы обработки исключений?

Обработка исключений в JavaScript

Обработка исключений - критически важный аспект написания надёжного кода. Существует несколько способов обработки ошибок в JavaScript и React.

1. Try-Catch блоки

Классический способ обработки синхронных ошибок:

try {
  const result = JSON.parse(jsonString);
  console.log(result);
} catch (error) {
  console.error("Ошибка парсинга JSON:", error.message);
} finally {
  console.log("Блок выполнен в любом случае");
}

Блок finally выполняется всегда, независимо от наличия ошибки.

2. Async/Await с Try-Catch

Для асинхронного кода используй try-catch с async/await:

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Ошибка загрузки:", error);
    return null;
  }
}

3. Promise.catch()

Для работы с Promise без async/await:

fetch("/api/users")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => {
    console.error("Ошибка:", error);
  })
  .finally(() => {
    console.log("Запрос завершён");
  });

4. Error Boundaries (React)

Для обработки ошибок в компонентах используй Error Boundaries:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Ошибка поймана:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Что-то пошло не так: {this.state.error?.message}</div>;
    }
    return this.props.children;
  }
}

// Использование:
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

5. Обработка ошибок в HTTP запросах

const apiCall = async (url, options = {}) => {
  try {
    const response = await fetch(url, options);
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || `HTTP ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError) {
      console.error("Ошибка сети:", error);
    } else {
      console.error("Ошибка запроса:", error);
    }
    throw error;
  }
};

6. Создание кастомных ошибок

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

function validateEmail(email) {
  if (!email.includes("@")) {
    throw new ValidationError("Некорректный email");
  }
}

try {
  validateEmail("invalid");
} catch (error) {
  if (error instanceof ValidationError) {
    console.error("Ошибка валидации:", error.message);
  }
}

7. Обработка ошибок в хуках React

function useDataFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error("Ошибка загрузки");
        setData(await response.json());
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, error, loading };
}

Лучшие практики

• Не игнорируй ошибки молча
• Логируй ошибки для отладки
• Предоставляй пользователю понятные сообщения об ошибках
• Использование try-catch обходится дороже, чем проверка условий
• Для критических операций используй multiple уровни обработки ошибок