Posting data via fetch and handling network errors

Question

I've built a login panel, which will submit an email and password via fetch/POST. And I wanted to know the best way to handle network status errors?

Reason being, as I want to inject error messages into my login panel for each state/status code.

I've written the code below, which works. But I wondered if there is a better way to write this? For example, should my status code handling go in the catch() etc?

let url = 'www.MYAPI.com/xyz';

// post body data
let data = {
    "Username": emailAddress,
    "Password": Password,
  }

// create request object
let request = new Request(url, {
    "method": 'POST',
    "mode": 'cors',
    "credentials": 'include',
    "body": JSON.stringify(data),
    "referrerPolicy": "strict-origin-when-cross-origin",
    "headers": {
        "accept": "application/json, text/plain, */*",
        "content-type": "application/json;charset=UTF-8",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-origin",
        "x-requested-with": "XMLHttpRequest"
    }
});

fetch(request)
.then( async (response) => {
    let data = await response.json();

    if(response.status === 200){
     // LOGIN SUCCESSFUL HERE;
        console.log("Successful log in - status: ", data);
        document.getElementById("id01").style.display = "none"; // HIDE LOGIN PANEL
    } else{
     // Rest of status codes (400,500,303), can be handled here appropriately

        // IF EMAIL ADDRESS ERROR / STATUS 502
        if (data.KnownErrorDescription === "MemberEmailDoesNotExist") {
            document.getElementById("email-error").innerHTML = "Please enter a valid email address to sign in";
        };

        // IF PASSWORD IS EMPTY / STATUS 400
        if (data.Message === "The request is invalid.") {
            document.getElementById("password-error").innerHTML = data.ModelState["request.Password"][0];
        }

        // // IF ACCOUNT LOCKED / 502
        if (data.KnownErrorDescription === "MemberAccountLocked") {
            document.getElementById("failed-sign-in-error").innerHTML = "You need to reset your password";
            document.getElementById("password-reset").style.display = "block";
        }
    };

  })
  .catch((err) => {
      console.log(err);
  })

Answer 1

I personally think that You can easily handle part of the error handling logic in the catch block however at the moment You are listening for the specific response status do specify what went wrong during the API connection process.

MDN says:

You can use a catch block to handle all exceptions that may be generated in the try block.

try/catch works in a way that if anything fails on the try block, then the rest of the code (in the try block) is ignored and the script execution goes to the catch block. If something goes wrong then the error object is created and passed to the catch block as a parameter .catch(err). From this object You might be able to handle part of the error handling logic. Take a look at the below links:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch https://javascript.info/try-catch

Moreover:

• data variable can be a const
• Instead of writing .style.display = "none"; use YourElement.classList.add('YourNewSexyClass') and use CSS for styling :)
• innerHTML is not a good practice. Take a look here -> https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations
• url variable should a const
• data variable should be a const

let data = {
    "Username": emailAddress,
    "Password": Password,
  }

can be changed like so (get rid of capital letters here)

let data = {
    username: emailAddress,
    password: password
  }

so that You can change it to

let data = {
    username: emailAddress,
    password
  }