diff --git a/docs/LIMPIAR_CACHE_DEFINITIVO.md b/docs/LIMPIAR_CACHE_DEFINITIVO.md new file mode 100644 index 00000000..c0f5bbfc --- /dev/null +++ b/docs/LIMPIAR_CACHE_DEFINITIVO.md @@ -0,0 +1,204 @@ +# 🚨 LIMPIEZA DEFINITIVA DE CACHÉ - Error useLayoutEffect + +## ❌ Problema Persistente + +El navegador sigue usando `vendor-utils-ClLzZSLi.js` (hash antiguo) aunque el servidor tiene `1-vendor-utils-aDTNHcbX.js` (hash nuevo). + +## ✅ Solución DEFINITIVA (3 métodos) + +### Método 1: Script Automático (RECOMENDADO) + +1. **Abrir:** `http://207.180.226.141:8607` +2. **Abrir DevTools (F12) > Console** +3. **Pegar y ejecutar:** + +```javascript +(async () => { + console.log('🧹 LIMPIEZA DEFINITIVA DE CACHÉ...'); + + try { + // 1. Desregistrar TODOS los Service Workers + const registrations = await navigator.serviceWorker.getRegistrations(); + console.log(`📋 Encontrados ${registrations.length} Service Worker(s)`); + + for (let registration of registrations) { + const unregistered = await registration.unregister(); + console.log('✅ Service Worker desregistrado:', registration.scope); + } + + // 2. Eliminar TODOS los cachés + const cacheNames = await caches.keys(); + console.log(`📋 Encontrados ${cacheNames.length} caché(s)`); + + for (let name of cacheNames) { + const deleted = await caches.delete(name); + console.log('✅ Caché eliminado:', name, deleted ? '✓' : '✗'); + } + + // 3. Limpiar TODOS los storages + localStorage.clear(); + sessionStorage.clear(); + console.log('✅ localStorage y sessionStorage limpiados'); + + // 4. Limpiar IndexedDB (si existe) + if ('indexedDB' in window) { + try { + const databases = await indexedDB.databases(); + for (let db of databases) { + indexedDB.deleteDatabase(db.name); + console.log('✅ IndexedDB eliminado:', db.name); + } + } catch (e) { + console.warn('⚠️ No se pudo limpiar IndexedDB:', e); + } + } + + console.log('✅ LIMPIEZA COMPLETA'); + console.log('🔄 Recargando página en 2 segundos...'); + + setTimeout(() => { + window.location.href = window.location.href.split('?')[0] + '?nocache=' + Date.now(); + }, 2000); + + } catch (error) { + console.error('❌ Error durante la limpieza:', error); + alert('Error durante la limpieza. Por favor, limpia manualmente.'); + } +})(); +``` + +4. **Presionar Enter** y esperar + +### Método 2: Limpieza Manual Completa + +1. **DevTools (F12) > Application** + +2. **Service Workers:** + - Click en "Unregister" para cada uno + - Marcar "Bypass for network" si está disponible + +3. **Cache Storage:** + - Click derecho en cada caché → "Delete" + - O seleccionar todos → "Delete All" + +4. **Storage:** + - Click en "Clear site data" + - Marcar TODAS las opciones: + - ✅ Cookies and other site data + - ✅ Cached images and files + - ✅ Offline website data + - Click en "Clear site data" + +5. **Cerrar DevTools** + +6. **Recargar con caché limpio:** + - `Ctrl+Shift+Delete` → Seleccionar "Cached images and files" → "Clear data" + - O `Ctrl+Shift+R` (Windows/Linux) / `Cmd+Shift+R` (Mac) + +### Método 3: Modo Incógnito + Hard Reload + +1. **Abrir ventana incógnita:** + - `Ctrl+Shift+N` (Windows/Linux) + - `Cmd+Shift+N` (Mac) + +2. **Abrir DevTools (F12) > Network** + +3. **Ir a:** `http://207.180.226.141:8607` + +4. **Verificar en Network:** + - Debe aparecer: `1-vendor-utils-aDTNHcbX.js` (nuevo) + - NO debe aparecer: `vendor-utils-ClLzZSLi.js` (antiguo) + +## 🔍 Verificación Post-Limpieza + +### 1. Verificar Chunks en Network + +**DevTools > Network > Recargar página:** + +✅ **DEBE aparecer:** +- `0-vendor-react-*.js` (nuevo, con prefijo 0-) +- `1-vendor-utils-*.js` (nuevo, con prefijo 1-) +- `2-vendor-markdown-*.js` (nuevo, con prefijo 2-) + +❌ **NO debe aparecer:** +- `vendor-utils-ClLzZSLi.js` (antiguo, sin prefijo) +- `vendor-other-*.js` (nunca debe aparecer) + +### 2. Verificar Console + +**DevTools > Console:** + +✅ **NO debe aparecer:** +``` +TypeError: Cannot read properties of undefined (reading 'useLayoutEffect') +``` + +✅ **Puede aparecer (no crítico):** +- Errores de extensiones del navegador (Apollo DevTools, etc.) +- Warnings de CORS de extensiones + +### 3. Verificar Service Worker + +**DevTools > Application > Service Workers:** + +✅ **DEBE mostrar:** +- Versión: `v1.0.4` o superior +- Estado: "activated and is running" + +❌ **NO debe mostrar:** +- Versiones antiguas (`v1.0.2`, `v1.0.3` sin actualizar) + +## ⚠️ Si el Problema Persiste + +### Verificar Servidor + +```bash +ssh root@207.180.226.141 +cd /var/www/emerges-tes +ls -la dist/assets/ | grep vendor +``` + +**DEBE mostrar:** +- `0-vendor-react-*.js` +- `1-vendor-utils-*.js` +- `2-vendor-markdown-*.js` + +### Rebuild en Servidor + +Si el servidor no tiene el build nuevo: + +```bash +cd /var/www/emerges-tes +git pull origin main +npm install +npm run build +``` + +### Verificar Service Worker en Servidor + +```bash +cat dist/sw.js | grep CACHE_VERSION +``` + +**DEBE mostrar:** +``` +const CACHE_VERSION = 'v1.0.4'; +``` + +## 📝 Notas Importantes + +1. **El build nuevo está CORRECTO** en el servidor +2. **El problema es CACHÉ DEL NAVEGADOR** +3. **Los errores de extensiones** (Apollo DevTools, etc.) no son críticos +4. **Después de limpiar el caché**, el error debería desaparecer completamente + +## 🎯 Resultado Esperado + +Después de limpiar el caché: + +✅ Aplicación carga correctamente +✅ `1-vendor-utils-*.js` se carga (nuevo) +✅ NO aparece `vendor-utils-ClLzZSLi.js` (antiguo) +✅ NO hay errores `useLayoutEffect` +✅ Service Worker en versión `v1.0.4` +