codigo0/scripts/diagnostico_errores.md

🔍 Diagnóstico de Errores - EMERGES TES

Guía de diagnóstico y solución de problemas específicos para el proyecto EMERGES TES - Guía de Protocolos de Emergencias.

---

🧹 Limpieza Rápida

Script Automatizado

./scripts/limpiar_errores_desarrollo.sh

Este script:

• ✅ Limpia caché de Vite
• ✅ Elimina builds anteriores
• ✅ Verifica TypeScript
• ✅ Proporciona instrucciones para limpiar almacenamiento

---

🔧 Problemas Comunes y Soluciones

1. Error: "Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null"

Causa: Componente <Link> o <NavLink> renderizado fuera del contexto de <BrowserRouter>

Solución aplicada:

• ✅ ErrorBoundary movido dentro de <BrowserRouter> en src/App.tsx
• ✅ Eliminado import de Link de ErrorBoundary.tsx (no se usa)

Verificación:

// ✅ CORRECTO (ErrorBoundary dentro de BrowserRouter)
<BrowserRouter>
  <ErrorBoundary>
    {/* ... */}
  </ErrorBoundary>
</BrowserRouter>

// ❌ INCORRECTO (ErrorBoundary fuera de BrowserRouter)
<ErrorBoundary>
  <BrowserRouter>
    {/* ... */}
  </BrowserRouter>
</ErrorBoundary>

---

2. Error: "Failed to execute 'addAll' on 'Cache': Request failed"

Causa: Service Worker intenta cachear recursos que no existen o no son accesibles

Solución aplicada:

• ✅ Service Worker actualizado para usar Promise.allSettled en lugar de cache.addAll
• ✅ Manejo de errores individual para cada recurso
• ✅ El Service Worker continúa aunque algunos recursos fallen

Código aplicado:

// En public/sw.js
return Promise.allSettled(
  STATIC_ASSETS.map(url => 
    cache.add(url).catch(err => {
      console.warn(`[SW] Failed to cache ${url}:`, err);
      return null;
    })
  )
);

---

3. Error: "Objects are not valid as a React child"

Causa: Componente React pasado como objeto en lugar de JSX

Solución:

• Verificar que los componentes lazy se rendericen correctamente
• Asegurar que los iconos se pasen como componentes, no como objetos
• Verificar que Suspense envuelva correctamente los componentes lazy

Verificación:

// ✅ CORRECTO
const Icon = tab.icon;
<Icon className="w-4 h-4" />

// ❌ INCORRECTO
{tab.icon} // Si tab.icon es un componente, debe ser <tab.icon />

---

4. Errores de Almacenamiento Local (localStorage/sessionStorage)

Síntomas:

• Favoritos no se guardan
• Historial no funciona
• Errores en consola relacionados con storage

Solución:

// En la consola del navegador (F12):
// Limpiar solo las claves de esta app
localStorage.removeItem('emerges-tes-favorites');
sessionStorage.removeItem('emerges-tes-search-history');
localStorage.removeItem('pwa-install-dismissed');

// O limpiar todo (cuidado: afecta otras apps)
localStorage.clear();
sessionStorage.clear();

Desde DevTools:

1. Abre DevTools (F12)
2. Pestaña "Application" → "Storage"
3. Limpia "Local Storage" y "Session Storage" para tu dominio

---

2. Service Worker Desactualizado

Síntomas:

• La app no carga offline
• Cambios no se reflejan después del deploy
• Errores en consola sobre service worker

Solución:

// En la consola del navegador:
// 1. Desregistrar service worker
navigator.serviceWorker.getRegistrations().then(registrations => {
  registrations.forEach(registration => {
    registration.unregister();
    console.log('Service Worker desregistrado');
  });
});

// 2. Limpiar caché
caches.keys().then(names => {
  names.forEach(name => {
    caches.delete(name);
    console.log('Caché eliminada:', name);
  });
});

