❌Error Handling

Error Handling avec error.js

Démonstration du système d'error boundaries

⚠️

Prêt à tester ?

Clique sur le bouton ci-dessous pour déclencher une erreur et voir comment Next.js la gère automatiquement avec error.js

💡 Après avoir cliqué, observe comment error.js catch l'erreur et affiche une UI élégante avec un bouton 'Réessayer'

🔧

Comment ça marche ?

1. Structure des fichiers

app/
  error-demo/
    error.js    ← Attrape les erreurs
    page.js     ← Peut générer des erreurs

2. Le fichier error.js

'use client'

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>❌ Une erreur est survenue !</h2>
      <p>{error.message}</p>
      <button onClick={reset}>🔄 Réessayer</button>
    </div>
  )
}

📚

Avantages du système

✓

Attrape automatiquement toutes les erreurs React dans son segment

✓

Affiche une UI de secours au lieu d'un écran blanc

✓

Fonction reset() pour réessayer sans recharger la page

✓

'affecte pas les autres parties de l'application (isolation)

✓

Doit être un Client Component ('use client')