Personnaliser les pages d'erreur

Les pages d'erreurs sont ces pages que typiquement vous n'aimeriez jamais rencontrer ! Malheureusement, elles apparaissent parfois, lorsque quelque chose qui n'est pas censé arriver survient... Vous les avez forcément déjà rencontré, le plus souvent, ce sont des erreurs de type 404 ou 500 qui sont respectivement les pages non trouvées et les erreurs internes du serveur.

Vous vous dites surement que ces pages sont inutiles et sont plus un problème qu'autre chose mais il n'en est rien ! Nous allons ici retourner le problème et apprendre comment tirer profit de ces pages perdues.

Elles sont entièrement configurables et vous pouvez y afficher ce que vous y souhaitez le but étant de rediriger le visiteur qui se trouve sur celles-ci sur la page d'accueil de votre site ou sur n'importe quelle autre page de votre choix afin de ne pas le perdre.

Pour l'anecdote, Youtube utilise (ou utilisait je n'en ai pas revu depuis quelques temps) des petites vidéos originales pour indiquer une erreur 404 et vous pouvez faire de même sur votre site !

Nous allons ici détailler le concept de ces pages d'erreur et apprendre à les personnaliser sur son propre site.

entrer un domaine à vérifier


Suivez le guide !

Les erreurs du web

Comme vous le savez déjà, il arrive parfois que le serveur, ou la requête effectuée à celui-ci ne soit pas conforme comme par exemple une faute de frappe dans l'URL. Qu'il y ait un problème quelconque ou quoi que ce soit d'autre, en tout cas, que quelque chose ne va pas.

Pour signaler le problème à l'utilisateur, le serveur dispose d'une ribambelle d'erreur. Il en existe beaucoup pour correspondre à toute sorte de problèmes.

Elles se classent en différentes catégories dont voici celle qui nous intéressent :

  • 300 et + : Redirection
  • 400 et + : Erreur due au client
  • 500 et + : Erreur due au serveur

Avant de commencer à personnaliser nos pages, regardons tout d'abord, les différents codes d'erreurs qui peuvent survenir.

Les codes indiqués dans la table ci-dessous avec un label « WebDAV » ne sont pas spécifiés par le protocole HTTP standard mais par le protocole WebDAV qui est une extension de HTTP.

Question

WebDAV (Web-based Distributed Authoring and Versioning) est un protocole (plus précisément, une extension du protocole HTTP). Il permet de simplifier la gestion de fichiers avec des serveurs distants en permettant notamment de récupérer, déposer, synchroniser et publier des fichiers (et des dossiers) rapidement et facilement.


3xx

Redirection

300 Multiple Choices L'URL demandée se rapporte à plusieurs ressources
301 Moved Permanently Document déplacé de façon permanente
302 Found Document déplacé de façon temporaire
303 See Other La réponse à cette requête est ailleurs
304 Not Modified Document non modifié depuis la dernière requête
305 Use Proxy La requête doit être ré-adressée au proxy
307 Temporary Redirect La requête doit être redirigée temporairement vers l'URL spécifiée
310 Too many Redirect La requête doit être redirigée de trop nombreuse fois, ou est victime d'une boucle de redirection.
4xx

Erreur du client

