Async/Await in fetch() how to handle errors

Question

I have stripe async code in my React app, and trying to add error handling in my code but have no idea how to handle it. i know how to do it with .then() but async/await is new to me

EDITED

added .catch() i got errors in network tab in response tab. but i can log it to console?

    submit = async () => {
    const { email, price, name, phone, city, street, country } = this.state;
    let { token } = await this.props.stripe
      .createToken({
        name,
        address_city: city,
        address_line1: street,
        address_country: country
      })
      .catch(err => {
        console.log(err.response.data);
      });

    const data = {
      token: token.id,
      email,
      price,
      name,
      phone,
      city,
      street,
      country
    };

    let response = await fetch("/charge/pay", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    }).catch(err => {
      console.log(err.response.data);
    });
    console.log(response);
    if (response.ok)
      this.setState({
        complete: true
      });
  };

thanks

What errors do you want to handle? Please show us how you would have done it with then. — Bergi
– Bergi, Commented Jan 12, 2019 at 21:22
@MattWay Rather the reverse - how to catch in async/await syntax. — Bergi
– Bergi, Commented Jan 12, 2019 at 21:45
In the catch part, try console.log(error). Just a suggestion, try it out. — Avanthika
– Avanthika, Commented Jan 12, 2019 at 22:02
console.log at second .catch gives me in network tab and response tab i have {"name":"Name field is required","email":"Email is invalid","phone":"Phone field is required","city":"City field is required","street":"Street field is required","country":"Country field is required"} which is ok but how to access it?? to display on frontend? — Exc
– Exc, Commented Jan 12, 2019 at 22:09

Yazan Rawashdeh · Accepted Answer · 2020-05-04 07:21:50Z

79

Fetch detects only network errors. Other errors (401, 400, 500) should be manually caught and rejected.

await fetch("/charge/pay", headers).then((response) => {
    if (response.status >= 400 && response.status < 600) {
      throw new Error("Bad response from server");
    }
    return response;
}).then((returnedResponse) => {
   // Your response to manipulate
   this.setState({
     complete: true
   });
}).catch((error) => {
  // Your error is here!
  console.log(error)
});

If you are not comfortable with this limitation of fetch, try using axios.

edited May 4, 2020 at 7:21

Yazan Rawashdeh

1,0272 gold badges17 silver badges27 bronze badges

answered Jan 12, 2019 at 21:28

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Bergi Over a year ago

What do you mean by "manually catched and rejected."? Please give an example.

Avanthika Over a year ago

Fetch doesnt reject response.status >= 400 && response.status < 600. It considers them as exceptions, not errors. By rejecting manually, I meant the else part where we throw catch the exception and throw the error.

Bergi Over a year ago

Sorry, I completely missed the if (response.ok) check in your code (which imo is better than comparing response.status). I must have mistaken the first then invocation for the options argument like in the snippets in the question and other answers.

ruX Over a year ago

In given example both success and failure is handled using promise. What is the point of having await in the beginning? I don't change anything and can be safely removed.

thdoan Over a year ago

Don't use both async/await and promise patterns (.then). For good fetch error handling practices, I recommend reading web.dev/fetch-api-error-handling

|

Ishan Garg · Accepted Answer · 2020-07-06 18:23:48Z

30

var handleError = function (err) {
    console.warn(err);
    return new Response(JSON.stringify({
        code: 400,
        message: 'Stupid network Error'
    }));
};

var getPost = async function () {

    // Get the post data
    var post = await (fetch('https://jsonplaceholder.typicode.com/posts/5').catch(handleError));

    // Get the author
    var response = await (fetch('https://jsonplaceholder.typicode.com/users/' + post.userId).catch(handleError));

       if (response.ok) {
            return response.json();
        } else {
            return Promise.reject(response);
        }

};

answered Jul 6, 2020 at 18:23

Ishan Garg

7296 silver badges15 bronze badges

Comments

LiraNuna · Accepted Answer · 2019-01-12 21:31:38Z

14

You can either use try/catch just like normal, imperative programming:

