Skip to content

Instantly share code, notes, and snippets.

@odewahn

odewahn/error-handling-with-fetch.md

Last active November 3, 2025 07:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save odewahn/5a5eeb23279eed6a80d7798fdb47fe91 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save odewahn/5a5eeb23279eed6a80d7798fdb47fe91 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. odewahn revised this gist Jun 25, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion error-handling-with-fetch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,4 +18,4 @@ fetch("/api/foo")
    })
    ```

    Frankly, I was horrified and aghast that JavaScript let's you throw some random value, rather than an error, but hey, when in Rome...
    Frankly, I'm horrified that JavaScript let's you throw some random value, rather than an error, but hey, when in Rome...
  2. odewahn revised this gist Jun 25, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions error-handling-with-fetch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    I really liked @tjvantoll article [Handling Failed HTTP Responses With fetch()](https://www.tjvantoll.com/2015/09/13/fetch-and-errors/). The one thing I found annoyting 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.
    I really liked @tjvantoll article [Handling Failed HTTP Responses With fetch()](https://www.tjvantoll.com/2015/09/13/fetch-and-errors/). 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 trhow the response and then reprocess it in the `catch` block to extract the 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")
  3. odewahn created this gist Jun 25, 2016.
    21 changes: 21 additions & 0 deletions error-handling-with-fetch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    I really liked @tjvantoll article [Handling Failed HTTP Responses With fetch()](https://www.tjvantoll.com/2015/09/13/fetch-and-errors/). The one thing I found annoyting 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 trhow the response and then reprocess 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 was horrified and aghast that JavaScript let's you throw some random value, rather than an error, but hey, when in Rome...