400 Bad Request La syntaxe de la requête est erronée
401 Unauthorized Une authentification est nécessaire pour accéder à la ressource
402 Payment Required Paiement requis pour accéder à la ressource (non utilisé)
403 Forbidden L'authentification est refusée. Contrairement à l'erreur 401, aucune demande d'authentification ne sera faite
404 Not Found Document non trouvé (URL incorrecte ou fichier qui n'existe pas)
405 Method Not Allowed Méthode de requête non autorisée
406 Not Acceptable Toutes les réponses possibles seront refusées.
407 Proxy Authentication Required Accès à la ressource autorisé par identification avec le proxy
408 Request Time-out Temps d'attente d'une réponse du serveur écoulé
409 Conflict La requête ne peut être traitée à l'état actuel
410 Gone La ressource est indisponible et aucune adresse de redirection n'est connue
411 Length Required La longueur de la requête n'a pas été précisée
412 Precondition Failed Préconditions envoyées par la requête non-vérifiées
413 Request Entity Too Large Traitement abandonné dû à une requête trop importante
415 Unsupported Media Type Format de requête non-supportée pour une méthode et une ressource données
416 Requested range unsatisfiable Champs d'en-tête de requête 'range' incorrect.
417 Expectation failed Comportement attendu et défini dans l'en-tête de la requête insatisfaisable
22 Unprocessable entity WebDAV : L'entité fournie avec la requête est incompréhensible ou incomplète.
423 Locked WebDAV : L'opération ne peut avoir lieu car la ressource est verrouillée.
449 Retry With Code défini par Microsoft. La requête devrait être renvoyée après avoir effectué une action.
450 Blocked by Windows Parental Controls Code défini par Microsoft. Cette erreur est produite lorsque les outils de contrôle parental de Windows sont activés et bloquent l'accès à la page.
5xx

Erreur du serveur

500 Internal Server Error Erreur interne du serveur (due très probablement à trop de requêtes simultanées sur le même serveur)
501 Not Implemented Fonctionnalité réclamée non supportée par le serveur
502 Bad Gateway ou Proxy Error Mauvaise réponse envoyée à un serveur intermédiaire par un autre serveur.
503 Service Unavailable Service temporairement indisponible ou en maintenance
504 Gateway Time-out Temps d'attente d'une réponse d'un serveur à un serveur intermédiaire écoulé
505 HTTP Version not supported Version HTTP non gérée par le serveur
507 Insufficient storage WebDAV : Espace insuffisant pour modifier les propriétés ou construire la collection
509 Bandwidth Limit Exceeded Utilisé par de nombreux serveurs pour indiquer un dépassement de quota.

Cela fait beaucoup n'est-ce pas ? Et la liste n'est pas exaustive mais ce sont les principales.

Ne vous inquiétez pas, il y a certaines erreurs qui ne surviennent que très très rarement (pour ne pas dire jamais). Seule 3 erreurs sont réellement récurrentes et seront traités dans la personnalisation :

Les erreurs « 404 Not Found », « 500 Internal Server Error » et « 403 Autorisation required ».


Suivez le guide !

Personnaliser ses pages d'erreur

Nous allons maintenant apprendre comment personnaliser ses pages d'erreur.

Il est très clair que pour un site, il est préférable de ne pas brusquer ces visiteurs avec une page aussi fade que la « 404 Not Found » par défaut comme illustré ci-dessous. Il convient de les aider. C'est à cela que sert les pages d'erreur. En les personnalisant, vous pourrez proposer des solutions efficaces au différentes erreurs qui peuvent survenir sur votre site.

Une solution miracle (ou pas) aux différentes erreurs est le rafraichissement de la page avec la touche « F5 ». Bien sûr si vous vous trouvez sur une page vide ou inconnue, actualiser la page ne la fera pas apparaitre miraculeusement ! Cela permet au moins de se rendre compte qu'il y a bien un problème (si ce n'était pas déjà le cas avant).

entrer un domaine à vérifier

En cas d'erreur, nous allons commencer par rediriger le visiteur sur une page d'erreur que nous avons nous-mêmes créée. Pour cela, il va nous falloir l'aide d'un fichier très spécial et très puissant : le fichier « .htaccess ».

entrer un domaine à vérifier

Ce fichier est un simple fichier texte basique qui n'a pas de nom et dont l'extension est « htaccess » d'où le fait qu'il commence par un point. Il parait très basique mais c'est un des fichiers les plus puissants de votre site. Il permet de faire énormément de choses et, entre autre, ce qui nous intéresse c'est-à-dire rediriger les erreurs sur les pages de notre choix.

Notez que ce fichier ne prend effet que pour le dossier et les sous dossiers dans lequel il est situé. Typiquement, on le place à la racine du site web.

Vous aurez peut-être du mal à créer le fichier. Pour forcer l'éditeur de texte à enregistrer le fichier correctement, entrez le nom entre guillemet comme ceci : « ".htaccess" ».

Une fois votre fichier créé, nous allons maintenant pouvoir indiquer à notre serveur quel page afficher lorsque l'erreur XXX se présente. Pour cela, nous allons utiliser la syntaxe suivante :

« ErrorDocument XXX /dossier/page_personnalisee.html »

Voici ce qui se passe lorsqu'une erreur survient :

  1. Une erreur survient lors de la demande de la page, le serveur va alors aller vérifier s'il existe des indications spéciales dans le fichier « .htaccess »

  2. Il trouve une indication « ErrorDocument » qui lui montre qu'une action spéciale a été prévue par le webmaster

  3. Il compare alors le numéro de l'erreur avec celui spécifié dans le « XXX »

  4. Si le numéro correspond, il va alors afficher le fichier indiqué dans le chemin relatif, c'est-à-dire, votre page d'erreur !

Notez que le chemin relatif du fichier commence toujours par « / ».

Voici un exemple :

entrer un domaine à vérifier

