Fix bug where error message is not displaying properly
Avelyn Hyunjeong Choi
Posted on November 19, 2023
Issue
When user enters a wrong city name for the first time, error message is displayed properly.
When user enters the correct city name this time, it works by showing the correct weather information.
However, when user enters the wrong city name again, error message is not displayed at all.
More detail on the issue-> https://github.com/swapnilsparsh/30DaysOfJavaScript/issues/1137
My Solution
- changed
getWeatherReport()
to async function - added
try
andcatch
block. In thecatch
block, a new methodshowErrorMessage()
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();
});
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 = '';
}
Result
When user enters a wrong city name for the first time, error message is displayed properly.
When user enters the correct city name this time, it works by showing the correct weather information.
When user enters the wrong city name again, error message is properly displayed this time.
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 eitherlet
orconst
. - Changed
==
to===
for comparison.
After these changes, the code will have better quality in terms of readability.
My previous PRs in release 0.2
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
December 15, 2023