fix(widget): add iframe loading retry logic

apps/widget-configurator/src/components/VersionedCowSwapWidget/VersionedCowSwapWidget.tsx

@@ -17,6 +17,7 @@ export interface VersionedCowSwapWidgetProps {
   provider?: CowSwapWidgetProps['provider']
   listeners?: CowWidgetEventListeners
   onReady?: () => void
+  onLoadingError?: () => void
 }
 
 function attachIframeLoadReveal(host: HTMLElement, onIframeLoad: () => void): void {
@@ -80,8 +81,9 @@ export function VersionedCowSwapWidget({
   provider,
   listeners,
   onReady,
+  onLoadingError,
 }: VersionedCowSwapWidgetProps): ReactNode {
-  const widgetProps = { params, provider, listeners, onReady }
+  const widgetProps = { params, provider, listeners, onReady, onLoadingError }
 
   if (sdkVersion === 'local') {
     return <CowSwapWidget {...widgetProps} />

apps/widget-configurator/src/components/configurator/configurator.component.tsx

@@ -39,6 +39,10 @@ declare global {
   }
 }
 
+const onLoadingError: () => void = () => {
+  console.log('WIDGET LOADING ERROR')
+}
+
 // eslint-disable-next-line max-lines-per-function
 export function Configurator({ title }: { title: string }): ReactNode {
   const configuratorRef = useRef<HTMLDivElement | null>(null)
@@ -191,6 +195,7 @@ export function Configurator({ title }: { title: string }): ReactNode {
               provider={configuratorState.widgetMode === 'standalone' ? undefined : provider}
               listeners={listeners}
               onReady={handlePreviewReady}
+              onLoadingError={onLoadingError}
             />
           </Box>
 

libs/widget-lib/src/cowSwapWidget.ts

@@ -76,117 +76,137 @@ export function createCowSwapWidget(container: HTMLElement, props: CowSwapWidget
   container.innerHTML = ''
   container.appendChild(iframe)
 
-  const { cancelWidgetLoading, onWidgetReady } = widgetIframeLoading(
-    iframe,
-    props.onLoadingError,
-    props.loadingErrorStyles,
-  )
+  let iframeWindow: Window | null = null
+  let updateInterceptDeepLinks: () => void = () => void 0
+  let updateWidgetHooks: () => void = () => void 0
+  let cancelWidgetLoading: () => void = () => void 0
 
-  const { contentWindow: iframeWindow } = iframe
-  if (!iframeWindow) {
-    console.error('Iframe does not contain a window', iframe)
-    throw new Error('Iframe does not contain a window!')
-  }
+  let iFrameCowEventEmitter: IframeCowEventEmitter | null = null
+  let iframeRpcProviderBridge: IframeRpcProviderBridge | null = null
+  let iframeSafeSdkBridge: IframeSafeSdkBridge | null = null
 
-  windowListeners.push(
-    listenToReady(iframeWindow, iframeOrigin, () => {
-      onReady?.()
-      onWidgetReady()
-    }),
-  )
+  let heightChangeListeners: WindowListener[] = []
+  let widgetHooksListener: WindowListener | null = null
 
-  // 3. Send appCode (once the widget posts the ACTIVATE message)
-  windowListeners.push(sendAppCodeOnActivation(iframeWindow, iframeOrigin, currentParams.appCode))
+  function setup(): void {
+    iframeWindow = iframe.contentWindow
+    if (!iframeWindow) {
+      console.error('Iframe does not contain a window', iframe)
+      throw new Error('Iframe does not contain a window!')
+    }
 
-  // 4. Handle widget height changes (re-registered when params change so defaults/maxHeight stay in sync)
-  const heightChangeListeners: WindowListener[] = listenToHeightChanges(iframe, iframeOrigin, (nextHeight) => {
-    lastDynamicHeight = nextHeight
-  })
+    windowListeners.push(
+      listenToReady(iframeWindow, iframeOrigin, () => {
+        onReady?.()
+        onWidgetReady()
+      }),
+    )
+
+    // 3. Send appCode (once the widget posts the ACTIVATE message)
+    windowListeners.push(sendAppCodeOnActivation(iframeWindow, iframeOrigin, currentParams.appCode))
+
+    // 4. Handle widget height changes (re-registered when params change so defaults/maxHeight stay in sync)
+    heightChangeListeners = listenToHeightChanges(iframe, iframeOrigin, (nextHeight) => {
+      lastDynamicHeight = nextHeight
+    })
+
+    // 5. Intercept deeplinks navigation in the iframe
+    let interceptDeepLinksListener: WindowListener | null = null
 
-  // 5. Intercept deeplinks navigation in the iframe
-  let interceptDeepLinksListener: WindowListener | null = null
+    updateInterceptDeepLinks = () => {
+      if (!iframeWindow) return
 
-  function updateInterceptDeepLinks(): void {
-    if (!iframeWindow) return
+      if (interceptDeepLinksListener) {
+        window.removeEventListener('message', interceptDeepLinksListener)
+      }
+
+      // If `window.open` is disabled, do not intercept deep links.
+      if (currentParams.disableWindowOpen) return
+
+      interceptDeepLinksListener = interceptDeepLinks(iframeOrigin, iframeWindow)
+      windowListeners.push(interceptDeepLinksListener)
+    }
+    // 6. Handle two-way communication of widget hooks
+
+    updateWidgetHooks = () => {
+      if (!iframeWindow) return
 
-    if (interceptDeepLinksListener) {
-      window.removeEventListener('message', interceptDeepLinksListener)
+      if (widgetHooksListener) {
+        window.removeEventListener('message', widgetHooksListener)
+      }
+
+      widgetHooksListener = processWidgetHooks(iframeWindow, iframeOrigin, currentParams.hooks)
     }
 
-    // If `window.open` is disabled, do not intercept deep links.
-    if (currentParams.disableWindowOpen) return
+    updateInterceptDeepLinks()
+    updateWidgetHooks()
+
+    // 7. Handle and forward widget events to the listeners
+    iFrameCowEventEmitter = new IframeCowEventEmitter(window, iframeOrigin, iframeWindow, listeners)
 
-    interceptDeepLinksListener = interceptDeepLinks(iframeOrigin, iframeWindow)
-    windowListeners.push(interceptDeepLinksListener)
+    // 8. Wire up the iframeRpcProviderBridge with the provider (so RPC calls flow back and forth)
+    iframeRpcProviderBridge = updateProvider(iframeWindow, iframeOrigin, null, provider)
+
+    // 9. Schedule the uploading of the params, once the iframe is loaded
+    iframe.addEventListener('load', () => {
+      if (!iframeWindow) return
+      updateParams(iframeWindow, iframeOrigin, currentParams, provider)
+    })
+
+    // 10. Listen for Safe SDK messages from the iframe only when explicitly enabled by the host.
+    iframeSafeSdkBridge = enableSafeSdkBridge ? new IframeSafeSdkBridge(window, iframeWindow) : null
+
+    const loadingContext = widgetIframeLoading(container, iframe, setup, destroy, props.onLoadingError)
+
+    cancelWidgetLoading = loadingContext.cancelWidgetLoading
+    const onWidgetReady = loadingContext.onWidgetReady
   }
-  // 6. Handle two-way communication of widget hooks
-  let widgetHooksListener: WindowListener | null = null
 
-  function updateWidgetHooks(): void {
-    if (!iframeWindow) return
+  function destroy(skipIframeDestroy = false): void {
+    // Disconnect rpc provider and unsubscribe to events
+    iframeRpcProviderBridge?.disconnect()
+    // Stop listening for cow events
+    iFrameCowEventEmitter?.stopListeningIframe()
 
+    // Disconnect all listeners
+    heightChangeListeners.forEach((listener) => window.removeEventListener('message', listener))
+    windowListeners.forEach((listener) => window.removeEventListener('message', listener))
     if (widgetHooksListener) {
       window.removeEventListener('message', widgetHooksListener)
     }
 
-    widgetHooksListener = processWidgetHooks(iframeWindow, iframeOrigin, currentParams.hooks)
-  }
-
-  updateInterceptDeepLinks()
-  updateWidgetHooks()
+    // Stop listening for SDK messages
+    iframeSafeSdkBridge?.stopListening()
 
-  // 7. Handle and forward widget events to the listeners
-  const iFrameCowEventEmitter = new IframeCowEventEmitter(window, iframeOrigin, iframeWindow, listeners)
+    // Destroy the iframe
+    if (!skipIframeDestroy && iframe && iframe.parentNode === container) container.removeChild(iframe)
 
-  // 8. Wire up the iframeRpcProviderBridge with the provider (so RPC calls flow back and forth)
-  let iframeRpcProviderBridge = updateProvider(iframeWindow, iframeOrigin, null, provider)
-
-  // 9. Schedule the uploading of the params, once the iframe is loaded
-  iframe.addEventListener('load', () => {
-    updateParams(iframeWindow, iframeOrigin, currentParams, provider)
-  })
+    cancelWidgetLoading?.()
+  }
 
-  // 10. Listen for Safe SDK messages from the iframe only when explicitly enabled by the host.
-  const iframeSafeSdkBridge = enableSafeSdkBridge ? new IframeSafeSdkBridge(window, iframeWindow) : null
+  setup()
 
   // 11. Return the handler, so the widget, listeners, and provider can be updated
   return {
     iframe,
     updateParams: (newParams: CowSwapWidgetParams) => {
+      if (!iframeWindow) return
       currentParams = resolveWidgetParams(newParams)
 
       updateIframeElement(iframe, currentParams, lastDynamicHeight)
       updateParams(iframeWindow, iframeOrigin, currentParams, provider)
       updateInterceptDeepLinks()
       updateWidgetHooks()
     },
-    updateListeners: (newListeners?: CowWidgetEventListeners) => iFrameCowEventEmitter.updateListeners(newListeners),
+    updateListeners: (newListeners?: CowWidgetEventListeners) => iFrameCowEventEmitter?.updateListeners(newListeners),
     updateProvider: (newProvider) => {
+      if (!iframeWindow) return
+
       provider = newProvider
       iframeRpcProviderBridge = updateProvider(iframeWindow, iframeOrigin, iframeRpcProviderBridge, newProvider)
     },
 
-    destroy: () => {
-      // Disconnect rpc provider and unsubscribe to events
-      iframeRpcProviderBridge.disconnect()
-      // Stop listening for cow events
-      iFrameCowEventEmitter.stopListeningIframe()
-
-      // Disconnect all listeners
-      heightChangeListeners.forEach((listener) => window.removeEventListener('message', listener))
-      windowListeners.forEach((listener) => window.removeEventListener('message', listener))
-      if (widgetHooksListener) {
-        window.removeEventListener('message', widgetHooksListener)
-      }
-
-      // Stop listening for SDK messages
-      iframeSafeSdkBridge?.stopListening()
-
-      // Destroy the iframe
-      if (iframe && iframe.parentNode === container) container.removeChild(iframe)
-
-      cancelWidgetLoading()
-    },
+    destroy,
   }
 }
 

libs/widget-lib/src/types.ts

@@ -93,11 +93,6 @@ export interface CowSwapWidgetProps {
   listeners?: CowWidgetEventListeners
   onReady?(): void
   onLoadingError?(): void
-  /**
-   * Custom CSS appended to the error document displayed inside the iframe when the widget fails to load.
-   * Use it to override the default look (`.errorContent` and `.reloadButton` classes).
-   */
-  loadingErrorStyles?: string
   enableSafeSdkBridge?: boolean
 }
 

libs/widget-lib/src/widgetIframeLoading.test.ts

@@ -0,0 +1,80 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { widgetIframeLoading } from './widgetIframeLoading'
+
+const ERROR_CLASS = 'cow-widget-loading-error'
+const WIDGET_ORIGIN = 'https://swap.cow.fi'
+
+type LoadingState = ReturnType<typeof widgetIframeLoading>
+
+const activeStates: LoadingState[] = []
+
+describe('widgetIframeLoading error UI styling', () => {
+  beforeEach(() => {
+    // The iframe `error` handler logs intentionally; keep test output pristine.
+    jest.spyOn(console, 'error').mockImplementation(() => void 0)
+  })
+
+  afterEach(() => {
+    activeStates.splice(0).forEach((state) => state.cancelWidgetLoading())
+    document.body.innerHTML = ''
+    document.head.querySelectorAll(`style[data-${ERROR_CLASS}]`).forEach((el) => el.remove())
+    jest.restoreAllMocks()
+  })
+
+  it('renders the error container with its class', () => {
+    const { container, iframe } = setup()
+
+    failIframe(iframe)
+
+    const errorEl = container.querySelector<HTMLElement>(`.${ERROR_CLASS}`)
+    expect(errorEl).not.toBeNull()
+  })
+
+  it('injects the default error styles for the container and its children', () => {
+    const { iframe } = setup()
+
+    failIframe(iframe)
+
+    const style = document.head.querySelector(`style[data-${ERROR_CLASS}]`)
+    expect(style).not.toBeNull()
+    expect(style?.textContent).toContain(`.${ERROR_CLASS}`)
+    expect(style?.textContent).toContain(`.${ERROR_CLASS} button`)
+    expect(style?.textContent).toContain(`.${ERROR_CLASS} p`)
+  })
+
+  it('injects the default error styles at most once across repeated failures', () => {
+    const first = setup()
+    failIframe(first.iframe)
+
+    const second = setup()
+    failIframe(second.iframe)
+
+    expect(document.head.querySelectorAll(`style[data-${ERROR_CLASS}]`).length).toBeLessThanOrEqual(1)
+  })
+})
+
+function setup(): { container: HTMLElement; iframe: HTMLIFrameElement; state: LoadingState } {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  const iframe = document.createElement('iframe')
+  iframe.src = `${WIDGET_ORIGIN}/`
+  container.appendChild(iframe)
+
+  const state = widgetIframeLoading(
+    container,
+    iframe,
+    () => void 0,
+    () => void 0,
+  )
+  activeStates.push(state)
+
+  return { container, iframe, state }
+}
+
+function failIframe(iframe: HTMLIFrameElement): void {
+  iframe.dispatchEvent(new Event('error'))
+}