How can I get the complete error from a failed fetch request?

Question

I want to catch complete errors from fetch, e.g. I want the red marked stuff as string:

However, in my catch block I only get "Failed to fetch". This is my code:

try {
  response = await fetch(url, {
    method: method,
    body: JSON.stringify(payload),
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    throw new Error(`RESPONSE NOT OK: ${response.status}`);
  }

  console.info('got 200 json response:' + (await response?.json()));
} catch (e) {
  console.error('CATCH BLOCK:' + e.message); // only gives me "Failed to fetch"
}

So, how can I get the complete fetch error in a string to e.g. show it directly in my webinterface?

Update

Just to clarify this: I know how to fix the error itself. This question is only about how to get the complete error as string.

What backend are you using? You need to enable CORS on the backend. — Everest Climber, Dec 19 '20 at 14:16
thanks, but error itself is not the issue. It's really about how to catch the error as string. — stefan.at.wpf, Dec 19 '20 at 14:18
The error message displayed has nothing to do with the fetch API. The message comes from your browser's developer tools, which you cannot interact with from JS. — Sergiu Paraschiv, Dec 19 '20 at 14:19
The CORS error is a browser network error message and not part of fetch() or XMLHttpRequest. All you can do is access the status — charlietfl, Dec 19 '20 at 14:20
thank you both, that makes sense. anyway, does fetch itself not deliver any more information than "Failed to fetch"? Any property on the error object that I missed? Like `e.fullMessage` or so? — stefan.at.wpf, Dec 19 '20 at 14:20
[Looks like you can't get that information from Error object, in this case this is TypeError and you can only access a few properties like message, stack, lineNumber etc...](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError) — Józef Podlecki, Dec 19 '20 at 14:20
If it's a CORS error then no, you won't get anything useful, that's the purpose of CORS :) — Sergiu Paraschiv, Dec 19 '20 at 14:22
No such property. The `status` however should be `0` for which there are only a few cases that status occurs (CORS, no connection etc) — charlietfl, Dec 19 '20 at 14:35

score -2 · Answer 1 · answered Dec 19 '20 at 14:25

There are actually two requests, not one, hence the confusion. Preflight requests are issued automatically by your browser and are completely transparent to your code. They're logged to the console only to help the developer see the problem. Outside of that, your fetch request doesn't have any information about them.

You can read about it in depth in this question.

While it won't give you information about the initial failed request, if you want, you have the option to fire off a preflight request yourself by making an OPTIONS request:

OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org

How can I get the complete error from a failed fetch request?

1 Answers1