// 3. Recargar página con Ctrl+Shift+R (hard refresh)

---

3. Errores de Build

Síntomas:

• npm run build falla
• Errores de TypeScript
• Errores de módulos no encontrados

Solución:

# 1. Limpiar completamente
rm -rf node_modules dist node_modules/.vite package-lock.json

# 2. Reinstalar dependencias
npm install

# 3. Verificar TypeScript
npx tsc --noEmit

# 4. Rebuild
npm run build

---

4. Errores de HMR (Hot Module Replacement)

Síntomas:

• Cambios no se reflejan en desarrollo
• Errores de recarga en caliente
• Variables duplicadas

Solución:

# 1. Limpiar caché de Vite
rm -rf node_modules/.vite

# 2. Reiniciar servidor de desarrollo
# Ctrl+C para detener
npm run dev

---

5. Errores de React Router

Síntomas:

• Warnings sobre future flags
• Rutas no funcionan correctamente
• Navegación falla

Solución: Ya está configurado en src/App.tsx:

<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>

Si persisten warnings, verifica que la versión de react-router-dom sea compatible:

npm list react-router-dom

---

✅ Verificación del Proyecto

Checklist de Diagnóstico

# 1. Verificar que estás en el proyecto correcto
pwd  # Debe ser: /home/planetazuzu/guia-tes

# 2. Verificar Node.js
node -v  # Debe ser >= 18

# 3. Verificar build
npm run build  # Debe compilar sin errores

# 4. Verificar TypeScript
npx tsc --noEmit  # No debe mostrar errores

# 5. Verificar linter
npm run lint  # Revisar warnings

# 6. Verificar servidor de desarrollo
npm run dev  # Debe iniciar en puerto 8096

---

🐛 Errores Específicos del Proyecto

Error: "Cannot find module '@/...'"

Causa: Alias de TypeScript no configurado

Solución: Verifica tsconfig.json y vite.config.ts:

// tsconfig.json debe tener:
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

---

Error: "Markdown files not loading"

Causa: Archivos .md no están en public/manual/

Solución:

# Verificar que existen los archivos
ls -la public/manual/

# Debe haber 94 archivos .md en subdirectorios
find public/manual -name "*.md" | wc -l

---

Error: "Service Worker registration failed"

Causa: sw.js no existe o está mal configurado

Solución:

# Verificar que existe
ls -la public/sw.js

# Si no existe, verifica src/main.tsx para el registro

---

📊 Estado Actual del Proyecto

Almacenamiento Usado

• ✅ localStorage: Favoritos (emerges-tes-favorites)
• ✅ sessionStorage: Historial (emerges-tes-search-history)
• ✅ localStorage: Banner PWA (pwa-install-dismissed)
• ❌ NO usa IndexedDB ni Dexie

Base de Datos

• ❌ Este proyecto NO usa bases de datos
• ❌ NO usa Dexie, IndexedDB, ni ninguna BD
• ✅ Solo usa almacenamiento del navegador (localStorage/sessionStorage)

---

🆘 Si Persisten los Errores

1. Verifica el proyecto correcto

   pwd
   cat package.json | grep name
   # Debe mostrar: "vite_react_shadcn_ts"
   

2. Limpia completamente

   ./scripts/limpiar_errores_desarrollo.sh
   rm -rf node_modules dist
   npm install
   

3. Reconstruye

   npm run build
   npm run dev
   

4. Verifica en el navegador

   • Abre DevTools (F12)
   • Revisa la pestaña "Console" para errores
   • Revisa la pestaña "Network" para recursos fallidos

---

📝 Notas Importantes

• Este proyecto NO usa Dexie ni IndexedDB
• Este proyecto NO tiene NominaUploader ni pdf-parser
• Este proyecto usa localStorage/sessionStorage para persistencia
• El proyecto compila sin errores actualmente

---

Última actualización: 2025-12-23
Proyecto: EMERGES TES - Guía de Protocolos de Emergencias