Show friendly error message on API fetch failure on stats (#17570)

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

app/javascript/analytics/client.js

@@ -1,6 +1,6 @@
 import { handleFetchAPIErrors } from '../utilities/http';
 
-function callAnalyticsAPI(path, date, { organizationId, articleId }, callback) {
+function callAnalyticsAPI(path, date, { organizationId, articleId }) {
   let url = `${path}?start=${date.toISOString().split('T')[0]}`;
 
   if (organizationId) {
@@ -10,36 +10,29 @@ function callAnalyticsAPI(path, date, { organizationId, articleId }, callback) {
     url = `${url}&article_id=${articleId}`;
   }
 
-  fetch(url)
+  return fetch(url)
     .then(handleFetchAPIErrors)
-    .then((response) => response.json())
-    .then(callback)
-    // eslint-disable-next-line no-console
-    .catch((error) => console.error(error)); // we should come up with better error handling
+    .then((response) => response.json());
 }
 
 export function callHistoricalAPI(
   date,
   { organizationId, articleId },
-  callback,
 ) {
-  callAnalyticsAPI(
+  return callAnalyticsAPI(
     '/api/analytics/historical',
     date,
     { organizationId, articleId },
-    callback,
   );
 }
 
 export function callReferrersAPI(
   date,
   { organizationId, articleId },
-  callback,
 ) {
-  callAnalyticsAPI(
+  return callAnalyticsAPI(
     '/api/analytics/referrers',
     date,
     { organizationId, articleId },
-    callback,
   );
 }

app/javascript/analytics/dashboard.js

@@ -249,17 +249,41 @@ function renderReferrers(data) {
   container.innerHTML = tableBody.join('');
 }
 
-function callAnalyticsAPI(date, timeRangeLabel, { organizationId, articleId }) {
-  callHistoricalAPI(date, { organizationId, articleId }, (data) => {
-    writeCards(data, timeRangeLabel);
-    drawCharts(data, timeRangeLabel);
-  });
+function removeCardElements() {
+  const el = document.getElementsByClassName("summary-stats")[0];
+  el && el.remove();
+}
 
-  callReferrersAPI(date, { organizationId, articleId }, (data) => {
-    renderReferrers(data);
+function showErrorsOnCharts() {
+  const target = ['reactions-chart', 'comments-chart', 'followers-chart', 'readers-chart'];
+  target.forEach(id => {
+    const el = document.getElementById(id);
+    el.outerHTML = `<p class="m-5" id="${id}">Failed to fetch chart data. If this error persists for a minute, you can try to disable adblock etc. on this page or site.</p>`;
   });
 }
 
+function showErrorsOnReferrers() {
+  document.getElementById('referrers-container').outerHTML = '<p class="m-5" id="referrers-container">Failed to fetch referrer data. If this error persists for a minute, you can try to disable adblock etc. on this page or site.</p>';
+}
+
+function callAnalyticsAPI(date, timeRangeLabel, { organizationId, articleId }) {
+  callHistoricalAPI(date, { organizationId, articleId })
+    .then((data) => {
+      writeCards(data, timeRangeLabel);
+      drawCharts(data, timeRangeLabel);
+    })
+    .catch((_err) => {
+      removeCardElements();
+      showErrorsOnCharts();
+    });
+
+  callReferrersAPI(date, { organizationId, articleId })
+    .then((data) => {
+      renderReferrers(data);
+    })
+    .catch((_err) => showErrorsOnReferrers());
+}
+
 function drawWeekCharts({ organizationId, articleId }) {
   resetActive(document.getElementById('week-button'));
   const oneWeekAgo = new Date();