I am trying to handle 500 internal server errors inside fetch. If an internal error occurs, the server responds with a message. I want to extract that message.

const req = new Request(url, {
      method: node.method,
      mode: 'cors',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    fetch(req)
      .then((response) => {
        if (response.status === 500) {
          // res.json extracts the body from the response as a promise, chain
          // .then on it and throw an error to be caught in the lower catch.
          response.json()
          .then((json) => {
            const { message, stackTrace } = json;
            throw new ServerException(message, stackTrace); // note 1
          })
          .catch((error) => {
            return Promise.reject(RawException(error)); // note 2
          });
        } else {
          return response.json();
        }
      })
      .then((json) => { // note 3
        dispatch(stopLoading());
        dispatch(recieveResponse(typeOfRequest, json));
      })
      .catch((e) => {
        dispatch(stopLoading());
        dispatch(responseError());
        dispatch(showError(e.message));
      });
  };

My issue is that extracting the body of the response creates a new promise, and I am unable to reject the outer promise from the inner one.

Note 1 triggers the catch method of the inner promise. Inside catch, I have tried throwing another error but it doesn't seem to work. If I throw new RawException(error) on the second noted line, nothing happens and the then method on the third noted line triggers. If I return a rejected promise as I have in the code provided, then still triggers but json is undefined.

How do I do this?

I am trying to handle 500 internal server errors inside fetch. If an internal error occurs, the server responds with a message. I want to extract that message.

const req = new Request(url, {
      method: node.method,
      mode: 'cors',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    fetch(req)
      .then((response) => {
        if (response.status === 500) {
          // res.json extracts the body from the response as a promise, chain
          // .then on it and throw an error to be caught in the lower catch.
          response.json()
          .then((json) => {
            const { message, stackTrace } = json;
            throw new ServerException(message, stackTrace); // note 1
          })
          .catch((error) => {
            return Promise.reject(RawException(error)); // note 2
          });
        } else {
          return response.json();
        }
      })
      .then((json) => { // note 3
        dispatch(stopLoading());
        dispatch(recieveResponse(typeOfRequest, json));
      })
      .catch((e) => {
        dispatch(stopLoading());
        dispatch(responseError());
        dispatch(showError(e.message));
      });
  };

My issue is that extracting the body of the response creates a new promise, and I am unable to reject the outer promise from the inner one.

Note 1 triggers the catch method of the inner promise. Inside catch, I have tried throwing another error but it doesn't seem to work. If I throw new RawException(error) on the second noted line, nothing happens and the then method on the third noted line triggers. If I return a rejected promise as I have in the code provided, then still triggers but json is undefined.

How do I do this?

• javascript
• promise
• fetch

• 1 Is the issue that you aren't returning the first response.json()? You aren't actually returning anything in the case of response.status === 500. But you are in your else with a return response.json();. – zero298 Commented Jan 18, 2017 at 21:38
• As per @zero298 , but after inserting a return as return response.json().then(...)in the 500 error handling, you don't need the immediately following .catch clause to return a rejected promise: the then promise is rejected by the throw. – traktor Commented Jan 18, 2017 at 22:09
• @JaromandaX I wrote the ment based on the OP's obvservation "Note 1 triggers the inner catch method". As you point out this may not always be true. It could even be rarely true. Thanks for the correction. – traktor Commented Jan 18, 2017 at 23:20
• If the code is rewritten to return on note 1, it will cause the pletion of the inner promise which will swallow the error, since I can't push the result of that promise into the outer promise. If you are interested in a solution, I have manged to resolve this. – Brandon Dube Commented Jan 19, 2017 at 0:16

1 Answer 1

The solution is not to nest promises, but to resolve/return the .then of the outer promise with the conclusion of the inner promise.

if (response.status === 500) {
  response.json()   // response.json returns a promise, we chose to do nothing with its
  .then((json) => { // conclusion
    const { message, stackTrace } = json;
    throw new ServerException(message, stackTrace); // note 1
  })
  .catch((error) => {
    return Promise.reject(RawException(error)); // note 2
  });
} else {
  return response.json();
}

Should bee

if (response.status === 500) {
  return response.json() // return the result of the inner promise, which is an error
  .then((json) => {
    const { message, stackTrace } = json;
    throw new ServerException(message, stackTrace);
  });
} else {
  return response.json();
}

The else clause can be removed as well if that syntax is preferred. ESLint plains about the else being wasteful, but I perfer the way it makes the code's branching explicit.