Fix bug where error message is not displaying properly

avelynhc

Avelyn Hyunjeong Choi

Posted on November 19, 2023

Fix bug where error message is not displaying properly

Issue
When user enters a wrong city name for the first time, error message is displayed properly.
first

When user enters the correct city name this time, it works by showing the correct weather information.
correct input

However, when user enters the wrong city name again, error message is not displayed at all.
wrong input
More detail on the issue-> https://github.com/swapnilsparsh/30DaysOfJavaScript/issues/1137

My Solution

  • changed getWeatherReport() to async function
  • added try and catch block. In the catch block, a new method showErrorMessage() was implemented to show proper error message and clear any existing output from the previous result.

before

function getWeatherReport(city){
  fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
  .then(weather => {
      return weather.json();
  }).then((data) => {
    showWeatherReport(data);
    lat = data.coord.lat;
    long = data.coord.lon;
    fetching();
  });
Enter fullscreen mode Exit fullscreen mode

after

async function getWeatherReport(city){
    try {
        const response = await fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`);
        const data = await response.json();

        if(!response.ok) {
            throw new Error('Error while getting the weather report');
        }
        showWeatherReport(data);
        lat = data.coord.lat;
        long = data.coord.lon;
        await fetching();
    } catch(err) {
        console.error(err);
        showErrorMessage();
    }
}

function showErrorMessage() {
    document.getElementById('city').innerText = 'Country/City Name Not Found';
    // clear previous output
    document.getElementById('date').innerText = '';
    document.getElementById('temp').innerText = '';
    document.getElementById('min-max').innerText = '';
    document.getElementById('weather').innerText = '';
}
Enter fullscreen mode Exit fullscreen mode

Result
When user enters a wrong city name for the first time, error message is displayed properly.
after

When user enters the correct city name this time, it works by showing the correct weather information.
after

When user enters the wrong city name again, error message is properly displayed this time.
after

More detail on the pr -> PR

Progress from release 0.2
I not only fixed the bug but also refactored the existing code for better readability. Before addressing the bug, I took some time to review the currently written code. That's when I found some error-prone sections aside from the current bug. Additionally, I identified some repetitive code, which lowered the quality of the code. Right after fixing the indicated bug, I went beyond what was asked for by refactoring the existing code. Here is the list of code changes that are not related to the assigned issue:

  • Removed repetitive code and created a method, showWeatherImage().
  • Removed unused variables.
  • Changed var to either let or const.
  • Changed == to === for comparison.

After these changes, the code will have better quality in terms of readability.

My previous PRs in release 0.2

  • pr1 identified all the broken links on the website and fixed them (same repo as the current PR).
  • pr2 added Korean translation for the about page in Telescope project.
  • pr3 added a new functionality to convert .markdown to .html.
  • pr4 auto-rectified git source url using regex.
πŸ’– πŸ’ͺ πŸ™… 🚩
avelynhc
Avelyn Hyunjeong Choi

Posted on November 19, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related