feat: add timeout and fallback to clientVersion (#464)

Author: edusperoni

dashboard-plugin/client-version.js

@@ -1,22 +1,53 @@
-module.exports = ({ currentHost, remoteName, dashboardURL }) => {
+module.exports = ({
+  currentHost,
+  remoteName,
+  dashboardURL,
+  fallbackEntryURL,
+  fallbackRemoteVar,
+  dashboardTimeout,
+}) => {
+  fallbackRemoteVar = fallbackRemoteVar || remoteName;
+  fallbackEntryURL = fallbackEntryURL || '';
+  if (!dashboardTimeout) {
+    dashboardTimeout = -1;
+  }
+  if (typeof dashboardTimeout !== 'number' || isNaN(dashboardTimeout)) {
+    throw new Error('Invalid dashboardTimeout');
+  }
   //language=JS
   return `promise new Promise((resolve, reject) => {
-    fetch("${dashboardURL}&currentHost=${currentHost}&remoteName=${remoteName}", {
+    var timeoutSignal;
+    let timeoutId = null;
+    var dashboardTimeout = ${dashboardTimeout};
+    if (dashboardTimeout > 0) {
+      var timeoutAbort = new AbortController();
+      timeoutSignal = timeoutAbort.signal;
+      timeoutId = setTimeout(function () {
+        timeoutAbort.abort();
+      }, dashboardTimeout);
+    }
+    fetch('${dashboardURL}&currentHost=${currentHost}&remoteName=${remoteName}', {
       headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
       },
+      signal: timeoutSignal,
     })
+      .finally(function () {
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
+      })
       .then(function (res) {
-        return res.json()
+        return res.json();
       })
       .then(function (data) {
-        var name = data.name + "_" + data.version;
+        var name = data.name + '_' + data.version;
         var filename = data.version + '.remoteEntry.js';
-        var url = new URL(filename, data.remoteURL)
-        
+        var url = new URL(filename, data.remoteURL);
+
         new Promise(function (resolve, reject) {
-          var __webpack_error__ = new Error()
+          var __webpack_error__ = new Error();
           if (typeof window[name] !== 'undefined') return resolve();
           __webpack_require__.l(
             url.href,
@@ -31,11 +62,43 @@ module.exports = ({ currentHost, remoteName, dashboardURL }) => {
               __webpack_error__.request = realSrc;
               reject(__webpack_error__);
             },
-            name,
+            name
           );
-        }).then(function () {
-          resolve(window[name])
-        }).catch(reject)
+        })
+          .then(function () {
+            resolve(window[name]);
+          })
+          .catch(reject);
       })
-  })`;
+      .catch(function (error) {
+        var fallbackEntryURL = '${fallbackEntryURL}';
+        if (!fallbackEntryURL) return Promise.reject(error);
+        var name = '${fallbackRemoteVar}';
+        var url = new URL(fallbackEntryURL);
+
+        new Promise(function (resolve, reject) {
+          var __webpack_error__ = new Error();
+          if (typeof window[name] !== 'undefined') return resolve();
+          __webpack_require__.l(
+            url.href,
+            function (event) {
+              if (typeof window[name] !== 'undefined') return resolve();
+              var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+              var realSrc = event && event.target && event.target.src;
+              __webpack_error__.message =
+                'Loading script failed.\\n(' + errorType + ': ' + realSrc + ')';
+              __webpack_error__.name = 'ScriptExternalLoadError';
+              __webpack_error__.type = errorType;
+              __webpack_error__.request = realSrc;
+              reject(__webpack_error__);
+            },
+            name
+          );
+        })
+          .then(function () {
+            resolve(window[name]);
+          })
+          .catch(reject);
+      });
+  });`;
 };