fetch wrapped in request.js in react boilerplate: how to handle error from json body for Spring backend

Question

I am trying to modify this file

https://github.com/mxstbr/react-boilerplate/blob/master/app/utils/request.js

The problem is it handle the errorMessage in statusText, which is not something I can set from my Spring backoffice.

I have my error message in the body of the response.

This is how I solve it so far

I have tried many different way of makint it work it, but I always break the logic implemented in this commit : 48eecac Any help would be appreciated

import "whatwg-fetch";
import { fromJS } from "immutable";

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON from the request
 */
function parseJSON(response) {
  return response.json();
}

/**
 * Checks if a network request came back fine, and throws an error if not
 *
 * @param  {object} response   A response from a network request
 *
 * @return {object|undefined} Returns either the response, or throws an error
 */
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  return response.json().then(throwError);
}

/**
 * Throw an error with the errorMessage from the response body
 *
 * @param errorMessage
 */
function throwError(errorMessage) {
  throw new Error(errorMessage);
}

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {object}           An object containing either "data" or "error"
 */
export default function request(url, options = {}) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then((response) => (response))
    .catch((err) => ({ err }));
}

So what's the actual problem you're having? assuming your error message is in JSON, it should be fine. — BradByte, Nov 17 '16 at 11:45
@BradBumbalough the actual problem is that I cannot read the response from the body if I throw an error because error need to have the body message which can be obtained by calling .json() like I did. — Dimitri Kopriwa, Nov 18 '16 at 06:41
Can you provide the error message you are receiving (from the app not your server). — BradByte, Nov 18 '16 at 12:16
fetch return a stream has a body, you need to call the .json() function to read it from that scope. there is no error, just a tiny change to do on the checkStatu function in order to throw the error here instead of in the then, do you know how to do it ? — Dimitri Kopriwa, Nov 18 '16 at 13:30
Possible duplicate of [Send error message as JSON object](https://stackoverflow.com/questions/2925176/send-error-message-as-json-object) — Paul Sweatte, Aug 25 '17 at 01:32

score 2 · Accepted Answer · answered Sep 28 '19 at 17:56

Stumbled across same issue with react boilerplate. Basically the way it works is that it constructs Error with statusText header coming from response, not the response's body.

So, to handle custom error messages without modifying boilerplate's code, you can write custom message directly in your statusText header on your server's endpoint, where you send your response.

For example, in Express (4) you can set it like this:

  res.writeHead(401, 'My custom error message');

  return res.send();

Then, on client's side in place where you handle that error you can access this custom message like so:

export function* handleError({ error }) {
  console.log(error.message) // will output "My custom error message"

fetch wrapped in request.js in react boilerplate: how to handle error from json body for Spring backend

1 Answers1