From 311f93f5af58b4c42dcb2bae2deb288ff46bcec1 Mon Sep 17 00:00:00 2001
From: "Steven R. Loomis" <srl295@gmail.com>
Date: Mon, 3 Jun 2024 12:16:05 -0500
Subject: [PATCH] CLDR-17560 improve Dashboard robustness

- use second param to callback() to return err instead of global
- popup err message if dashboard fails to load
---
 tools/cldr-apps/js/src/esm/cldrDash.mjs       | 20 +++++++------------
 .../js/src/views/DashboardWidget.vue          | 11 +++++-----
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/tools/cldr-apps/js/src/esm/cldrDash.mjs b/tools/cldr-apps/js/src/esm/cldrDash.mjs
index fffc331d4be..fd5bf7c706d 100644
--- a/tools/cldr-apps/js/src/esm/cldrDash.mjs
+++ b/tools/cldr-apps/js/src/esm/cldrDash.mjs
@@ -362,17 +362,18 @@ class DashEntry {
   }
 }
 
-let fetchErr = "";
-
 let viewSetDataCallback = null;
 
+/**
+ * @param {Function} callback called with results of data load
+ * @returns
+ */
 function doFetch(callback) {
   viewSetDataCallback = callback;
-  fetchErr = "";
   const locale = cldrStatus.getCurrentLocale();
   const level = cldrCoverage.effectiveName(locale);
   if (!locale || !level) {
-    fetchErr = "Please choose a locale and a coverage level first.";
+    callback(null, "Please choose a locale and a coverage level first.");
     return;
   }
   const url = `api/summary/dashboard/${locale}/${level}`;
@@ -382,16 +383,10 @@ function doFetch(callback) {
     .then((data) => data.json())
     .then(setData)
     .catch((err) => {
-      const msg = "Error loading Dashboard data: " + err;
-      console.error(msg);
-      fetchErr = msg;
+      cldrNotify.exception(err, "Loading dashboard data");
+      callback(null, `Error loading dashboard data: ${err}`);
     });
 }
-
-function getFetchError() {
-  return fetchErr;
-}
-
 /**
  * Set the data for the Dashboard, converting from json to a DashData object
  *
@@ -602,7 +597,6 @@ async function getLocaleErrors(locale) {
 export {
   doFetch,
   downloadXlsx,
-  getFetchError,
   getLocaleErrors,
   saveEntryCheckmark,
   setData,
diff --git a/tools/cldr-apps/js/src/views/DashboardWidget.vue b/tools/cldr-apps/js/src/views/DashboardWidget.vue
index a6819af49c7..494700f71ba 100644
--- a/tools/cldr-apps/js/src/views/DashboardWidget.vue
+++ b/tools/cldr-apps/js/src/views/DashboardWidget.vue
@@ -203,7 +203,7 @@ export default {
     };
   },
 
-  created() {
+  mounted() {
     if (cldrStatus.getPermissions()?.userIsTC) {
       this.catIsHidden["Abstained"] = this.catCheckboxIsUnchecked[
         "Abstained"
@@ -255,22 +255,23 @@ export default {
 
     fetchData() {
       if (!cldrStatus.getSurveyUser()) {
-        this.fetchErr = "Please log in to see the Dashboard.";
+        this.fetchErr.value = "Please log in to see the Dashboard.";
         return;
       }
       this.locale = cldrStatus.getCurrentLocale();
       this.level = cldrCoverage.effectiveName(this.locale);
       if (!this.locale || !this.level) {
-        this.fetchErr = "Please choose a locale and a coverage level first.";
+        this.fetchErr.value =
+          "Please choose a locale and a coverage level first.";
         return;
       }
       this.localeName = cldrLoad.getLocaleName(this.locale);
       this.loadingMessage = `Loading ${this.localeName} dashboard at ${this.level} level`;
       cldrDash.doFetch(this.setData);
-      this.fetchErr = cldrDash.getFetchError();
     },
 
-    setData(data) {
+    setData(data, err) {
+      this.fetchErr = err || null;
       this.data = data;
       this.resetScrolling();
     },