My understanding: these are two different scenarios by inputting the wrong URL.

First of all: Basic URL structure: PROTOCOL + DOMAIN + PATH

--- Two scenarios ---

1. Input the wrong PATH: you still get a response successfully but status would be 404 (NOT FOUND) See response below:

2. Input the wrong DOMAIN: you won't be able to get a response at all. A 'Failed to fetch' default error will be sent to catch block immediately.

---

---

That's the default error message we get here, as you can see with a console.log:

fetchMeals().catch((error) => {
      console.log(error)
      setIsLoading(false);
      setHttpError(error.message);
    });

Since the request completely fails, we get an error immediately in this case (the browser blocks the request since it assumes a CORS problem), so that we don't reach the place where we would throw our own error, if we would get a response being not ok:

if (!response.ok) {
        throw new Error('Something went wrong!');
      }

---

Try provoking the error in another way like using meals.jsonx at the end of the api url. Then the set message in our thrown error will be actually displayed.

here we are only checking the response, that only works for ur response so if ur putting some meals.json or meals.jsonc or something than it will show you the response message that u written in ur code.

---

"https://reactfooddata-default-rtdb.firebaseio.com/meals.jsonx"

result: Something went wrong! 404 it returns the thrown message

---

"https://reactfooddata-defauio.com/meals.json"

result: Failed to fetch

AvailableMeals.js:27 GET reactfooddata-default-rtdb.fireaseio.com/me.. net::ERR_NAME_NOT_RESOLVED

---