Exibir mensagem de erro para URL quebrada | JavaScript: programando na linguagem da web

A mensagem de erro só é captada quando o erro ocorre no final da URL (acredito que seja o nome do arquivo dentro do servidor). Mas como eu poderia exibir a mensagem de erro caso o problema seja no resto da URL?

Ou seja, a mensagem aparece quando o erro é, por exemplo: https://api-pacientes.herokuapp.com/p8888cientes

Mas queria exibir também caso seja, por exemplo: https://api-pac888888ientes.herokuapp.com/pacientes

var importButton = document.querySelector("#import-patient");
importButton.addEventListener("click", function(){
    var xhr = new XMLHttpRequest(); //busca dados através de uma requisição hhttp

    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes"); //Abre o link e pega as informações

    xhr.addEventListener("load", function(){ //quando o conteúdo é carregado, a função é executada

        var ajaxError = document.querySelector("#ajax-error")

        if (xhr.status == 200){
            var answer = xhr.responseText; //adiciona o que foi carregado a uma variável
            var patients = JSON.parse(answer); //converte o que foi carregado para um objeto javascript

            console.log(patients);

            patients.forEach(function(paciente){
                addPatientInTable(paciente);            
            });
        } else {
            ajaxError.classList.remove("invisible");
        }


    });

    xhr.send();
});

Olá Thamiris, tudo bem com você?

A questão é essas urls fakes que você criou para dar erro, estão dando problema com o CORS se você abrir o console de desenvolvedor vai ver um pequeno erro, a questão é que quando temos esse erro, nem essa parte:

    xhr.addEventListener("load", function(){ //quando o conteúdo é carregado, a função é executada

        var ajaxError = document.querySelector("#ajax-error")

        if (xhr.status == 200){
            var answer = xhr.responseText; //adiciona o que foi carregado a uma variável
            var patients = JSON.parse(answer); //converte o que foi carregado para um objeto javascript

            console.log(patients);

            patients.forEach(function(paciente){
                addPatientInTable(paciente);            
            });
        } else {
            ajaxError.classList.remove("invisible");
        }

Do código é executada, então não conseguimos colocar algum erro na tela de usuário

Esse erro de CORS está relacionado com o site receber ou não requisições de outro endereço IP, quando você fez a requisição apenas alterando para um parâmetro fake ( da primeira maneira) conseguimos fazer a conexão com o servidor, entretanto o recurso é inexistente, enquanto da segunda forma fomos apenas bloqueados :)

Para solucionar isso temos uma outra forma, que é abordado nos cursos mais avançados de javascript, e temos inclusive um a parte que é a Fetch API, utilizada também no curso de Javascript Avançado

Irei dar uma breve introduzida, dado que temos todo esse conteúdo para ser consumido :)

Iremos utilizar a Fetch API no lugar das requisições xhr, e uma das grandes vantagens que temos é o fato dela utilizar um recurso do javascript chamado promises (que também é abordado nos cursos que citei), então esse código seria substituído da seguinte maneira:

fetch("https://api-pacientes.herokuapp.com/pacientes")

Aqui iremos fazer a nossa chamada a API e temos um ponto importante, por se tratar de uma promise temos 2 métodos importante:

then: Em inglês então indica qual será a próxima instrução a ser feita
catch: Em inglês pegar, é utilizado para capturar os erros que ocorreram durante o processo

Iremos sempre encadear vários deles :)

Continuando o código:

    fetch("https://api-pacientes.herokuapp.com/pacientes")
            .then(function(resposta){
                return resposta.json()
            })

O que eu estou fazendo é ir na api pegar os dados, então receba ele com o nome resposta e transforme em json, poderíamos fazer uma comparação com o xhr do seu código com essa parte:

var resposta = xhr.responseText;
var pacientes = JSON.parse(resposta);

Após isso iremos ter mais um entao:

    fetch("https://api-pacientes.herokuapp.com/pacientes")
            .then(function(resposta){
                return resposta.json()
            })
            .then(function(pacientes){
                pacientes.forEach(function(paciente){
                        adicionaPacienteNaTabela(paciente);
                  }) 
            })

O que retornamos em um then é passado para o próximo, então podemos ler esse código como:

Pegue o dado que está sendo retornado pelo then anterior e chame ele de pacientes, e ai temos o forEach que fizemos idêntico ao seu código :)

E por fim podemos colocar um catch para pegar qualquer tipo de erro: Seja porque a api está bloqueando, ou porque o recurso não existe :)

    fetch("https://api-pacientes.herokuapp.com/pacientes")
            .then(function(resposta){
                return resposta.json()
            })
            .then(function(pacientes){
                pacientes.forEach(function(paciente){
                        adicionaPacienteNaTabela(paciente);
                  }) 
            })
            .catch(function(erro){
                erroAjax.classList.remove('invisivel');
        })

Ou seja, se em algum momento do nosso código der erro eu irei adicionar a classe de erro, caso não ocorra esse catch não é executado :)

Eu sei que pode ter parecido meio confuso, mas foi apenas para te mostrar como seria feito para capturar esses erros, fique tranquila caso não tenha entendido alguma parte pois nos cursos que eu sugeri teremos aulas apenas sobre isso :)

Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!