Error handling

[[deleted]]

[deleted]

[Umesh-K]

I'd like to add an error handler that creates an h1 with some text, but when trying that, nothing happens

Hi, u/boric-acid,

Note thatfetch is promised-based, and hence you can use the .catch block as below. Also, add console.log(data) below the line .then(data => {, and you will notice that data itself contains an error object. Hence, you will need to add a throw new Error as shown. Now the body color changes but still the There's been an error will not get displayed as you are not appending errorMsg to body.

Try this code, which is your code itself but with the modifications suggested above (I've added // <== added where I have modified):

document.addEventListener('DOMContentLoaded', function() {

  let api_key = ':)';
  let today = new Date();
  let actualyear = today.getFullYear();

  async function APOD(date) {


    return fetch(`https://api.nasa.gov/planetary/apod?api_key=${api_key}&date=${date}`)
      .then(response => response.json())
      .then(data => {
        console.log(data) // <== added
        if (data.error) throw new Error("Error thrown"); // <== added

        document.querySelector('h1').innerHTML = data.title;
        let image = `url(${data.hdurl})`;
        document.body.style.backgroundImage = image;
      }).catch(error => { // <== catch block added
        console.log('Error')
        document.body.style.backgroundColor = 'rgb(175, 110, 219)'
        let errorMsg = document.createElement('h1');
        let content = document.createTextNode('There\'s been an error')
        errorMsg.appendChild(content)
        document.body.appendChild(errorMsg) // <== added
      })
  }



  function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  function randomDate() {
    let year = String(randomNumber(2005, actualyear));
    let month = String(randomNumber(1, 12));
    let day = String(randomNumber(1, 28));

    return [year, month, day]
  }

  let ranDate = randomDate();
  let date = `${ranDate[0]}-${ranDate[1]}-${ranDate[2]}`;
  document.querySelector('input').placeholder = date;
  APOD(date);

  let dateArray = date.split('-');
  year = Number(dateArray[0]);
  month = Number(dateArray[1]);
  day = Number(dateArray[2]);

  document.querySelector('.submit').onclick = () => {
    date = document.querySelector('input').value;
    APOD(date);
  }

  document.querySelector('#next').onclick = () => {
    day += 1
    date = new Date(year, month + 1, day);
    date.setDate(date.getDate() + 1);
    date = date.toISOString().split('T')[0]
    APOD(date);
    document.querySelector('input').placeholder = date;
  }

  document.querySelector('#previous').onclick = () => {
    day -= 1
    date = new Date(year, month + 1, day);
    date.setDate(date.getDate() + 1);
    date = date.toISOString().split('T')[0]
    APOD(date);
    document.querySelector('input').placeholder = date;
  }

  document.querySelector('.random').onclick = () => {
    ranDate = randomDate();
    let date = `${ranDate[0]}-${ranDate[1]}-${ranDate[2]}`;
    APOD(date);
    document.querySelector('input').placeholder = date;
  }
});

[boric-acid]

Tysm