Gestion des erreurs

Cette documentation explique comment vous pouvez 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. Il s'agit d'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 ne sera pas affichée en production. Corriger l'erreur fera automatiquement disparaître l'overlay.

Voici un exemple d'overlay :

Gestion des erreurs serveur

Next.js fournit par défaut une page 500 statique pour gérer les erreurs côté serveur qui surviennent 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 d'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 de React offrent une manière élégante de gérer les erreurs JavaScript côté client afin 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éfinir une variable d'état pour suivre s'il y a une erreur
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Mettre à jour l'état pour que le prochain rendu affiche l'UI de repli

    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // Vous pouvez utiliser votre propre service de journalisation d'erreurs ici
    console.log({ error, errorInfo })
  }
  render() {
    // Vérifier si une erreur est survenue
    if (this.state.hasError) {
      // Vous pouvez afficher n'importe quelle UI de repli personnalisée
      return (
        <div>
          <h2>Oups, une erreur est survenue !</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Réessayer ?
          </button>
        </div>
      )
    }

    // Retourner les composants enfants en l'absence d'erreur

    return this.props.children
  }
}

export default ErrorBoundary

Le composant ErrorBoundary suit un état hasError. La valeur de cette variable d'état est un booléen. Lorsque la valeur de hasError est true, le composant ErrorBoundary affichera une UI de repli. Sinon, il affichera 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.

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

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

export default MyApp

Vous pouvez en apprendre plus sur les Error Boundaries dans la documentation de React.

Signalement des erreurs

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