Processing errors with Fetch API

error-handling-with-fetch.md

I really liked @tjvantoll article Handling Failed HTTP Responses With fetch(). The one thing I found annoying with it, though, is that response.statusText always returns the generic error message associated with the error code. Most APIs, however, will generally return some kind of useful, more human friendly message in the body.

Here's a modification that will capture this message. The key is that rather than throwing an error, you just throw the response and then process it in the catch block to extract the message in the body:

fetch("/api/foo")
  .then( response => {
    if (!response.ok) { throw response }
    return response.json()  //we only get here if there is no error
  })
  .then( json => {
    this.props.dispatch(doSomethingWithResult(json)) 
  })
  .catch( err => {
    err.text().then( errorMessage => {
      this.props.dispatch(displayTheError(errorMessage))
    })
  })

Frankly, I'm horrified that JavaScript let's you throw some random value, rather than an error, but hey, when in Rome...

Nice post, tnx :)
If you want to use message from API as error message.
In my case:
Api will return 400 in case of invalid data sent in request. Response body will contain: {"message":"Some nasty error message!"}. I want to use this message as error. But there is a problem if you want to reject promise. Because Promise.reject will reject immediately, and will not wait for resolving of result.json() for example.

Here is my take if you want to wait for result.json() and then use resulted json data as error.

fetch()
.then((response) => {
    if (response.status === 200) { // Or what ever you want to check
        return Promise.resolve(response.json()); // This will end up in SUCCESS part
    }
    return Promise.resolve(response.json()).then((responseInJson) => { // This will end up in ERROR part
        return Promise.reject(responseInJson.message); //  responseInJson.message = "Some nasty error message!"
    });
})
.then((result) => { // SUCCESS part
    console.log("Success: ", result); // Response from api in json
}, (error) => { // ERROR part
    // Because we rejected responseInJson.message, error will contain message from api. In this case "Some nasty error message!"
    console.log("Error: ", error); 
})
.catch(catchError => {
    console.log("Catch: ", catchError);
})
.finally(() => { ...});

Hope it helps :)

@Derimos My god, thank you! I had no idea why the body was not in the response.
Saved my day

I solved this way:

handleSubmit(e) {
  e.preventDefault()

  const body = {
    email: this.state.email,
  }

  let resStatus = 0
  fetch(Config.REST_API_URL + 'users/registration-request', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body),
  })
  .then(res => {
    resStatus = res.status
    return res.json()
  })
  .then(res => {
    switch (resStatus) {
      case 201:
        console.log('success')
        break
      case 400:
        if (res.code === 'ValidationFailed') {
          // My custom error messages from the API.
          console.log(res.fieldMessages)
        } else {
          console.log('this is a client (probably invalid JSON) error, but also might be a server error (bad JSON parsing/validation)')
        }
        break
      case 500:
        console.log('server error, try again')
        break
      default:
        console.log('unhandled')
        break
    }
  })
  .catch(err => {
    console.error(err)
  })
}

This was helpful, thanks for sharing

Hi,

i made this small package (code on github) following what I find here and in fetch documentation:

https://www.npmjs.com/package/fd-fetch-wrapper

Maybe this can help

With Express, I am doing the following

export async function fetchData(token: any, body: any) {
  const result = await fetch(
    `${config.apiUrl}/${config.projectKey}/my-request`,
    {
      method: 'POST',
      headers: {
        Authorization: token,
      },
      body: JSON.stringify(body),
    }
  );

  const json = await result.json();
  if (!result.ok) {
    throw {
      statusCode: result.status,
      ...json
    };
  }
  return json;
}

and in the route I do

router.post(
  '/some-path',
  handleErrorAsync(async (req: Request, resp: Response, _err: Errback) => {
    const data = await fetchData(req.get('authorization'), req.body);
    resp.json(data)
  })
);

And I have an error handling package that does

// async functions errors handler to avoid using try catch for every async route

export const handleErrorAsync = (func: Function) => (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  func(req, res, next).catch((error: Error) => {
    next(error);
  });
};

// middleware to respond with an error when error caught
export function handleError(
  err: any,
  _req: Request,
  resp: Response,
  _next: NextFunction
) {
  if (err) {
    resp.status(err.statusCode || 500).json(err);
  }
}

And of course I add to the router

router.use(handleError);

This could be simplified with the following:

return fetch(url)
    .then(res => {
        if (!res.ok) {
            return res.json().then(json => { throw json; });
        }
        return res.json();
    })
    .catch(err => {
        // err is not a promise
    });

I found this is easier to read:

return fetch(url)
    .then(async (res) => {
        if (!res .ok) {
            throw await res.json();
        }
        return response.json();
    })
    .catch(err => {
        // err is not a promise
    });

var handlejson = async function(x){
		var t = await x.text();
		try{
			return JSON.parse(t);
		}catch(e){				
			console.log("unparsed:",t);
			return null; //or throw new Expection(e);
		}
	}
fetch(...).then(handlejson)

Oh I bet yall will love this extremely cursed wrapper I wrote for fetch a few years ago, it lets me bubble up the exact network error to the UI. With this monstrosity, I can get the actual error (e.g. ECONNREFUSED when the server isn't running!):

https://github.com/ariccio/COVID-CO2-tracker/blob/main/co2_client/src/utils/FetchHelpers.ts#L312

Actually, I think the node-fetch docs propose a nice solution for the OP ?

Instead of throwing a regular Error, they throw a custom extension of Error that contains the response. In the catch clause, they access the response:

https://github.com/node-fetch/node-fetch?tab=readme-ov-file#handling-client-and-server-errors

class HTTPResponseError extends Error {
	constructor(response) {
		super(`HTTP Error Response: ${response.status} ${response.statusText}`);
		this.response = response;
	}
}
...
	if (!response.ok) {
		throw new HTTPResponseError(response);
	}
...
catch (error) {
	console.error(error);
	const errorBody = await error.response.text();
	....
}