@sigmaott/base-next 1.4.37 → 1.4.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sigmaott/base-next",
   "type": "module",
-  "version": "1.4.37",
+  "version": "1.4.38",
   "publishConfig": {
     "access": "public"
   },

package/src/plugins/wujie.ts

@@ -1,19 +1,72 @@
+import { setupGlobalComponentResolutionHandler, handleComponentResolutionError, isComponentResolutionError } from '../utils/component-resolution'
+
 export default defineNuxtPlugin((nuxtApp) => {
+  // Setup global error handlers
+  setupGlobalComponentResolutionHandler()
+  
   nuxtApp.hook('app:created', async (app) => {
-    await new Promise<void>((resolve) => {
+    await new Promise<void>((resolve, reject) => {
       if (window.__POWERED_BY_WUJIE__) {
         window.__WUJIE_MOUNT = () => {
-          syncMicroState()
-          resolve()
+          try {
+            syncMicroState()
+            resolve()
+          } catch (error) {
+            console.error('[Wujie] Error during mount:', error)
+            if (isComponentResolutionError(error)) {
+              handleComponentResolutionError(error, 'wujie-mount')
+            }
+            reject(error)
+          }
         }
         window.__WUJIE_UNMOUNT = () => {
-          app.unmount()
+          try {
+            app.unmount()
+          } catch (error) {
+            console.error('[Wujie] Error during unmount:', error)
+            if (isComponentResolutionError(error)) {
+              handleComponentResolutionError(error, 'wujie-unmount')
+            }
+          }
+        }
+        
+        // Add timeout to prevent hanging
+        const timeout = setTimeout(() => {
+          console.warn('[Wujie] Mount timeout, resolving anyway')
+          resolve()
+        }, 5000)
+        
+        try {
+          window.__WUJIE.mount()
+          clearTimeout(timeout)
+        } catch (error) {
+          clearTimeout(timeout)
+          console.error('[Wujie] Error mounting app:', error)
+          if (isComponentResolutionError(error)) {
+            handleComponentResolutionError(error, 'wujie-mount-init')
+          }
+          reject(error)
         }
-        window.__WUJIE.mount()
       }
       else {
         resolve()
       }
     })
   })
+  
+  // Enhanced error handling for component resolution
+  nuxtApp.hook('app:error', (error) => {
+    if (isComponentResolutionError(error)) {
+      handleComponentResolutionError(error, 'nuxt-app-error')
+    }
+  })
+  
+  // Handle Vue component errors
+  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
+    if (isComponentResolutionError(error)) {
+      handleComponentResolutionError(error, 'vue-error-handler')
+    } else {
+      console.error('[Vue] Error:', error, 'Info:', info)
+    }
+  }
 })

package/src/utils/component-resolution.ts

@@ -0,0 +1,177 @@
+/**
+ * Utility functions for handling component resolution issues in micro-frontend architecture
+ */
+
+export interface ComponentResolutionError extends Error {
+  componentName?: string
+  path?: string
+  isRecoverable?: boolean
+}
+
+/**
+ * Detects if an error is related to component resolution
+ */
+export function isComponentResolutionError(error: any): error is ComponentResolutionError {
+  return error?.message?.includes('Couldn\'t resolve component') ||
+         error?.message?.includes('Failed to resolve component') ||
+         error?.message?.includes('Component not found')
+}
+
+/**
+ * Handles component resolution errors with recovery strategies
+ */
+export function handleComponentResolutionError(error: ComponentResolutionError, context: string = 'unknown') {
+  console.warn(`[${context}] Component resolution error detected:`, error)
+  
+  // Extract component name and path from error message
+  const componentMatch = error.message?.match(/component "([^"]+)"/)
+  const pathMatch = error.message?.match(/at "([^"]+)"/)
+  
+  if (componentMatch) {
+    error.componentName = componentMatch[1]
+  }
+  if (pathMatch) {
+    error.path = pathMatch[1]
+  }
+  
+  // Determine if error is recoverable
+  error.isRecoverable = !error.message?.includes('permanent') && 
+                       !error.message?.includes('fatal')
+  
+  if (error.isRecoverable) {
+    console.log(`[${context}] Attempting recovery for component: ${error.componentName} at ${error.path}`)
+    
+    // Strategy 1: Wait and retry
+    setTimeout(() => {
+      if (window.location) {
+        console.log(`[${context}] Reloading page for recovery...`)
+        window.location.reload()
+      }
+    }, 1000)
+  } else {
+    console.error(`[${context}] Non-recoverable component resolution error:`, error)
+  }
+  
+  return error.isRecoverable
+}
+
+/**
+ * Creates a retry mechanism for component resolution
+ */
+export function createComponentResolutionRetry(
+  maxRetries: number = 3,
+  delay: number = 1000
+) {
+  let retryCount = 0
+  
+  return function retryComponentResolution<T>(
+    operation: () => T | Promise<T>,
+    context: string = 'component-resolution'
+  ): Promise<T> {
+    return new Promise((resolve, reject) => {
+      const attempt = async () => {
+        try {
+          const result = await operation()
+          resolve(result)
+        } catch (error) {
+          if (isComponentResolutionError(error) && retryCount < maxRetries) {
+            retryCount++
+            console.warn(`[${context}] Retry ${retryCount}/${maxRetries} for component resolution...`)
+            
+            setTimeout(() => {
+              attempt()
+            }, delay * retryCount)
+          } else {
+            handleComponentResolutionError(error as ComponentResolutionError, context)
+            reject(error)
+          }
+        }
+      }
+      
+      attempt()
+    })
+  }
+}
+
+/**
+ * Debounced component resolution checker
+ */
+export function createComponentResolutionChecker(
+  checkInterval: number = 100,
+  maxChecks: number = 50
+) {
+  let checkCount = 0
+  
+  return function checkComponentResolution(
+    componentName: string,
+    context: string = 'component-checker'
+  ): Promise<boolean> {
+    return new Promise((resolve) => {
+      const check = () => {
+        checkCount++
+        
+        // Check if component exists in DOM
+        const componentExists = document.querySelector(`[data-component="${componentName}"]`) ||
+                               document.querySelector(`[data-v-${componentName}]`) ||
+                               document.querySelector(`#${componentName}`)
+        
+        if (componentExists) {
+          console.log(`[${context}] Component ${componentName} found after ${checkCount} checks`)
+          resolve(true)
+        } else if (checkCount >= maxChecks) {
+          console.warn(`[${context}] Component ${componentName} not found after ${maxChecks} checks`)
+          resolve(false)
+        } else {
+          setTimeout(check, checkInterval)
+        }
+      }
+      
+      check()
+    })
+  }
+}
+
+/**
+ * Global error handler for component resolution issues
+ */
+export function setupGlobalComponentResolutionHandler() {
+  // Handle unhandled promise rejections
+  window.addEventListener('unhandledrejection', (event) => {
+    if (isComponentResolutionError(event.reason)) {
+      console.warn('[Global] Unhandled component resolution error:', event.reason)
+      handleComponentResolutionError(event.reason, 'global-unhandled')
+      event.preventDefault()
+    }
+  })
+  
+  // Handle general errors
+  window.addEventListener('error', (event) => {
+    if (isComponentResolutionError(event.error)) {
+      console.warn('[Global] Component resolution error:', event.error)
+      handleComponentResolutionError(event.error, 'global-error')
+      event.preventDefault()
+    }
+  })
+}
+
+/**
+ * Vue composable for component resolution error handling
+ */
+export function useComponentResolutionError() {
+  const errorHandler = (error: any, context: string = 'vue-component') => {
+    if (isComponentResolutionError(error)) {
+      return handleComponentResolutionError(error, context)
+    }
+    return false
+  }
+  
+  const retryHandler = createComponentResolutionRetry()
+  const checker = createComponentResolutionChecker()
+  
+  return {
+    errorHandler,
+    retryHandler,
+    checker,
+    isComponentResolutionError
+  }
+}

