Gestion des erreurs

Cette documentation explique comment gérer les erreurs de développement, côté serveur et côté client.

Gestion des erreurs en développement

Lorsqu'une erreur d'exécution survient pendant la phase de développement de votre application Next.js, vous rencontrerez un overlay. C'est une modale qui recouvre la page web. Elle est uniquement visible lorsque le serveur de développement est exécuté avec next dev via pnpm dev, npm run dev, yarn dev ou bun dev et n'apparaîtra pas en production. Corriger l'erreur fera automatiquement disparaître l'overlay.

Voici un exemple d'overlay :

Gestion des erreurs côté serveur

Next.js fournit par défaut une page 500 statique pour gérer les erreurs côté serveur dans votre application. Vous pouvez également personnaliser cette page en créant un fichier pages/500.js.

Avoir une page 500 dans votre application n'affiche pas les erreurs spécifiques à l'utilisateur.

Vous pouvez aussi utiliser une page 404 pour gérer des erreurs d'exécution spécifiques comme fichier non trouvé.

Gestion des erreurs côté client

Les Error Boundaries (limites d'erreur) de React offrent une manière élégante de gérer les erreurs JavaScript côté client pour que les autres parties de l'application continuent à fonctionner. En plus d'éviter le plantage de la page, cela vous permet de fournir un composant de repli personnalisé et même de journaliser les informations d'erreur.

Pour utiliser les Error Boundaries dans votre application Next.js, vous devez créer un composant classe ErrorBoundary et encapsuler la prop Component dans le fichier pages/_app.js. Ce composant sera responsable de :

• Afficher une interface de repli après une erreur
• Fournir un moyen de réinitialiser l'état de l'application
• Journaliser les informations d'erreur

Vous pouvez créer un composant classe ErrorBoundary en étendant React.Component. Par exemple :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)

    // Définit une variable d'état pour suivre les erreurs
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Met à jour l'état pour afficher l'interface de repli
    
    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // Vous pouvez utiliser votre propre service de journalisation ici
    console.log({ error, errorInfo })
  }
  render() {
    // Vérifie si une erreur est survenue
    if (this.state.hasError) {
      // Vous pouvez afficher n'importe quelle interface de repli
      return (
        <div>
          <h2>Oups, une erreur est survenue !</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Réessayer ?
          </button>
        </div>
      )
    }

    // Retourne les composants enfants s'il n'y a pas d'erreur

    return this.props.children
  }
}

export default ErrorBoundary

Le composant ErrorBoundary suit l'état hasError. La valeur de cette variable d'état est un booléen. Lorsque hasError est true, le composant affiche une interface de repli. Sinon, il affiche les composants enfants.

Après avoir créé un composant ErrorBoundary, importez-le dans le fichier pages/_app.js pour encapsuler la prop Component dans votre application Next.js.

// Importe le composant ErrorBoundary
import ErrorBoundary from '../components/ErrorBoundary'

function MyApp({ Component, pageProps }) {
  return (
    // Encapsule la prop Component avec ErrorBoundary
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

export default MyApp

Vous pouvez en apprendre plus sur les Error Boundaries (limites d'erreur) dans la documentation de React.

Signalement des erreurs

Pour surveiller les erreurs côté client, utilisez un service comme Sentry, Bugsnag ou Datadog.