Почему не выводиться console.error?

Не могу понять почему при неудачном запросе не выводиться console.error('It failed to get a response from the server, check the data', error)

Файл module.js:

export async function fulfillRequest (spanUrl, inputUrl) {
   try {
       const response = await fetch(`${spanUrl}/${inputUrl}`, {
           method: 'GET'
       });
       return {
           status: 'success',
           data: await response.json()
       }
   } catch (error) {
       console.error('It failed to get a response from the server, check the data', error);
       return {
           status: 'error',
           data: null
       }
   }
}

Файл main.js:

import { fulfillRequest } from "./module.js";

function mainFunc( options ) {
    const { spanUrl, inputUrl, button, idBlock, controllerBlock, resultBlock, loader } = options;
    button.addEventListener('click', async (event) => {
        event.preventDefault();
        const { fulfillRequest } = await import('./module.js');
        const fixInputUrl = inputUrl.value.trim();
        // console.log(typeof fixInputUrl, fixInputUrl);
        const regExp = /^\/[a-z]*\/?\d*\/?$/;
        const validateInput = regExp.test(fixInputUrl);
        // console.log('inputUrl:', inputUrl);
        // console.log('validateInput:', validateInput);
        if (validateInput) {
            loader.style.display = 'block';
            const response = fulfillRequest(spanUrl.textContent, fixInputUrl);
            // console.log('Response: ',response);
            // console.log('Response-data: ', (await response).data);
            // console.log('withoutTrim:', inputUrl.value, inputUrl.value.length);
            // console.log('Trim:', inputUrl.value.trim(), inputUrl.value.trim().length);
            if ((await response).status === 'success') {
                loader.style.display = 'none';
                const parseUrl = fixInputUrl.split('/');
                // console.log('parseUrl:', parseUrl);
                controllerBlock.style.display = 'block';
                idBlock.style.display = 'block'
                controllerBlock.innerHTML = parseUrl[1];
                idBlock.innerHTML = parseUrl[2];
                resultBlock.innerHTML = JSON.stringify((await response).data, null, 2);
                console.log(fixInputUrl)
                if (fixInputUrl === '/') {
                    controllerBlock.style.display = 'none';
                    idBlock.style.display = 'none'
                }
            }
            else {
                controllerBlock.style.display = 'none';
                idBlock.style.display = 'none';
            }
        }
        else {
            console.error('Please check again the correctness of the data of the field');
        }
    })
}
try {
    document.addEventListener('DOMContentLoaded', () => {
        mainFunc({
            spanUrl: document.querySelector('.js--url-span'),
            inputUrl: document.querySelector('.js--url-input'),
            button: document.querySelector('.js--button-request'),
            idBlock: document.querySelector('.js--id-swapi'),
            controllerBlock: document.querySelector('.js--controller-swapi'),
            resultBlock: document.querySelector('.js--code'),
            loader: document.querySelector('.js--loader'),
        })
    })
} catch (error) {
    console.error(error);
}
body {
    color: #c8c8c8;
    background-color: #272b30;
    margin: 0;
    width: 100%;
    min-height: 100vh;
}
.wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}
.container {
    max-width: 985px;
    width: 100%;
    margin: 0 auto;
}
.swapi {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
    background-color: transparent;
    padding: 75px 0;
}
.swapi__title {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 120%;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
}
.swapi__form {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.swapi__url-span {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    max-width: 160px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 0;
    background-color: #484e55;
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 10px 0 0 10px;
    color: white;
}
.swapi__label {
    max-width: 755px;
    width: 100%;
}
.swapi__input {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 0 15px 12px;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 120%;
    color: #272b30;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.swapi__input::placeholder {
    font-size: 12px;
}
.swapi__input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 30px rgba(102, 175, 233, 0.6);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.swapi__button {
    max-width: 72px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 14px 0;
    border-color: rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    background-color: #7a8288;
    border-radius: 0 10px 10px 0;
}
.swapi__button:hover {
    box-shadow: 0 0 20px 2px #4495de;
    transition: background ease-in-out .15s, box-shadow ease-in-out .15s;
    background-color: #4495DEFF;
}
.swapi-result {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 0;
    background-color: #1c1e22;
    border: 1px solid #0c0d0e;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);

}
.swapi-result__container {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
    display: block;
    padding: 20px 0 20px 20px;
    color: #3a3f44;
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
    border-radius: 4px;
    overflow-y: scroll;
    box-sizing: border-box;
}
.swapi-result__info {
    max-width: 150px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
.swapi-result__id,
.swapi-result__controller {
    display: none;
    box-sizing: border-box;
    padding: 8px 0;
    max-width: 50px;
    width: 100%;
    background-color: #8a9196;
    border-radius: 10px;
}
.swapi-result__controller {
    max-width: 85px;
}
.swapi-result__code {
    text-align: left;
}
.loader {
    display: none;
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    margin: 0 auto;
}

.loader div {
    width: 8%;
    height: 24%;
    background: rgb(128, 128, 128);
    position: absolute;
    left: 50%;
    top: 30%;
    opacity: 0;
    border-radius: 50px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    animation: fade458 1s linear infinite;
}

@keyframes fade458 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.25;
    }
}

