Não realiza a tratativa de um erro

O código funciona quando o retorno do xmlhttprequest é o esperado, status 200, quando não ele deveria remover a classe invisivel de um span que exibe a mensagem pro usuário falando que houve um erro, porém se o retorno não é o 200 o código não está fazendo nada... Por exemplo eu adicionei letras a mais na URL onde o meu objeto faz a requisição get, sendo assim ele traz um retorno 502, o else do meu código deveria ser executado mas nada acontece.

//Código javascript
botaoAdicionar.addEventListener("click", function(){

    var xhr = new XMLHttpRequest();

    xhr.open("GET", "https://api-pacientes.herokuwwapp.com/pacientes");



    xhr.addEventListener("load", function(){
        var erroAjax = document.querySelector("#erro-ajax");

        if(xhr.status == 200){
            erroAjax.classList.add("invisivel");
            var resposta = xhr.responseText;
            var pacientes = JSON.parse(resposta);
            pacientes.forEach(function(paciente){
                adicionaPacienteNaTabela(paciente);
            });
        }
        else{
            erroAjax.classList.remove("invisivel");
        }
    });
    xhr.send();
});

        <span id="erro-ajax" class="invisivel">Erro ao buscar os pacientes</span>
        <button id="buscar-pacientes" class="botao bto-principal">Buscar Pacientes</button>

`