How to get an error response body from fetch in the catch block?

Question

In order to handle statuscodes which are not 200 I used a StatusCodeHandler which throws a extended Error which I then can use in the catch block of the returned promise.

class RequestError extends Error {
  response: Response;

  constructor(message: string, response: Response) {
    super(message);
    this.response = response;
    this.message = message;
  }
}

const StatusCodeHandler = (response: Response) => {
  if (response.ok) return response;
  const error = new RequestError(response.statusText, response);
  throw error;
};

export default StatusCodeHandler;

Then I have my request method:

export default function someRestCall(somedata: string, someOtherdata: string) {

  // code omitted

  return fetch(someurl)
    .then(StatusCodeHandler)
    .then(respone => {
      return respone;
    }); // Do something with the error
}

And in the component I use it like this (here on a button):

<Button
       title="Register"
            onPress={() => {
              someResCall(data1, data2)
                .then(() => {
                  this.success();
                })
                .catch((err)=> {
                  Alert.alert('something went wrong');
                  this.noSuccess();
                });
            }}
          />

So far so good. However the requirements have changed and I get an error object back with informations which I have to handle in my component. But I have no idea how to get to this information in the catch block. When I logerr.response it does not contain this information.

No, I get an error when I do ``console.log(err)`` but as I wrote when I do ``console.log(err.response)`` I get the response but I have no idea how to get to the error body. — zlZimon, Oct 05 '19 at 14:52

score 3 · Answer 1 · answered Oct 06 '19 at 14:11

3

The answer was right in front of me but I could not see it...

In the catch block I just have to return err.response.json() and handle the result in another then() block like that:

<Button
       title="Register"
            onPress={() => {
              someResCall(data1, data2)
                .then(() => {
                  this.success();
                })
                .catch((err)=> err.response.json())
                .then(errJson=>{
                // handle error message here
                console.log(errJson) };
            }}
          />

I am just not sure if this is a good practise todo but it works

answered Oct 06 '19 at 14:11

zlZimon

2,334
4
21
51

Well apparently this is NOT a good way to do it since the last ``then`` block is also called when there is no error. So what todo? – zlZimon Oct 08 '19 at 13:52
Is there a way to find what happended in PHP Backend when a 'fetch' API tells the response.json() is failed with the message 'Unexpected Token ...'? Thanks for your answer – Gajen Dissanayake Feb 24 '22 at 17:46
As explained in https://stackoverflow.com/a/39339648/2844467, instead of chaining `then` after the `catch` block, you can chain `then` after `err.response.json()`. That is, `.catch(err => err.response.json().then(json => {// handle json here});` – hyong Jun 01 '22 at 04:38
Or, `async` / `await` pair could help too like `.catch(async err => { const errJson = await err.json(); // and handle errorJson after this line })` – hyong Jun 01 '22 at 22:44

How to get an error response body from fetch in the catch block?

1 Answers1