.loader .bar1 {
    transform: rotate(0deg) translate(0, -130%);
    animation-delay: 0s;
}

.loader .bar2 {
    transform: rotate(30deg) translate(0, -130%);
    animation-delay: -1.1s;
}

.loader .bar3 {
    transform: rotate(60deg) translate(0, -130%);
    animation-delay: -1s;
}

.loader .bar4 {
    transform: rotate(90deg) translate(0, -130%);
    animation-delay: -0.9s;
}

.loader .bar5 {
    transform: rotate(120deg) translate(0, -130%);
    animation-delay: -0.8s;
}

.loader .bar6 {
    transform: rotate(150deg) translate(0, -130%);
    animation-delay: -0.7s;
}

.loader .bar7 {
    transform: rotate(180deg) translate(0, -130%);
    animation-delay: -0.6s;
}

.loader .bar8 {
    transform: rotate(210deg) translate(0, -130%);
    animation-delay: -0.5s;
}

.loader .bar9 {
    transform: rotate(240deg) translate(0, -130%);
    animation-delay: -0.4s;
}

.loader .bar10 {
    transform: rotate(270deg) translate(0, -130%);
    animation-delay: -0.3s;
}

.loader .bar11 {
    transform: rotate(300deg) translate(0, -130%);
    animation-delay: -0.2s;
}

.loader .bar12 {
    transform: rotate(330deg) translate(0, -130%);
    animation-delay: -0.1s;
}
<div class="wrapper">
        <div class="container">
            <div class="swapi">
                <h1 class="swapi__title">SWAPI</h1>
                <form class="swapi__form js--form" action="https://swapi.dev/api" method="get">
                    <span class="swapi__url-span js--url-span">https://swapi.dev/api</span>
                    <label class="swapi__label" for="url">
                        <input  id="url" value="/planets/3/" class="swapi__input js--url-input" type="text" placeholder="/people/1/">
                    </label>
                    <button class="swapi__button  js--button-request">Get info</button>
                </form>
                <div class="swapi-result">
                    <div class="swapi-result__container">
                        <div class="loader js--loader">
                            <div class="bar1"></div>
                            <div class="bar2"></div>
                            <div class="bar3"></div>
                            <div class="bar4"></div>
                            <div class="bar5"></div>
                            <div class="bar6"></div>
                            <div class="bar7"></div>
                            <div class="bar8"></div>
                            <div class="bar9"></div>
                            <div class="bar10"></div>
                            <div class="bar11"></div>
                            <div class="bar12"></div>
                        </div>
                        <div class="swapi-result__info">
                            <div class="swapi-result__id js--id-swapi"></div>
                            <div class="swapi-result__controller js--controller-swapi"></div>
                        </div>
                        <pre class="swapi-result__code js--code"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>


Ответы (0 шт):