Debug: Agregar manejo robusto de errores en componentes

- Agregar try-catch en loadLotes/loadOperaciones
- Agregar try-catch en onMounted y watch
- Agregar estado de error y mostrar mensaje en UI
- Agregar console.log detallados para debug
- Mostrar errores en tarjeta roja sin crashear la app

nuxt4/app/components/lotes/Table.vue

@@ -27,6 +27,18 @@
       />
     </div>
 
+    <!-- Mensaje de error -->
+    <UCard v-if="error" class="bg-red-50 dark:bg-red-950 border-red-500">
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5" />
+        <div class="flex-1">
+          <h3 class="font-semibold text-red-600">Error cargando lotes</h3>
+          <p class="text-sm text-red-700 dark:text-red-400 mt-1">{{ error }}</p>
+          <p class="text-xs text-red-600 dark:text-red-500 mt-2">Ver consola del navegador (F12) para más detalles</p>
+        </div>
+      </div>
+    </UCard>
+
     <UCard>
       <UTable
         v-model="selected"
@@ -104,6 +116,7 @@ const lotes = ref<Lote[]>([])
 const loading = ref(false)
 const selected = ref<Lote[]>([])
 const filtroTipo = ref('')
+const error = ref<string | null>(null)
 
 const columns = [
   { key: 'codigo', label: 'Código' },
@@ -115,10 +128,21 @@ const columns = [
 
 const loadLotes = async () => {
   loading.value = true
+  error.value = null
   try {
+    console.log('🟢 LotesTable: Iniciando carga de lotes...')
     lotes.value = await fetchLotes({
       tipo: filtroTipo.value || undefined,
     })
+    console.log('🟢 LotesTable: Lotes cargados exitosamente:', lotes.value.length)
+  } catch (err: any) {
+    const errorMsg = err?.message || String(err)
+    error.value = errorMsg
+    console.error('❌ LotesTable: Error cargando lotes:', {
+      message: errorMsg,
+      stack: err?.stack,
+      error: err
+    })
   } finally {
     loading.value = false
   }
@@ -159,11 +183,21 @@ const formatDate = (dateString: string) => {
 
 // Cargar lotes al montar
 onMounted(() => {
+  try {
+    console.log('🟢 LotesTable: Componente montado, cargando lotes...')
     loadLotes()
+  } catch (err: any) {
+    console.error('❌ LotesTable: Error en onMounted:', err)
+  }
 })
 
 // Recargar cuando cambia el filtro
 watch(filtroTipo, () => {
+  try {
+    console.log('🟢 LotesTable: Filtro cambiado, recargando lotes...')
     loadLotes()
+  } catch (err: any) {
+    console.error('❌ LotesTable: Error en watch:', err)
+  }
 })
 </script>

nuxt4/app/components/operaciones/Table.vue

@@ -27,6 +27,18 @@
       />
     </div>
 
+    <!-- Mensaje de error -->
+    <UCard v-if="error" class="bg-red-50 dark:bg-red-950 border-red-500">
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5" />
+        <div class="flex-1">
+          <h3 class="font-semibold text-red-600">Error cargando operaciones</h3>
+          <p class="text-sm text-red-700 dark:text-red-400 mt-1">{{ error }}</p>
+          <p class="text-xs text-red-600 dark:text-red-500 mt-2">Ver consola del navegador (F12) para más detalles</p>
+        </div>
+      </div>
+    </UCard>
+
     <UCard>
       <UTable
         :rows="operaciones"
@@ -81,6 +93,7 @@ console.log('🟡 OperacionesTable: Composable cargado')
 const operaciones = ref<Operacion[]>([])
 const loading = ref(false)
 const filtroTipo = ref('')
+const error = ref<string | null>(null)
 
 const columns = [
   { key: 'tipo', label: 'Tipo de Operación' },
@@ -91,10 +104,21 @@ const columns = [
 
 const loadOperaciones = async () => {
   loading.value = true
+  error.value = null
   try {
+    console.log('🟡 OperacionesTable: Iniciando carga de operaciones...')
     operaciones.value = await fetchOperaciones({
       tipo: filtroTipo.value || undefined,
     })
+    console.log('🟡 OperacionesTable: Operaciones cargadas exitosamente:', operaciones.value.length)
+  } catch (err: any) {
+    const errorMsg = err?.message || String(err)
+    error.value = errorMsg
+    console.error('❌ OperacionesTable: Error cargando operaciones:', {
+      message: errorMsg,
+      stack: err?.stack,
+      error: err
+    })
   } finally {
     loading.value = false
   }
@@ -137,14 +161,23 @@ const formatDate = (dateString: string) => {
   })
 }
 
-// onMounted(() => {
-//   console.log('🟡 OperacionesTable montado correctamente')
-//   loadOperaciones().catch(error => {
-//     console.error('❌ Error cargando operaciones:', error)
-//   })
-// })
+// Cargar operaciones al montar
+onMounted(() => {
+  try {
+    console.log('🟡 OperacionesTable: Componente montado, cargando operaciones...')
+    loadOperaciones()
+  } catch (err: any) {
+    console.error('❌ OperacionesTable: Error en onMounted:', err)
+  }
+})
 
-// watch(filtroTipo, () => {
-//   loadOperaciones()
-// })
+// Recargar cuando cambia el filtro
+watch(filtroTipo, () => {
+  try {
+    console.log('🟡 OperacionesTable: Filtro cambiado, recargando operaciones...')
+    loadOperaciones()
+  } catch (err: any) {
+    console.error('❌ OperacionesTable: Error en watch:', err)
+  }
+})
 </script>