Add `fetch()` error support in `toast.promise()`

[madhurjain]

Per MDN, the fetch() API only rejects a promise when a “network error is encountered, although this usually means permissions issues or similar.” Basically fetch() will only reject a promise if the user is offline, or some unlikely networking error occurs, such as DNS lookup failure.

fetch("http://httpstat.us/500")
  .then(function () {
    console.log("ok");
  })
  .catch(function () {
    console.log("error");
  });

The above code actually logs "ok" and not "error". Thus, the below code also shows a Data Saved! toast instead of expected Error saving changes due to a 500 status code.

const promise = fetch("http://httpstat.us/500");
toast.promise(promise, {
  loading: "Saving..",
  success: "Data Saved!",
  error: "Error saving changes",
});

The fix is to check for response.ok flag within the first .then() and throw an Error object to be caught so the toast correctly displays the error message.

References: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

[timolins]

Hi! Thanks for this issue. This is definitely a nice convenience feature when working with raw fetch(). I'll play with this when I get the next release rolling.

[VieiraNT]

Has this been fixed?

[Tigerly1]

Fix it please!

[mehdiBenzaghar]

up 👀

[shivpratik]

Can we add functions on success in Toast Promise? For eg. when using with Nextjs 13 I want to refresh the server component after update in client component.

[alexeigs]

Fix?

[pguardiario]

bump

[raburuz]

Please fix :/

[mimo-lbp]

Please fix this, toast.promise() never trigger error even if i throw Error in my fetch call :/

[Remrem08007]

@mimo-lbp Same here I throw the Error in my fetch call and it still doesn't display the error message.

[saifulshihab]

Per MDN, the fetch() API only rejects a promise when a “network error is encountered, although this usually means permissions issues or similar.” Basically fetch() will only reject a promise if the user is offline, or some unlikely networking error occurs, such as DNS lookup failure.

fetch("http://httpstat.us/500")
  .then(function () {
    console.log("ok");
  })
  .catch(function () {
    console.log("error");
  });

The above code actually logs "ok" and not "error". Thus, the below code also shows a Data Saved! toast instead of expected Error saving changes due to a 500 status code.

const promise = fetch("http://httpstat.us/500");
toast.promise(promise, {
  loading: "Saving..",
  success: "Data Saved!",
  error: "Error saving changes",
});

The fix is to check for response.ok flag within the first .then() and throw an Error object to be caught so the toast correctly displays the error message.

References: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

It would also be nice if the toast could catch the promise error & show the error message by default.

[fzsf163]

I do not if this is gonna help. based on @saifulshihab 's answer I did following and it worked like charm. Thank you @saifulshihab

await toast.promise(
        fetch(API_CLOUDINARY, { method: "POST", body: formData })
          .then(async (res) => {
            if (res.ok === false) {
              let error = await res.json().then((e) => {
                return e.error.message;
              });
              throw new Error(error);
            } else {
              res.json();
            }
          })
          .then((data) => {
            console.log(data);
          }),
        {
          pending: "Uploading Image",
          success: "Upload Successful",
          error: {
            render({ data }) {
              return `${data}`;
            },
          },
        },
      );