@electerm/electerm-react 3.15.46 → 3.15.50

package/client/common/import-retry.js

@@ -0,0 +1,23 @@
+/**
+ * Retry wrapper for dynamic import() calls
+ * Handles transient "Failed to fetch" errors that can occur
+ * when the app starts and chunks are fetched before the
+ * network/server is fully ready
+ */
+
+const MAX_RETRIES = 3
+const RETRY_DELAY = 500
+
+function sleep (ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+export default function importRetry (factory, retries = MAX_RETRIES) {
+  return factory().catch(async (err) => {
+    if (retries <= 0) {
+      throw err
+    }
+    await sleep(RETRY_DELAY)
+    return importRetry(factory, retries - 1)
+  })
+}

package/client/components/ai/ai-chat-entry.jsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react'
+import importRetry from '../../common/import-retry'
 
-const AIChat = lazy(() => import('./ai-chat'))
+const AIChat = lazy(() => importRetry(() => import('./ai-chat')))
 
 export default function AIChatEntry (props) {
   return (

package/client/components/rdp/rdp-session.jsx

@@ -28,6 +28,7 @@ import { FileTransferManager, createFileLogger } from './file-transfer'
 import { notification } from '../common/notification'
 import message from '../common/message'
 import ShowItem from '../common/show-item'
+import importRetry from '../../common/import-retry'
 import './rdp.styl'
 
 const { Option } = Select
@@ -35,7 +36,7 @@ const { Option } = Select
 async function loadWasmModule () {
   if (window.ironRdp) return
   console.debug('[RDP-CLIENT] Loading IronRDP WASM module...')
-  const mod = await import('ironrdp-wasm')
+  const mod = await importRetry(() => import('ironrdp-wasm'))
   window.ironRdp = {
     wasmInit: mod.default,
     wasmSetup: mod.setup,

package/client/components/setting-panel/setting-modal.jsx

@@ -11,13 +11,14 @@ import {
   settingMap,
   modals
 } from '../../common/constants'
+import importRetry from '../../common/import-retry'
 
-const TabBookmarks = lazy(() => import('./tab-bookmarks'))
-const TabQuickCommands = lazy(() => import('./tab-quick-commands'))
-const TabSettings = lazy(() => import('./tab-settings'))
-const TabThemes = lazy(() => import('./tab-themes'))
-const TabProfiles = lazy(() => import('./tab-profiles'))
-const TabWidgets = lazy(() => import('./tab-widgets'))
+const TabBookmarks = lazy(() => importRetry(() => import('./tab-bookmarks')))
+const TabQuickCommands = lazy(() => importRetry(() => import('./tab-quick-commands')))
+const TabSettings = lazy(() => importRetry(() => import('./tab-settings')))
+const TabThemes = lazy(() => importRetry(() => import('./tab-themes')))
+const TabProfiles = lazy(() => importRetry(() => import('./tab-profiles')))
+const TabWidgets = lazy(() => importRetry(() => import('./tab-widgets')))
 
 const Loading = () => <div style={{ padding: 20, textAlign: 'center' }}><Spin /></div>
 

package/client/components/spice/spice-session.jsx

@@ -15,11 +15,12 @@ import {
 } from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import RemoteFloatControl from '../common/remote-float-control'
+import importRetry from '../../common/import-retry'
 import './spice.styl'
 
 async function loadSpiceModule () {
   if (window.spiceHtml5) return
-  const mod = await import('spice-client')
+  const mod = await importRetry(() => import('spice-client'))
   window.spiceHtml5 = {
     SpiceMainConn: mod.SpiceMainConn,
     sendCtrlAltDel: mod.sendCtrlAltDel

package/client/components/terminal/xterm-loader.js

@@ -1,3 +1,5 @@
+import importRetry from '../../common/import-retry'
+
 window.xtermAddons = window.xtermAddons || {}
 
 let xtermCssLoaded = false
@@ -5,76 +7,76 @@ let xtermCssLoaded = false
 function loadXtermCss () {
   if (xtermCssLoaded) return
   xtermCssLoaded = true
-  import('@xterm/xterm/css/xterm.css')
+  importRetry(() => import('@xterm/xterm/css/xterm.css'))
 }
 
 export async function loadTerminal () {
   if (window.xtermAddons.Terminal) return window.xtermAddons.Terminal
   loadXtermCss()
-  const mod = await import('@xterm/xterm')
+  const mod = await importRetry(() => import('@xterm/xterm'))
   window.xtermAddons.Terminal = mod.Terminal
   return window.xtermAddons.Terminal
 }
 
 export async function loadFitAddon () {
   if (window.xtermAddons.FitAddon) return window.xtermAddons.FitAddon
-  const mod = await import('@xterm/addon-fit')
+  const mod = await importRetry(() => import('@xterm/addon-fit'))
   window.xtermAddons.FitAddon = mod.FitAddon
   return window.xtermAddons.FitAddon
 }
 
 export async function loadAttachAddon () {
   if (window.xtermAddons.AttachAddon) return window.xtermAddons.AttachAddon
-  const mod = await import('@xterm/addon-attach')
+  const mod = await importRetry(() => import('@xterm/addon-attach'))
   window.xtermAddons.AttachAddon = mod.AttachAddon
   return window.xtermAddons.AttachAddon
 }
 
 export async function loadWebLinksAddon () {
   if (window.xtermAddons.WebLinksAddon) return window.xtermAddons.WebLinksAddon
-  const mod = await import('@xterm/addon-web-links')
+  const mod = await importRetry(() => import('@xterm/addon-web-links'))
   window.xtermAddons.WebLinksAddon = mod.WebLinksAddon
   return window.xtermAddons.WebLinksAddon
 }
 
 export async function loadCanvasAddon () {
   if (window.xtermAddons.CanvasAddon) return window.xtermAddons.CanvasAddon
-  const mod = await import('@xterm/addon-canvas')
+  const mod = await importRetry(() => import('@xterm/addon-canvas'))
   window.xtermAddons.CanvasAddon = mod.CanvasAddon
   return window.xtermAddons.CanvasAddon
 }
 
 export async function loadWebglAddon () {
   if (window.xtermAddons.WebglAddon) return window.xtermAddons.WebglAddon
-  const mod = await import('@xterm/addon-webgl')
+  const mod = await importRetry(() => import('@xterm/addon-webgl'))
   window.xtermAddons.WebglAddon = mod.WebglAddon
   return window.xtermAddons.WebglAddon
 }
 
 export async function loadSearchAddon () {
   if (window.xtermAddons.SearchAddon) return window.xtermAddons.SearchAddon
-  const mod = await import('@xterm/addon-search')
+  const mod = await importRetry(() => import('@xterm/addon-search'))
   window.xtermAddons.SearchAddon = mod.SearchAddon
   return window.xtermAddons.SearchAddon
 }
 
 export async function loadLigaturesAddon () {
   if (window.xtermAddons.LigaturesAddon) return window.xtermAddons.LigaturesAddon
-  const mod = await import('@xterm/addon-ligatures')
+  const mod = await importRetry(() => import('@xterm/addon-ligatures'))
   window.xtermAddons.LigaturesAddon = mod.LigaturesAddon
   return window.xtermAddons.LigaturesAddon
 }
 
 export async function loadUnicode11Addon () {
   if (window.xtermAddons.Unicode11Addon) return window.xtermAddons.Unicode11Addon
-  const mod = await import('@xterm/addon-unicode11')
+  const mod = await importRetry(() => import('@xterm/addon-unicode11'))
   window.xtermAddons.Unicode11Addon = mod.Unicode11Addon
   return window.xtermAddons.Unicode11Addon
 }
 
 export async function loadImageAddon () {
   if (window.xtermAddons.ImageAddon) return window.xtermAddons.ImageAddon
-  const mod = await import('@xterm/addon-image')
+  const mod = await importRetry(() => import('@xterm/addon-image'))
   window.xtermAddons.ImageAddon = mod.ImageAddon
   return window.xtermAddons.ImageAddon
 }

package/client/components/terminal-info/terminal-info-entry.jsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react'
+import importRetry from '../../common/import-retry'
 
-const TerminalInfo = lazy(() => import('./terminal-info'))
+const TerminalInfo = lazy(() => importRetry(() => import('./terminal-info')))
 
 export default function TerminalInfoEntry (props) {
   return (

package/client/components/text-editor/text-editor-entry.jsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react'
+import importRetry from '../../common/import-retry'
 
-const TextEditor = lazy(() => import('./text-editor'))
+const TextEditor = lazy(() => importRetry(() => import('./text-editor')))
 
 export default function TextEditorEntry (props) {
   return (

package/client/components/vnc/vnc-session.jsx

@@ -18,13 +18,14 @@ import Modal from '../common/modal'
 import { copy } from '../../common/clipboard'
 import VncForm from './vnc-form'
 import RemoteFloatControl from '../common/remote-float-control'
+import importRetry from '../../common/import-retry'
 import './vnc.styl'
 
 // noVNC module imports — loaded dynamically
 async function loadVncModule () {
   if (window.novnc) return
   console.debug('[VNC-CLIENT] Loading noVNC module...')
-  const mod = await import('@novnc/novnc/core/rfb')
+  const mod = await importRetry(() => import('@novnc/novnc/core/rfb'))
   window.novnc = {
     RFB: mod.default
   }

package/client/store/watch.js

@@ -21,51 +21,45 @@ import dataCompare from '../common/data-compare'
 
 export default store => {
   for (const name of dbNamesForWatch) {
-    window[`watch${name}Running`] = false
     window[`watch${name}`] = autoRun(async () => {
       const n = store.getItems(name)
-      if (window.migrating || window[`watch${name}Running`]) {
+      if (window.migrating) {
         return
       }
-      window[`watch${name}Running`] = true
-      try {
-        const old = refsStatic.get('oldState-' + name)
-        const { updated, added, removed } = dataCompare(
-          old,
-          n
+      const old = refsStatic.get('oldState-' + name)
+      const { updated, added, removed } = dataCompare(
+        old,
+        n
+      )
+      await Promise.all([
+        ...removed.map(item => remove(name, item.id)),
+        ...updated.map(item => update(item.id, item, name, false)),
+        added.length ? insert(name, added) : Promise.resolve()
+      ])
+      const newOrder = (n || []).map(d => d.id)
+      await update(
+        `${name}:order`,
+        newOrder
+      )
+      refsStatic.add('oldState-' + name, deepCopy(n) || [])
+      if (name === 'bookmarks') {
+        store.bookmarksMap = new Map(
+          n.map(d => [d.id, d])
         )
-        await Promise.all([
-          ...removed.map(item => remove(name, item.id)),
-          ...updated.map(item => update(item.id, item, name, false)),
-          added.length ? insert(name, added) : Promise.resolve()
-        ])
-        const newOrder = (n || []).map(d => d.id)
-        await update(
-          `${name}:order`,
-          newOrder
-        )
-        refsStatic.add('oldState-' + name, deepCopy(n) || [])
-        if (name === 'bookmarks') {
-          store.bookmarksMap = new Map(
-            n.map(d => [d.id, d])
-          )
-        }
-        await store.updateLastDataUpdateTime()
-        if (dbNamesForSync.includes(name)) {
-          const syncSetting = store.config.syncSetting || {}
-          const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
-          if (autoSync && autoSyncInterval === 0) {
-            if (autoSyncDirection === 'download') {
-              await store.downloadSettingAll()
-            } else {
-              await store.uploadSettingAll()
-            }
+      }
+      await store.updateLastDataUpdateTime()
+      if (dbNamesForSync.includes(name)) {
+        const syncSetting = store.config.syncSetting || {}
+        const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
+        if (autoSync && autoSyncInterval === 0) {
+          if (autoSyncDirection === 'download') {
+            await store.downloadSettingAll()
+          } else {
+            await store.uploadSettingAll()
           }
         }
-        return store[name]
-      } finally {
-        window[`watch${name}Running`] = false
       }
+      return store[name]
     })
     window[`watch${name}`].start()
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.15.46",
+  "version": "3.15.50",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",