try {
    let response = await fetch("/charge/pay", {
      method: "POST",
      headers: {
          "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });
} catch(error) {
    // Error handling here!
}

Or you can mix-and-match .catch() just like you do with promises:

let response = await fetch("/charge/pay", {
    method: "POST",
    headers: {
       "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
}).catch(function(error) {
    // Error handling here!
});

edited Jan 12, 2019 at 21:31

answered Jan 12, 2019 at 21:22

LiraNuna

67.7k15 gold badges121 silver badges141 bronze badges

3 Comments

Valentin Genev Over a year ago

I'm pretty sure the first example will not catch the request error.

Diego Fortes Over a year ago

The first example does not catch errors.

Andreas Riedmüller Over a year ago

The first example does catch the same error that would also be handled in the second example. But if the url is responding eg. with a 404 no error will be handled. This is because fetch is successful even if the returned response from the server is telling you that the resource is not found.

ocodo · Accepted Answer · 2024-07-12 10:41:11Z

8

try {
  const response = await fetch('/api/getdata')
  if(response.ok && response.status == 200) {
    // do sth if success
  } else {
    throw new Error(JSON.stringify({ code: response.status, message: response.statusText }))
  }
} catch (error) {
  alert(error)
}

This will catch the same errors that a Promise.catch() would, i.e. a fail to connect.

However, HTTP errors (400... 500...) will not be caught.

These must be handled by checking response.status

edited Jul 12, 2024 at 10:41

ocodo

30.5k19 gold badges111 silver badges127 bronze badges

answered Apr 7, 2023 at 8:59

yuxin wang

811 silver badge1 bronze badge

2 Comments

Rohit Gupta Over a year ago

Welcome to stackoverflow, it is always best to explain your answer.

Jacob Broughton Over a year ago

You could avoid the else altogether if you just checked for !response.ok and response.status !== 200 before executing the rest of the code.

chovy · Accepted Answer · 2022-07-05 05:30:25Z

5

This works if server returns { message: "some error" } but I'm trying to get it to support res.statusText too:

        const path = '/api/1/users/me';
        const opts = {};
        const headers = {};
        const body = JSON.stringify({});
        const token = localStorage.getItem('token');

        if (token) {
          headers.Authorization = `Bearer ${token}`;
        }

        try {
            const res = await fetch(path, {
                method: opts.method || 'GET',
                body,
                headers
            });

            if (res.ok) {
                return await (opts.raw ? res.text() : res.json());
            }

            const err = await res.json();

            throw new Error(err.message || err.statusText);
        } catch (err) {
            throw new Error(err);
        }

edited Jul 5, 2022 at 5:30

answered Apr 15, 2022 at 22:05

chovy

76.2k63 gold badges249 silver badges324 bronze badges

7 Comments

Eric Over a year ago

This works & is clear.

chovy Over a year ago

Thanks. Its the best I've come up with so far. Add some more.

Joseph Van Riper Over a year ago

This does not work for NetworkError errors. You'll see error logs in the console complaining about uncaught errors.

atheane Over a year ago

Best answer found so far, thanks!

ocodo Over a year ago

Should be checking res.status too so that HTTP errors are handled as well as a fail (network connection fail is err)

|

Win · Accepted Answer · 2019-01-12 21:21:32Z

2

Wrap your await with try catch.

try {
    let response = await fetch("/charge/pay", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });

    console.log(response);
} catch (error) {
    console.log(error);
}

answered Jan 12, 2019 at 21:21

Win

5,5942 gold badges18 silver badges21 bronze badges

3 Comments

Exc Over a year ago

still can't get error on frontend... my object with errors is present in network tab...

Joseph Van Riper Over a year ago

This won't work. Tried this, and still saw uncaught errors.

ocodo Over a year ago

Your uncaught errors are HTTP errors which you catch with response.status != 200

hkiame · Accepted Answer · 2022-02-09 19:40:18Z

2

If response.ok is false you can throw an error then chain catch method after calling your function as follows

async function fetchData(){
    const response = await fetch("/charge/pay", {
      method: "POST",
      headers: {
          "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });

    if(!response.ok){
        const message = `An error occured: ${response.status}`;
        throw new Error(message);
    }
    
    const data = await response.json();
    return data;
}

fetchData()
    .catch(err => console.log(err.message));

answered Feb 9, 2022 at 19:40

hkiame

3174 silver badges9 bronze badges

Comments

sounish nath · Accepted Answer · 2021-06-27 08:03:27Z

0

 async function loginWithRedirect(payload: {
        username: string;
        password: string;
    }) {
      const resp = await (await fetch(`${env.API_URL}/api/auth/login`, {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(payload),
        credentials: "include",
      })).json();
      if (resp.error) {
        dispatch({type: "ERROR", payload: resp.error.message});
      } else {
        dispatch({type: "LOGIN", payload: resp});
      }
    }

answered Jun 27, 2021 at 8:03

sounish nath

6815 silver badges3 bronze badges

Comments

Gökhan Duman · Accepted Answer · 2022-06-19 10:52:29Z

-2

I write promise function for using fetch in async await.

const promisyFetch = (url, options) =>
new Promise((resolve, reject) => {
fetch(url, options)
  .then((response) => response.text())
  .then((result) => resolve(result))
  .catch((error) => reject(error));
});

By the way i can use it easly in async with try catch

const foo = async()=>{
try {
    const result = await promisyFetch('url' requestOptions)
    console.log(result)
} catch (error) {
    console.log(error)
}
}

It was simple example, you could customize promisyFetch function and request options as you wish.

answered Jun 19, 2022 at 10:52

Gökhan Duman

2023 silver badges7 bronze badges

1 Comment

ocodo Over a year ago

Avoid mixing await and promises... Pick one.

Collectives™ on Stack Overflow

Async/Await in fetch() how to handle errors

9 Answers 9

10 Comments

Comments

3 Comments

2 Comments

7 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

10 Comments

Comments

3 Comments

2 Comments

7 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related