Live Coding : Créer des pages d'erreur personnalisées avec Symfony

Dans tout site web, il arrive que les utilisateurs voient apparaître des pages d'erreur correspondant à l'absence d'une page ou à un accès interdit.

Les codes d'erreur sont très nombreux dans le protocole HTTP, ils sont même majoritaires parmi la liste des codes d'état du protocole.

Du code 300 au code 511, il y a 54 codes différents, et il y en a bien d'autres spécifiques à certaines plateformes.

Certains d'entre eux, comme l'erreur 404 par exemple, sont très courants, d'autres plus spécifiques, comme le code 418 "I'm a teapot" (Je suis une théière) qui a été ajouté au protocole le 1er avril 1998.

Les pages "par défaut"

Symfony fournit des pages d'erreur par défaut dans les environnements de développement et de production.

Elles sont différentes, permettant, dans l'environnement de développement, d'obtenir de nombreuses informations sur le contexte de l'erreur, quand l'environnement de production affichera uniquement un message.

Ci-dessous, une page d'erreur 404 en mode développement.

Ci-dessous une page 404 en mode production

Ces pages ne s'intègrent pas dans le thème du site, il est donc nécessaire de les personnaliser.

Personnaliser les pages d'erreur

Installer "Twig Pack"

Pour pouvoir personnaliser les pages d'erreur, nous allons devoir installer "TwigBundle" et "TwigBridge", deux composants complémentaires à "Twig" qui sont rassemblés sous un pack appelé "Twig Pack".

Il s'installera au moyen de "composer" et de la commande suivante

composer require symfony/twig-pack

Créer les fichiers Twig

Chaque fois qu'une page d'erreur devra être chargée, Twig cherchera si un fichier spécifique existe et le chargera. Dans le cas contraire, la page par défaut sera affichée.

Nous allons créer une arborescence dans le dossier "templates" comme ci-dessous

Une fois les dossiers créés, nous créerons le fichier twig pour chaque erreur souhaitée, sous le format "error000.html.twig" où 000 sera remplacé par le code de l'erreur.

Ainsi, un fichier pour l'erreur 404 sera appelé "error404.html.twig".

Nous pourrons le personnaliser avec, par exemple le contenu suivant

{% extends 'base.html.twig' %}



{% block title %}Page non trouvée{% endblock %}



{% block body %}

    <h1>Page non trouvée</h1>

    <p>La page que vous cherchez n'a pas été trouvée</p>

{% endblock %}

Les codes d'erreur

Twig passe 2 informations à la page d'erreur, le code de l'erreur et le texte envoyé. Nous pourrons donc les ajouter dans la page comme ceci

{% extends 'base.html.twig' %}



{% block title %}Page non trouvée{% endblock %}



{% block body %}

    <h1>Page non trouvée</h1>

    <p>La page que vous cherchez n'a pas été trouvée</p>

    <p>Le code est : {{status_code}}</p>

    <p>Le texte est : {{status_text}}</p>

{% endblock %}

Nous avons également accès au message détaillé de l'exception

{{exception.message}}

Tester les pages

En mode développement, vous ne pouvez pas voir les pages d'erreur personnalisées dans leur contexte, mais vous pouvez les tester.

Il suffit d'appeler l'url suivante (en partant du principe que la page d'accueil est sur https://127.0.0.1:8000)

https://127.0.0.1:8000/index.php/_error/404

Vous pouvez remplacer le 404 par tout code que vous souhaitez tester.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat