How can I get my fetch error to show an http status code?

Question

I have a react component and I'm making a network call to set the state. Eventually I want to pass this down to other child components, but just getting the plumbing to work at the moment.

I'm trying to catch errors correctly when calling out to my backend (an express server in the app). I attempted to force an error by fetching data from an endpoint that doesn't exist. This should throw a 404 since it doesn't exist, right? How can I get that error surfaced in the catch statement? Right now my error is SyntaxError: Unexpected token < in JSON at position 0 at eval (app.js:61)

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() { 
    fetch('/api/wrong_endpoint').then((data) => {
      return data.json();
    }).then((body) => {
      this.setState({data: body})
    }).catch(err => console.log(err));

  }

  render() {
    console.log('logging the states');
    console.log(this.state.data);
    return (
      <div>
        <ContactList />
        <ContactDetail />
        <AddContactModal />
      </div>
    );
  }
}

Take a look at [wretch](https://github.com/elbywan/wretch) docs. It is a wrapper library for `fetch()` Will both answer your question and perhaps you might be interested in using it for it's error handling. A 404 is not going to go to `fetch()` catch unless you check status (before returning `data.json()` and throw your own error — charlietfl, Apr 01 '19 at 02:50
Are you trying to print out the error status code/message or something? — wentjun, Apr 01 '19 at 02:53
@charlietfl ok. Is it fairly standard to check the status like this and print an error? This is where I'm making a network call, isn't it? Eventually this code will get moved out of the component and into some file specific for server communication. — intA, Apr 01 '19 at 02:59
Yes ...you need to create your own boilerplate error handing when using `fetch()`. I prefer to let a library do it for me. Also makes posting data simpler — charlietfl, Apr 01 '19 at 03:04

GProst · Accepted Answer · 2019-04-01T03:07:08.767

I'll try to go step by step

fetch method doesn't throw an error even if you get the 4xx or 5xx response codes. Please read about the Fetch API carefully, I believe you can find a lot of interesting you don't know about it.
You can easily check the response status as follows (please read about the Response object and its methods/properties):

fetch('/api/wrong_endpoint').then((response) => {
    console.log('status code', response.status)
})

It's hard to say if your server really returns 404 code because I don't know your express setup. If you set some fallback handler like app.get('*', ...) then it might as well return 200 success code. You can check the response status and its body in devTools of the browser. But I believe it's better if you configure at least your /api router to return 404 error if the requested /api/... route isn't found.
What I'm really sure of is that your server returns some HTML layout in the response. And you try to parse it as JSON string via data.json() and of course you get the syntax error since it's not JSON (html layout starts with < symbol hence the error: SyntaxError: Unexpected token <)

1

Nicely detailed answer – charlietfl Apr 01 '19 at 03:19

score 2 · Answer 2 · answered Apr 01 '19 at 03:03

Generally, if you are using the fetch API, errors 40x and 50x will not go into the subsequent blocks, as the promise from fetch only rejects network errors (not HTTP errors or anything else). Therefore, requesting for data from an 'incorrect' endpoint will be handled within the first then block.

I would recommend you to use check your http response body based on the Response.Ok property. Successful responses will be handled within that condition, whereas any other responses (ok: false) will be handled on the other statement.

fetch('/api/wrong_endpoint')
  .then(response => {
    console.log(response) // full response body
    console.log(response.status); // get only the response.status
    if (!response.ok) {
      // http errors 40x and 50x will go into this statement
      // do something to handle it
    } else if (response.ok) {
      // handles status code 200
    }
  })
  .then(
    // ...

How can I get my fetch error to show an http status code?

2 Answers2