Ici, toutes nos pages d'erreurs sont regroupées dans un dossier « error ». Nous y avons listé les 10 erreurs les plus courantes afin de géré un maximum de problèmes.

Pour vous prouver que cela fonctionne bien, nous avons nous-même déjà mis en place ces différentes redirections. Vous pouvez donc constater l'affichage de l'erreur personnalisé sur cette page : « http://www.craym.eu/un_fichier_qui_nexiste_pas.html »


Nous allons maintenant créer notre page d'erreur. Pour cela, nous vous avons préparé un petit pack contenant tout ce dont vous aurez besoins pour gérer votre 1ère erreur :

Dans ce pack, nous vous fournissons un fichier « .htaccess » qui gère l'erreur 404 et un dossier contenant la page 404 que nous avons personnalisé avec une image. La page d'erreur ressemble à ceci :

entrer un domaine à vérifier

Pour mettre en place la gestion de l'erreur, vous allez devoir copier le « .htaccess » ainsi que le dossier à la racine de votre site web. (Pour cela, utilisez un FTP comme Filezilla dont le tutoriel se trouve ici)

C'est déjà terminé ! Maintenant, essayez de taper dans votre navigateur une URL de votre site qui n'existe pas.

Question

Notez que si vous entrez une URL contenant des sous-dossiers comme « http://www.monsite.com/dossier/url_bidon.html », l'image ne s'affichera pas correctement car le fichier d'erreur est envoyé à la place du fichier. Le chemin est donc relatif à l'URL demandé. Or comme nous avons renseigné l'URL de l'image par un chemin relatif, le navigateur va essayer de trouver l'image à l'adresse « http://www.monsite.com/dossier/error/404_error.gif » au lieu de « http://www.monsite.com/error/404_error.gif »

Il est donc conseillé d'utiliser des liens absolus lorsque vous créez vos pages d'erreur afin que celles-ci s'affichent correctement quelque soit l'endroit sur votre site.

La page s'affiche, c'est gagné ! Vous venez de personnaliser votre 1ère page d'erreur !

Vous pouvez à loisir modifier les fichiers fournis. Ils ne sont là que pour l'exemple et ce sera à vous de les personnaliser à l'image de votre site.

Ici nous ne gérons qu'une erreur mais vous pouvez ajouter vous-même toutes celles que vous souhaitez gérer comme dans le fichier « .htaccess » que nous avons crée plus haut.

Suivez le guide !

Quelques idées d'améliorations

 

Maintenant que vous êtes en mesure de personnaliser vos pages d'erreur, voici quelques améliorations qui peuvent vous êtres utiles :

  1. Intégrer un marqueur pour obtenir des statistiques (Xiti ou Analytics, un tutoriel sur sa mise en place est disponible)

    Si vous n’avez pas le courage de personnaliser votre page 404 une chose que vous pouvez faire dans un premier temps est de faire en sorte que le nombre de visite sur ce type de page soit comptabilisé. Vous saurez ensuite en consultant vos statistiques s’il est urgent ou pas de personnaliser vos pages d’erreur. Vous trouverez aussi l'origine de l'erreur et vous pourrez donc la corriger (dans la mesure du possible)

  2. Afficher l’interface de votre site afin de ne pas déstabiliser le visiteur. C'est l'un des points les plus importants. Une page d'erreur personnalisée sur un site est toujours plus propre et sérieux que la page de base.

  3. Afficher des liens vers les pages principales de votre site (accueil, catégories principale etc...). Si vous avez intégré un menu sur votre page d'erreur, cette option est déjà remplie.

  4. Afficher des liens vers les nouvelles pages de votre site pour les faire découvrir ou des pages dont le thème est relatif avec celle qui était attendue.

  5. Mettre un lien vers un formulaire de contact ou simplement votre email pour donner la possibilité aux visiteurs de vous contacter et pourquoi pas expliquer comment ils sont arrivés sur cette page.

  6. Afficher l’url que le visiteur a essayé d’atteindre. Cela lui permettra de vérifier s’il n’a pas fait une faute de frappe en tapant l’adresse de votre page, il pourra alors la retaper correctement et atteindre directement la page désirée.


Ces améliorations ne sont que quelques une parmis de très nombreuses possibilités. Faites parler votre imagination et votre créativité pour créer une page originale qui permettra au visiteur de continuer sa visite !

Recherchez quelques exemples sur le web, certains sont très chouettes et vous donneront des idées !

entrer un domaine à vérifier


Félicitations ! Vous êtes arrivé à la fin de ce tutoriel ! Merci d'avoir pris le temps de nous lire !