Test Error Boundary - Guida Rapida

⚠️ Nota importante: Questa route è accessibile SOLO in modalità sviluppo. In produzione, qualsiasi tentativo di accesso a /test-error verrà automaticamente reindirizzato alla home page.

� Protezione Automatica

La route /test-error è protetta tramite un clientLoader che verifica l'ambiente:

export const clientLoader = async () => {
    if (import.meta.env.PROD) {
        throw redirect("/");
    }
    return null;
};

Questo significa:

• ✅ Development (npm run dev): Pagina accessibile e funzionante
• 🚫 Production (npm run build + npm start): Redirect automatico a /

�🚀 Come testare

Il server di sviluppo è in esecuzione. Visita:

http://localhost:5174/test-error

🧪 Test disponibili

✅ Errori catturati dall'Error Boundary

1. Errore durante rendering - Clicca "🔥 Errore durante rendering"

   • Simula un errore che si verifica durante il render del componente
   • L'Error Boundary mostrerà un messaggio di errore con opzioni di recovery

2. Errore in event handler - Clicca "💥 Errore in event handler"

   • Simula un errore lanciato da un event handler
   • L'Error Boundary catturerà l'errore

🌐 Errori HTTP

3. 404 - Not Found - Clicca "404 - Not Found"

   • Simula una risorsa non trovata
   • L'Error Boundary mostrerà una pagina 404 personalizzata

4. 401 - Unauthorized - Clicca "401 - Unauthorized"

   • Simula un accesso non autorizzato
   • L'Error Boundary mostrerà un messaggio di accesso negato

5. 500 - Server Error - Clicca "500 - Server Error"

   • Simula un errore del server
   • L'Error Boundary mostrerà un messaggio di errore del server

📦 Test Loader Error

6. Errore nel loader
   • Nel file app/routes/test-error.tsx, sostituisci il clientLoader esistente con quello commentato sotto
   • Ricaricare la pagina
   • L'errore verrà catturato PRIMA che il componente venga renderizzato

// In app/routes/test-error.tsx, sostituisci il clientLoader con:
export const clientLoader = async () => {
    throw new Response("Errore nel loader", { status: 500 });
};

❌ Errori NON catturati

7. Errore asincrono - Clicca "⏱️ Errore asincrono"
   • Dimostra che gli errori asincroni NON vengono catturati dall'Error Boundary
   • Devono essere gestiti manualmente con try-catch

🎯 Cosa osservare

Quando clicchi un pulsante di test, dovresti vedere:

1. Error Boundary UI - Una pagina di errore ben formattata con:

   • Titolo dell'errore
   • Messaggio descrittivo
   • Stack trace (solo in development)
   • Pulsanti di navigazione:
     • "Ricarica la pagina" (solo per errori generici)
     • "Torna indietro"
     • "Vai alla home"

2. Design responsivo - Funziona su mobile e desktop

3. Dark mode - Supporta il tema scuro

4. Diversi messaggi per diversi errori HTTP:

   • 404: "Pagina non trovata"
   • 401: "Accesso non autorizzato"
   • 403: "Accesso negato"
   • 500: "Errore del server"

🧹 Pulizia

✅ Non è necessaria alcuna pulizia!

La route /test-error è protetta e accessibile solo in modalità sviluppo:

• In development (npm run dev): La route funziona normalmente
• In production (npm run build + npm start): Reindirizza automaticamente alla home

Il controllo avviene tramite import.meta.env.PROD nel clientLoader, quindi:

• ✅ Nessun file da eliminare
• ✅ Nessuna route da rimuovere
• ✅ Nessun rischio di esporre la pagina di test in produzione

Come funziona la protezione

// In app/routes/test-error.tsx
export const clientLoader = async () => {
    // Se siamo in produzione, reindirizza alla home
    if (import.meta.env.PROD) {
        throw redirect("/");
    }
    return null;
};

🔒 Sicurezza

La route è protetta in produzione grazie a:

1. Environment check: Verifica import.meta.env.PROD nel loader
2. Automatic redirect: In produzione, reindirizza immediatamente a /
3. No console logs: Il codice non lascia tracce in produzione
4. Type-safe: TypeScript garantisce la sicurezza del codice

Per verificare che funzioni correttamente in produzione:

# Build per produzione
npm run build

# Avvia in modalità produzione
npm start

# Prova ad accedere a http://localhost:3000/test-error
# Dovresti essere reindirizzato automaticamente alla home

📝 Note sugli Error Boundary

• Gli Error Boundary catturano solo errori durante il rendering, nei lifecycle methods e nei costruttori
• NON catturano errori:
  • In event handlers (a meno che non rilancino durante il render)
  • In codice asincrono (callbacks, promises, async/await)
  • Nel rendering lato server
  • Errori lanciati nell'Error Boundary stesso

🔗 Riferimenti

• Documentazione completa: docs/error-boundary.md
• Componente: app/components/ErrorBoundary.tsx
• Test automatizzati: tests/ErrorBoundary.test.tsx