Skip to content

Instantly share code, notes, and snippets.

@ever-dev
Forked from odewahn/error-handling-with-fetch.md
Created November 17, 2020 18:25
Show Gist options
  • Save ever-dev/6b415fe4d0cd912390b3ab67b80fda78 to your computer and use it in GitHub Desktop.
Save ever-dev/6b415fe4d0cd912390b3ab67b80fda78 to your computer and use it in GitHub Desktop.
Processing errors with Fetch API

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...

@principalweb
Copy link

Awesome!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment