DOMException: The user aborted a request (Javascript)

Question

In my code there is a timeout so that if in 25 seconds there is no response to my request, the request is cancelled with controller.abort() and shows a Sweetalert2 informing the users a "server timeout". And also I have another Sweetalert for errors in general. So that the users know that something is failing.

The problem is that it does NOT show the Sweetalert of the timeout (although it does cancel the request). And instead it shows the general error Sweetalert.

In the console I get the error DOMException: The user aborted a request but I can't solve it. Thanks in advance.

Code:

const envSoli = async () => {
  try {
    const controller = new AbortController();
    const signal = controller.signal;
    const timeId = setTimeout(() => {
      Swal.fire({
        //error timeout
        //custom function translate
        text: translate("text1"),
        icon: "info",
        buttonsStyling: false,
        confirmButtonText: translate("confirmbtn"),
        allowOutsideClick: false,
        allowEscapeKey: false,
        customClass: {
          confirmButton: "btn btn-info",
        },
        //refresh on ok click button
      }).then(function () {
        location.reload();
      });
       //controller.abort(), the idea is abort a request
       //after show the sweetalert
      controller.abort();
    }, 20 * 1000); // 20 sec
    let peticion = await fetch("data.php", {
      method: "POST",
      body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]),
      headers: { "Content-type": "application/x-www-form-urlencoded" },
      cache: "no-cache",
      signal: signal,
    });
    clearTimeout(timeId);
    let oreen = await peticion.json();

    switch (oreen.enviando) {
      case -1:
        chenille++;
        document.getElementById("div1").append(oreen.cat + "<br />");
        updateProgress(chenille, leray.length);
        tvmit_wrongUp();
        break;

      case 1:
        chenille++;
        document.getElementById("div1").append(oreen.dog + "<br />");
        updateProgress(chenille, leray.length);
        tvmit_wrongUp();
        break;

      case 2:
        chenille++;
        document.getElementById("div2").append(oreen.sky + "<br />");
        nieva++;
        updateProgress(chenille, leray.length);
        tvmit_dieUp();
        break;

      case 3:
        chenille++;
        document.getElementById("div3").append(oreen.water + "<br />");
        tvmit_liveUp();
        updateProgress(chenille, leray.length);
        break;
    }

    OKTY(leray, chenille, aarsh, nieva);
    return true;
  } catch (error) {
    console.log(error);
    Swal.fire({
      text: translate("text2"),
      icon: "question",
      buttonsStyling: false,
      confirmButtonText: translate("confirmbtn"),
      allowOutsideClick: false,
      allowEscapeKey: false,
      customClass: {
        confirmButton: "btn btn-primary",
      },
      //refresh again on button click
    }).then(function () {
      location.reload();
    });
  }
};
envSoli();

Answer 1

This error came from the aborted request by controller.abort() , I suggest you catch the error to not stop execution.

      try {
        controller.abort();
      } catch (e) {
        console.log(e)
      }
      Swal.fire({
        //error timeout
        //custom function translate, to auto translate the text
        text: translate("text1"),
        icon: "info",
        buttonsStyling: false,
        confirmButtonText: translate("confirmbtn"),
        allowOutsideClick: false,
        allowEscapeKey: false,
        customClass: {
          confirmButton: "btn btn-info",
        },
        //refresh on ok click button
      }).then(function () {
        location.reload();
      });