Comment créer une page d'erreur 404 personnalisée dans Django

Les pages d'erreur sont courantes avec les applications Web. Les contributeurs de Django ont fourni des pages par défaut pour certaines de ces erreurs telles que l'erreur 404 (Not Found). Mais en tant que développeur, il est préférable d'avoir une page d'erreur qui suit les principes de conception du reste de votre application Web.

Créer une page 404 personnalisée dans Django

L'erreur 404 fait partie des nombreuses Codes d'état HTTP utilisé par le navigateur pour indiquer la réponse du serveur aux requêtes du navigateur faites par un utilisateur. Django fournit des modèles par défaut pour certains de ces codes d'état, et la page d'erreur 404 par défaut dans Django ressemble à ceci :

L'image ci-dessus n'est pas belle et la plupart des entreprises ne l'accepteront pas facilement sur leur site Web. Pour changer cette page en une page 404 personnalisée de votre choix, vous devez suivre les étapes répertoriées ci-dessous.

Étape 1: Créer une vue pour gérer l'erreur 404

Ouvrez votre vues.py fichier et créez une vue pour la page d'erreur 404. Cette vue doit renvoyer un modèle contenant la conception de votre page d'erreur 404 personnalisée. Voici une vue Django simple que vous pouvez utiliser dans votre projet :

depuis django.raccourcis importer rendre
# vue 404 personnalisée
définitivementpersonnalisé_404(demande, exception):
retour rendre (demander, '404.html', état=404)

L'extrait de code ci-dessus est un Fonction Python (de préférence appelée une vue Django dans ce cas) qui prend deux arguments de fonction; demande, et exception. Le deuxième argument—exception— vous permet d'accéder à l'objet d'exception qui a déclenché l'erreur 404.

Vous devriez remplacer le "404.html" dans la vue ci-dessus avec le chemin correct vers votre page de modèle HTML d'erreur 404.

Étape 2: Créez un modèle pour votre erreur 404

Créez un nouveau fichier HTML pour contenir votre conception personnalisée pour la page d'erreur 404. La conception doit être cohérente avec le reste de votre application. Voici un modèle HTML simple que vous pouvez utiliser dans votre projet. Vous devez modifier ce modèle comme bon vous semble :

 Modèle 404.html 
html>
<htmllangue="fr">
<diriger>
<métajeu de caractères="UTF-8">
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0">
<titre>404 Page non trouvéetitre>
<lien
 importer Bootstrap 
 href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 rel="feuille de style" 
 intégrité="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
 crossorigin="anonyme">
 CSS personnalisé 
<style>
 corps {
 affichage: flexible ;
 flex-direction: colonne ;
 justifier-contenu: centrer ;
 align-items: center ;
 hauteur: 100vh ;
 famille de polices: Arial, sans empattement ;
 }
 .récipient {
 aligner le texte: centrer ;
 largeur maximale: 600px ;
 }
 .émoji {
 taille de police: 8 rem ;
 marge inférieure: 20px ;
 }
 h1 {
 taille de police: 3 rem ;
 marge inférieure: 20px ;
 }
 p {
 taille de police: 1,5 rem ;
 marge inférieure: 20px ;
 }
 .btn {
 taille de police: 1,25 rem ;
 rembourrage: 10px 20px ;
 }
style>
diriger>
<corps>
<divclasse="récipient">
<divclasse="émoji">😕div>
<h1>Oops! Page non trouvéeh1>
<p>Nous n'avons pas trouvé la page que vous cherchiez.p>
<unclasse="btn btn-primaire"href="/">Retour à l'accueilun>
div>
corps>
html>

Étape 3: Modifier le fichier d'URL de votre projet

Au niveau de votre projet (où votre paramètres.py fichier est), ouvrez votre urls.py et faites pointer le gestionnaire d'erreur 404 vers la vue que vous avez créée pour gérer l'erreur 404. Le gestionnaire d'erreur 404 est appelé gestionnaire404. Pointer gestionnaire404 à votre avis, vous devez suivre ce format :

gestionnaire404 = 'app_name.views.custom_404_view_name'

Si votre application s'appelle recette, et la vue est appelée personnalisé_404, alors vous devez modifier le format ci-dessus comme ceci :

gestionnaire404 = 'recette.views.custom_404'

Assurez-vous de le faire au niveau de votre projet et non au niveau de votre application. Il y a différences entre un projet et une application dans Django.

Étape 4: Testez votre nouvelle page d'erreur 404

Pour tester votre nouvelle page d'erreur, démarrez votre serveur de développement et accédez à une page inexistante dans votre application. Vous pouvez démarrer votre serveur en exécutant cette commande dans votre outil de ligne de commande (CLI) :

serveur d'exécution python manage.py

Pour que la commande ci-dessus fonctionne, vous devez être dans le répertoire racine de votre projet, c'est-à-dire le dossier où votre manage.py fichier vit.

Une fois votre serveur démarré, testez votre page 404 personnalisée en naviguant vers une page inexistante telle que http://127.0.0.1:8000/hello. Si vous avez tout fait correctement, vous devriez voir votre page d'erreur 404 personnalisée.

Si votre page d'erreur 404 personnalisée n'apparaît pas, vous devriez envisager de vérifier vos vues pour vous assurer que vous avez écrit le bon chemin vers votre modèle HTML dans le rendre() fonction, car il s'agit d'un problème courant.

Les pages d'erreur personnalisées offrent une meilleure expérience utilisateur

Avoir une page d'erreur personnalisée dans votre application améliorera l'expérience de vos utilisateurs lorsqu'ils rencontrent des erreurs. Au lieu de voir un message d'erreur générique, une page d'erreur personnalisée peut fournir des informations plus spécifiques sur l'erreur et suggérer des solutions possibles.

Cela peut aider les utilisateurs à comprendre ce qui ne va pas et comment y remédier, réduisant ainsi la frustration et augmentant leur confiance dans votre application. Vous pourrez également rendre la page inclusive en ajoutant des fonctionnalités d'accessibilité.