Ошибка не попадает в блок catch. useEffect

Question

Разбираюсь с механикой отлова ошибок try catch в хуке useEffect. Для этого в блоке try создаю свою ошибку через throw new Error и, как я думаю, дальше программа должна перейти в блок catch и на экране отобразятся консоль логи, но этого не происходит. Почему такое может быть?

useEffect(() => {
const fetchData = async () => {
  setIsError(false);
  setIsLoading(true);

  try {
    const response = await fetch(`/api/getCities?query=${query}`);
    const body = await response.json();

    if (response.status >= 500) {
      throw new Error('Server Error');
    }
    //Создаю свою ошибку
    throw new Error('My error');
    setListCities(body);
  } catch {
    console.log('point 1');
    setIsError(true);
    console.log('point2');
  }

  setIsLoading(false);
};

fetchData();
}, [query]);

Answer 1

Вероятнее всего ваш запрос виснет на

const response = await fetch(`/api/getCities?query=${query}`);

Так что разбирайтесь с сервером.

try catch работает без проблем:

import React from "react";
import "./styles.css";

const fetchData = () => {
  try {
    if (Math.random() > 0.5) throw new Error("My error");
  } catch {
    return console.log("err");
  }

  console.log("no err");
};

export default function App() {
  React.useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

БЛОГ НА HUSL

Ошибка не попадает в блок catch. useEffect

Ответы (1 шт):