CODEWITHSUNDEEP
javascriptreactjshttpexpressfetch
intA
intA

Reputation: 2671

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

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>
    );
  }
}

Upvotes: 3

Views: 13050

Answers (2)

GProst
GProst

Reputation: 10227

I'll try to go step by step

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

  2. 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)
})

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

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

Upvotes: 6

wentjun
wentjun

Reputation: 42516

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

Upvotes: 3

Related Questions