Handle Error response React.js

Viewed 20080

My Spring boot Controller method:

@RequestMapping(value = "/test",  method = RequestMethod.POST)
    @ResponseBody
    public ResponseEntity<APIResponseMessage> testMethod(@RequestBody MyPojo myPojo) {
        APIResponseMessage resp = new APIResponseMessage();
        try {
            serviceObj.callServiceMethod(myPojo);
            resp.setMessage("successfull!");
        } catch (Exception e) {
            resp.setMessage("failed!");
            return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(resp);
        }
        return ResponseEntity.ok(resp);
    }

React action handler class has the following method:

export default (data) => (dispatch) => {
  dispatch({
    type: initHandler
  });

  fetchJSON(url, 'POST', data)
    .then((json) => {
      dispatch({
        type: successHandler,
        apiResponse: json
      })
    })
    .catch((error) => {
      dispatch({
        type: failureHandler,
        apiResponse: error,
        apiMessage : "System encountered error. Please try again later."
      })
    })
}

And fetchJSON is define in one of my util classes in react as :

export const checkStatus = response => {
  const hasError = (response.status < 200 || response.status >= 300)
  if (hasError) {
    const error = new Error("This is an error") // I want to set my message that I obtained from the controller here.
    throw error
  }
  return response
}

export const parseJSON = response => response.json()

export const fetchJSON = (url, method, data) => {
  return fetch(url, {
    method: method,
    headers: new Headers({
      'Content-Type': 'application/json'
    }),
    body: JSON.stringify(data)
  }).then(checkStatus).then(parseJSON);
}

I want to set the custom message that I get from my API to be set to the error object. I tried many options but couldn't make it to work.

1 Answers
Related