package/src/utils/micro.ts

@@ -74,16 +74,64 @@ const defaultLifecycles: Lifecycles = {
   beforeLoad: (appWindow) => {
     console.log(`${appWindow.__WUJIE.id} beforeLoad`)
     console.log('[LOG] ~ file: micro.ts:76 ~ appWindow:', appWindow)
-    addMicroApp(appWindow)
+    try {
+      addMicroApp(appWindow)
+    } catch (error) {
+      console.error(`[Micro] Error adding micro app ${appWindow.__WUJIE.id}:`, error)
+    }
+  },
+  beforeMount: (appWindow) => {
+    console.log(`${appWindow.__WUJIE.id} beforeMount`)
+    // Ensure component resolution is ready
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 100)
+    })
+  },
+  afterMount: (appWindow) => {
+    console.log(`${appWindow.__WUJIE.id} afterMount`)
+    // Verify component is properly mounted
+    try {
+      if (appWindow.document && appWindow.document.querySelector('[data-v-app]')) {
+        console.log(`${appWindow.__WUJIE.id} component properly mounted`)
+      }
+    } catch (error) {
+      console.warn(`${appWindow.__WUJIE.id} component mount verification failed:`, error)
+    }
+  },
+  beforeUnmount: (appWindow) => {
+    console.log(`${appWindow.__WUJIE.id} beforeUnmount`)
+    try {
+      // Clean up any pending operations
+      if (appWindow.__WUJIE?.cleanup) {
+        appWindow.__WUJIE.cleanup()
+      }
+    } catch (error) {
+      console.error(`${appWindow.__WUJIE.id} cleanup error:`, error)
+    }
+  },
+  afterUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterUnmount`),
+  activated: (appWindow) => {
+    console.log(`${appWindow.__WUJIE.id} activated`)
+    // Ensure component is ready when activated
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 50)
+    })
   },
-  beforeMount: appWindow => console.log(`${appWindow.__WUJIE.id} beforeMount`),
-  afterMount: appWindow => console.log(`${appWindow.__WUJIE.id} afterMount`),
-  beforeUnmount: appWindow => console.log(`${appWindow.__WUJIE.id} beforeUnmount `),
-  afterUnmount: appWindow => console.log(`${appWindow.__WUJIE.id} afterUnmount`),
-  activated: appWindow => console.log(`${appWindow.__WUJIE.id} activated`),
   deactivated: appWindow => console.log(`${appWindow.__WUJIE.id} deactivated`),
-  loadError: (url, e) => console.log(`${url}`, e),
-
+  loadError: (url, e) => {
+    console.error(`[Micro] Load error for ${url}:`, e)
+    // Attempt recovery for component resolution errors
+    if (e.message?.includes('Couldn\'t resolve component')) {
+      console.warn('[Micro] Component resolution error detected, attempting recovery...')
+      setTimeout(() => {
+        window.location.reload()
+      }, 2000)
+    }
+  },
 }
 
 const plugins: Array<plugin> = [