Improve error handling

Author: eltos

app.js

@@ -43,6 +43,7 @@ let locale = url.searchParams.get("lang") || "de";
 
 
 const calendarContainer = document.getElementById("calendar");
+const errorBar = document.getElementById("errorbar");
 const sourceInfo = document.getElementById("sourceInfo");
 const yearSelect = document.getElementById("yearSelect");
 const countryList = document.getElementById("countryList");
@@ -74,9 +75,11 @@ document.addEventListener("DOMContentLoaded", async () => {
     renderCountrySelection();
     await updateCalendar();
   } catch (e) {
-    calendarContainer.innerHTML = e.message + `<br/><a href=".">Reload page</a>`;
+    errorBar.innerHTML = "Error: " + e.message + `<br/><a href=".">Reload page</a>`;
+    errorBar.style.display = "block";
     throw e
   }
+  errorBar.style.display = "none";
 
   shareLinkButton.text = i18n.share
 
@@ -238,26 +241,35 @@ async function fetchRegionData(countryCode) {
 // ------------------------------------------------------------
 // Aktualisiere Kalender
 async function updateCalendar() {
-  const [fromStr, toStr] = selectedMonthRange.split("~");
-  const fromDate = new Date(fromStr);
-  let toDate = new Date(toStr);
-  if (!fromDate || isNaN(fromDate) || !toDate || isNaN(toDate) || toDate < fromDate || toDate - fromDate > 2 * 365 * 24 * 60 * 60 * 1000)
-    throw Error("Invalid date range " + selectedMonthRange);
-
-  // Lade Daten, falls noch nicht vorhanden
-  const fetch = [];
-  if (!populationData) fetch.push(fetchPopulationData());
-  for (let country of selectedCountries) {
-    if (!cachedData.Regions[country]) fetch.push(fetchRegionData(country));
-    for (let year of [...new Set([fromDate.getFullYear(), toDate.getFullYear()])]) {
-      if (!cachedData[year] || !cachedData[year][country]) fetch.push(fetchCountryData(year, country));
+  try {
+    const [fromStr, toStr] = selectedMonthRange.split("~");
+    const fromDate = new Date(fromStr);
+    let toDate = new Date(toStr);
+    if (!fromDate || isNaN(fromDate) || !toDate || isNaN(toDate) || toDate < fromDate || toDate - fromDate > 2 * 365 * 24 * 60 * 60 * 1000)
+      throw Error("Invalid date range " + selectedMonthRange);
+
+    // Lade Daten, falls noch nicht vorhanden
+    const fetch = [];
+    if (!populationData) fetch.push(fetchPopulationData());
+    for (let country of selectedCountries) {
+      if (!cachedData.Regions[country]) fetch.push(fetchRegionData(country));
+      for (let year of [...new Set([fromDate.getFullYear(), toDate.getFullYear()])]) {
+        if (!cachedData[year] || !cachedData[year][country]) fetch.push(fetchCountryData(year, country));
+      }
     }
+    await Promise.all(fetch);
+
+    // Daten aggregieren
+    const stats = calculateDayStatistics(fromDate, toDate);
+    renderCalendar(stats);
+
+  } catch (e) {
+    errorBar.innerHTML = "Error: " + e.message + `<br/><a href=".">Reload page</a>`;
+    errorBar.style.display = "block";
+    throw e
   }
-  await Promise.all(fetch);
+  errorBar.style.display = "none";
 
-  // Daten aggregieren
-  const stats = calculateDayStatistics(fromDate, toDate);
-  renderCalendar(stats);
 }
 
 // ------------------------------------------------------------

index.html

@@ -27,6 +27,8 @@ <h1 data-i18n="title" onclick="document.location='.'">Holidense: Feriendichte Ka
   <div id="countryList"></div>
 </section>
 
+<section id="errorbar">
+</section>
 <main id="calendar">
   Lade Daten...
 </main>

styles.css

@@ -124,6 +124,15 @@ a:hover {
   border-color: #2196f3;
 }
 
+#errorbar {
+  margin: 1rem;
+  padding: 1rem;
+  display: none;
+  font-family: monospace;
+  border-radius: 1rem;
+  background-color: LightCoral;
+}
+
 #calendar {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -232,6 +241,10 @@ footer {
     color: #7fb6ff;
   }
 
+  #errorbar {
+    background: DarkRed;
+  }
+
   #controls, #countrySelect {
     background: #272b2e;
     border-bottom: 1px solid #444;