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

@@ -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,

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();
     },