Fix the JS error "EventSource is not defined" caused by some non-standard browsers (#20584)

* fall back to periodic poller

Co-authored-by: silverwind <me@silverwind.io>

1 files changed, 23 insertions, 24 deletions

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 36df196cac..664a9c5c52 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -28,14 +28,10 @@ async function receiveUpdateCount(event) {
   try {
     const data = JSON.parse(event.data);
 
-    const notificationCount = document.querySelector('.notification_count');
-    if (data.Count > 0) {
-      notificationCount.classList.remove('hidden');
-    } else {
-      notificationCount.classList.add('hidden');
+    for (const count of document.querySelectorAll('.notification_count')) {
+      count.classList.toggle('hidden', data.Count === 0);
+      count.textContent = `${data.Count}`;
     }
-
-    notificationCount.textContent = `${data.Count}`;
     await updateNotificationTable();
   } catch (error) {
     console.error(error, event);
@@ -49,14 +45,24 @@ export function initNotificationCount() {
     return;
   }
 
-  if (notificationSettings.EventSourceUpdateTime > 0 && !!window.EventSource && window.SharedWorker) {
+  let usingPeriodicPoller = false;
+  const startPeriodicPoller = (timeout, lastCount) => {
+    if (timeout <= 0 || !Number.isFinite(timeout)) return;
+    usingPeriodicPoller = true;
+    lastCount = lastCount ?? notificationCount.text();
+    setTimeout(async () => {
+      await updateNotificationCountWithCallback(startPeriodicPoller, timeout, lastCount);
+    }, timeout);
+  };
+
+  if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
     const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
     worker.addEventListener('error', (event) => {
-      console.error(event);
+      console.error('worker error', event);
     });
     worker.port.addEventListener('messageerror', () => {
-      console.error('Unable to deserialize message');
+      console.error('unable to deserialize message');
     });
     worker.port.postMessage({
       type: 'start',
@@ -64,13 +70,16 @@ export function initNotificationCount() {
     });
     worker.port.addEventListener('message', (event) => {
       if (!event.data || !event.data.type) {
-        console.error(event);
+        console.error('unknown worker message event', event);
         return;
       }
       if (event.data.type === 'notification-count') {
         const _promise = receiveUpdateCount(event.data);
+      } else if (event.data.type === 'no-event-source') {
+        // browser doesn't support EventSource, falling back to periodic poller
+        if (!usingPeriodicPoller) startPeriodicPoller(notificationSettings.MinTimeout);
       } else if (event.data.type === 'error') {
-        console.error(event.data);
+        console.error('worker port event error', event.data);
       } else if (event.data.type === 'logout') {
         if (event.data.data !== 'here') {
           return;
@@ -88,7 +97,7 @@ export function initNotificationCount() {
       }
     });
     worker.port.addEventListener('error', (e) => {
-      console.error(e);
+      console.error('worker port error', e);
     });
     worker.port.start();
     window.addEventListener('beforeunload', () => {
@@ -101,17 +110,7 @@ export function initNotificationCount() {
     return;
   }
 
-  if (notificationSettings.MinTimeout <= 0) {
-    return;
-  }
-
-  const fn = (timeout, lastCount) => {
-    setTimeout(() => {
-      const _promise = updateNotificationCountWithCallback(fn, timeout, lastCount);
-    }, timeout);
-  };
-
-  fn(notificationSettings.MinTimeout, notificationCount.text());
+  startPeriodicPoller(notificationSettings.MinTimeout);
 }
 
 async function updateNotificationCountWithCallback(callback, timeout, lastCount) {