Capsules Codes - Créer une page 502 personnalisée

TL;DR: Comment afficher une page 502 plus attrayante au lieu de la page 502 Bad Gateway par défaut de NGINX.

Vous trouverez un lien vers une Demo CodeSandbox ou le code source via ce Github Repository. Découvrez en plus sur Capsules ou X.

Il arrive parfois que l’appel à un url renvoie une page 502. Le code de réponse HTTP d'erreur serveur 502 Bad Gateway indique que le serveur, agissant comme une passerelle ou un proxy, a reçu une réponse invalide depuis le serveur en amont. Celui-ci décide alors de renvoyer une page par défaut :

Pour améliorer le visuel de cette page, il faut indiquer à NGINX que nous voulons afficher une page personnalisée en évitant celle proposée par défaut. Il faut alors créer un nouveau fichier HTML.

/public/502.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <script src="<https://cdn.tailwindcss.com>"></script>
    </head>

    <body>

        <div class="h-screen w-screen flex flex-col items-center justify-center">

            <div class="flex flex-col sm:flex-row items-center sm:items-start justify-center">

                <div class="w-16 h-16" >

                    <svg viewBox="0 0 322 322">

                        <g>
                            <path style="fill: #E6F1FF" d="M60.8,157.5c0,20.9,16.9,37.8,37.8,37.8s37.8-16.9,37.8-37.8V99.7c0-20.9-16.9-37.8-37.8-37.8 S60.8,78.8,60.8,99.7C60.8,99.7,60.8,157.5,60.8,157.5z"/>
                            <path style="fill: #F3F8FF" d="M98.9,80.7c-11.1,0-20.1,9-20.1,20.1v48c0,11.1,9,20.1,20.1,20.1s20.1-9,20.1-20.1v-48 C119.1,89.7,110,80.7,98.9,80.7z"/>
                            <path style="fill: #DD3773" d="M154.9,164.9c0-6.6-4.4-12.8-11-15.6c-5.3-2.2-11.2-1.7-15.9,1.4c-0.7-0.1-2.1-0.3-4.7-1.3 c-3.6-1.6-6.6-3.3-9.2-5.2c-0.1,0-0.1-0.1-0.2-0.2l-1.7-1.3c-0.8-0.6-1.6-1.2-2.2-1.7c-3.1-2.5-6.4-5-10.5-7.2 c-13.9-7.4-29-7.4-40.5-0.2c-5.4,3.4-9.6,8.1-12.2,13.5c-2.4,5-3.5,10.4-3.5,16.3v45.3c0,11.4,3.2,22,9.5,31.5 C60.3,251.6,72,260,85,263.4c4.5,1.2,9.2,1.8,13.9,1.8c8.8,0,17.7-2.1,25.6-6.2c12.3-6.3,21.7-16.8,26.6-29.6 c3.6-9.5,4-18.6,4-25.6L154.9,164.9z"/>
                            <path style="fill: #2E3A56" d="M98.9,56.7c-23.7,0-43,19.5-43,43.4v55.5c0,24,19.3,43.4,43,43.4s43-19.5,43-43.4v-55.5 C141.9,76.2,122.6,56.7,98.9,56.7z M127.7,155.7c0,16.1-12.9,29.2-28.7,29.2s-28.7-13.1-28.7-29.2v-55.5C70.3,84.1,83.2,71,99,71 s28.7,13.1,28.7,29.2V155.7z"/>
                            <path style="fill: #DD3773" d="M141.1,201.2c0-6.2,0-30.9,0-37.1c0-3.2-4.1-4.9-6.3-2.6c-0.1,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0.1-0.3,0.1 c-1.1,0.6-1.4,0.8-2.9,1.1c-4.5,1-9.2-0.4-13.3-2c-4.3-1.9-22-14.5-25.1-16.1c-8.4-4.5-18.9-6-27.3-0.7c-3.1,2-5.7,4.7-7.3,8 c-1.7,3.6-1.6,7.3-1.6,11.2c0,8.6,0,35.8,0,44.4c0,8.6,1.9,17,6.7,24.3c5.7,8.6,14.5,15.1,24.5,17.7c20.9,5.4,42.9-5.8,50.5-26 C141.4,216.4,141.1,208.8,141.1,201.2z M105.8,153.8c-0.4-0.3-0.1-0.1,0.1,0.1C105.9,153.8,105.9,153.8,105.8,153.8z"/>
                            <path style="fill: #CC296B" d="M134,159.4c-5,0.2-9.3,4.1-9.3,9.3c0,10.6,0,21.3,0,31.9c0,4.1,0.2,8.2-0.1,12.2c0-0.8-0.4,2.1-0.5,2.6 c-0.3,1.1-0.6,2.2-0.9,3.3c-0.1,0.3-0.4,1.1-0.4,1.2c-0.1,0.3-0.3,0.6-0.4,0.8c-0.6,1.1-1.2,2.2-1.8,3.3c-0.4,0.6-0.8,1.2-1.2,1.7 c0.2-0.3,1.1-1.3-0.1,0.1c-0.7,0.8-1.4,1.7-2.2,2.4c-0.8,0.7-1.5,1.5-2.4,2.1c-0.1,0.1-0.1,0.1-0.2,0.1c-0.7,0.5-1.4,0.9-2.1,1.4 c-0.9,0.6-1.9,1.1-2.9,1.6c-0.1,0-0.2,0.1-0.2,0.1c-0.5,0.2-0.9,0.4-1.4,0.5c-1.2,0.4-2.4,0.7-3.7,1c-0.1,0-0.5,0.1-0.8,0.2 c-0.3,0-0.7,0.1-0.9,0.1c-5.2,0.2-7.6,0.1-12.3-1.3c-0.6-0.2-1.2-0.4-1.8-0.6c-0.1,0-0.7-0.3-0.9-0.3c-1-0.5-1.9-1-2.8-1.5 c-0.4-0.2-0.8-0.5-1.2-0.8c-0.2-0.1-0.6-0.5-0.7-0.5c-1.1-1.1-2.3-2.2-3.3-3.3c-3.3-3.4-5.2-6.5-6.4-11.1 c-0.2-0.6-0.3-1.2-0.4-1.8c0-0.2-0.1-0.3-0.1-0.4c-0.1-1-0.2-1.9-0.2-2.9c0-0.7,0-1.4,0-2.1c0-1.2,0-2.3,0-3.5 c0-5.8,0-11.5,0-17.3c0-11.5,0-22.9,0-34.4c0-4.9-4.3-9.5-9.3-9.3s-9.3,4.1-9.3,9.3c0,10.7,0,21.3,0,32c0,6.3,0,12.7,0,19 c0,5.2,0,10.3,1.1,15.5c2.7,12,12.1,23.9,23.2,29.2c10.4,4.9,23.1,6.5,34.2,3c11.2-3.6,21-11.8,26.2-22.4 c3.5-7.3,4.8-14.9,4.8-22.9c0-12.7,0-25.4,0-38.1C143.3,163.8,139,159.2,134,159.4z M109.1,233.7 C108.4,234,108.7,233.8,109.1,233.7L109.1,233.7z M114.7,230.3C115.5,229.6,115.1,230,114.7,230.3L114.7,230.3z"/>
                            <path style="fill: #F3F8FF" d="M129.3,201.7c-0.3-2.5-2.6-4.4-5.2-4.1c-2.5,0.3-4.4,2.6-4.1,5.2c1,8.5-1.2,16.4-6,21.7 c-4.1,4.4-9.6,6.5-16.1,6.2c-2.6-0.1-4.7,1.9-4.9,4.4c-0.1,2.6,1.9,4.7,4.4,4.9c0.5,0,1,0,1.6,0c8.5,0,16.2-3.2,21.8-9.2 C127.6,223.6,130.7,213,129.3,201.7z"/>
                            <path style="fill: #2E3A56" d="M146.6,203.9v-38c0-3.9-2.4-7.5-6-9c-3.4-1.4-7.3-0.9-10.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0-0.1,0-0.6,0.1 c-2.8,0.6-6.4-0.5-9.3-1.7c-2.2-1-10-6.3-14.8-9.5c-5-3.4-7.9-5.3-9.4-6.1c-11.5-6.1-23.8-6.3-33.1-0.4c-4.2,2.7-7.5,6.3-9.5,10.5 c-2.2,4.7-2.2,9.2-2.2,13.2v44.2c0,10.5,2.6,19.6,7.6,27.3c6.5,9.8,16.6,17.1,27.7,20c3.9,1,8,1.5,12,1.5c7.6,0,15.2-1.8,22.1-5.4 c10.6-5.4,18.7-14.5,22.9-25.5C146.6,218.9,146.6,211.2,146.6,203.9z M132.1,222.3c-6.3,16.7-24.9,26.2-42.3,21.7 c-8.2-2.1-15.7-7.5-20.5-14.8c-3.7-5.6-5.6-12.5-5.6-20.5v-44.2c0-3.2,0-5.7,1-7.9c1-2,2.7-3.9,4.9-5.3c2.5-1.6,5.5-2.4,8.7-2.4 c3.8,0,7.9,1.1,11.9,3.2c0.9,0.5,5,3.2,8.3,5.4c8.3,5.6,13.9,9.3,16.7,10.6l0.3,0.1c3.6,1.4,8,2.8,12.7,2.8 c2.3,0.3,5.8,1.5,5.9,6.3v24.9v1.5C134.3,210.4,134.3,216.6,132.1,222.3z"/>
                        </g>
                        <g>
                            <path style="fill: #E6F1FF" d="M261,164.5c0-20.9-16.9-37.8-37.8-37.8s-37.8,16.9-37.8,37.8v57.8c0,20.9,16.9,37.8,37.8,37.8 s37.8-16.9,37.8-37.8V164.5z"/>
                            <path style="fill: #F3F8FF" d="M222.9,241.3c11.1,0,20.1-9,20.1-20.1v-48c0-11.1-9-20.1-20.1-20.1s-20.1,9-20.1,20.1v48 C202.8,232.3,211.8,241.3,222.9,241.3z"/>
                            <path style="fill: #33E5E1" d="M167,157.2c0,6.6,4.4,12.8,11,15.6c5.3,2.2,11.2,1.7,15.9-1.4c0.7,0.1,2.1,0.3,4.7,1.3 c3.6,1.6,6.6,3.3,9.2,5.2c0.1,0,0.1,0.1,0.2,0.2l1.7,1.3c0.8,0.6,1.6,1.2,2.2,1.7c3.1,2.5,6.4,5,10.5,7.2 c13.9,7.4,29,7.4,40.5,0.2c5.4-3.4,9.6-8.1,12.2-13.5c2.4-5,3.5-10.4,3.5-16.3v-45.3c0-11.4-3.2-22-9.5-31.5 c-7.5-11.4-19.2-19.8-32.2-23.2c-4.5-1.2-9.2-1.8-13.9-1.8c-8.8,0-17.7,2.1-25.6,6.2c-12.3,6.3-21.7,16.8-26.6,29.6 c-3.6,9.5-4,18.6-4,25.6L167,157.2z"/>
                            <path style="fill: #2E3A56" d="M222.9,265.3c23.7,0,43-19.5,43-43.4v-55.5c0-24-19.3-43.4-43-43.4s-43,19.5-43,43.4v55.5 C179.9,245.8,199.2,265.3,222.9,265.3z M194.2,166.3c0-16.1,12.9-29.2,28.7-29.2c15.8,0,28.7,13.1,28.7,29.2v55.5 c0,16.1-12.9,29.2-28.7,29.2c-15.8,0-28.7-13.1-28.7-29.2L194.2,166.3L194.2,166.3z"/>
                            <path style="fill: #33E5E1" d="M180.7,120.8c0,6.2,0,30.9,0,37.1c0,3.2,4.1,4.9,6.3,2.6c0.1-0.1,0.1-0.1,0.1-0.1c0.1,0,0.1-0.1,0.3-0.1 c1.1-0.6,1.4-0.8,2.9-1.1c4.5-1,9.2,0.4,13.3,2c4.3,1.9,22,14.5,25.1,16.1c8.4,4.5,18.9,6,27.3,0.7c3.1-2,5.7-4.7,7.3-8 c1.7-3.6,1.6-7.3,1.6-11.2c0-8.6,0-35.8,0-44.4c0-8.6-1.9-17-6.7-24.3c-5.7-8.6-14.5-15.1-24.5-17.7c-20.9-5.4-42.9,5.8-50.5,26 C180.5,105.6,180.7,113.2,180.7,120.8z M216,168.3c0.4,0.3,0.1,0.1-0.1-0.1C215.9,168.2,216,168.2,216,168.3z"/>
                            <path style="fill: #32C9CB" d="M187.8,162.6c5-0.2,9.3-4.1,9.3-9.3c0-10.6,0-21.3,0-31.9c0-4.1-0.2-8.2,0.1-12.2c0,0.8,0.4-2.1,0.5-2.6 c0.3-1.1,0.6-2.2,0.9-3.3c0.1-0.3,0.4-1.1,0.4-1.2c0.1-0.3,0.3-0.6,0.4-0.8c0.6-1.1,1.2-2.2,1.8-3.3c0.4-0.6,0.8-1.2,1.2-1.7 c-0.2,0.3-1.1,1.3,0.1-0.1c0.7-0.8,1.4-1.7,2.2-2.4c0.8-0.7,1.5-1.5,2.4-2.1c0.1-0.1,0.1-0.1,0.2-0.1c0.7-0.5,1.4-0.9,2.1-1.4 c0.9-0.6,1.9-1.1,2.9-1.6c0.1,0,0.2-0.1,0.2-0.1c0.5-0.2,0.9-0.4,1.4-0.5c1.2-0.4,2.4-0.7,3.7-1c0.1,0,0.5-0.1,0.8-0.2 c0.3,0,0.7-0.1,0.9-0.1c5.2-0.2,7.6-0.1,12.3,1.3c0.6,0.2,1.2,0.4,1.8,0.6c0.1,0,0.7,0.3,0.9,0.3c1,0.5,1.9,1,2.8,1.5 c0.4,0.2,0.8,0.5,1.2,0.8c0.2,0.1,0.6,0.5,0.7,0.5c1.1,1.1,2.3,2.2,3.3,3.3c3.3,3.4,5.2,6.5,6.4,11.1c0.2,0.6,0.3,1.2,0.4,1.8 c0,0.2,0.1,0.3,0.1,0.4c0.1,1,0.2,1.9,0.2,2.9c0,0.7,0,1.4,0,2.1c0,1.2,0,2.3,0,3.5c0,5.8,0,11.5,0,17.3c0,11.5,0,22.9,0,34.4 c0,4.9,4.3,9.5,9.3,9.3c5-0.2,9.3-4.1,9.3-9.3c0-10.7,0-21.3,0-32c0-6.3,0-12.7,0-19c0-5.2,0-10.3-1.1-15.5 c-2.7-12-12.1-23.9-23.2-29.2c-10.4-4.9-23.1-6.5-34.2-3c-11.2,3.6-21,11.8-26.2,22.4c-3.5,7.3-4.8,14.9-4.8,22.9 c0,12.7,0,25.4,0,38.1C178.5,158.2,182.8,162.9,187.8,162.6z M212.8,88.4C213.4,88,213.1,88.2,212.8,88.4L212.8,88.4z M207.1,91.7 C206.3,92.4,206.8,92,207.1,91.7L207.1,91.7z"/>
                            <path style="fill: #F3F8FF" d="M192.5,120.3c0.3,2.5,2.6,4.4,5.2,4.1c2.5-0.3,4.4-2.6,4.1-5.2c-1-8.5,1.2-16.4,6-21.7 c4.1-4.4,9.6-6.5,16.1-6.2c2.6,0.1,4.7-1.9,4.9-4.4c0.1-2.6-1.9-4.7-4.4-4.9c-0.5,0-1,0-1.6,0c-8.5,0-16.2,3.2-21.8,9.2 C194.2,98.4,191.2,109,192.5,120.3z"/>
                            <path style="fill: #2E3A56" d="M175.2,118.2v38c0,3.9,2.4,7.5,6,9c3.4,1.4,7.3,0.9,10.1-1.5c0.1-0.1,0.3-0.1,0.3-0.2c0,0,0.1,0,0.6-0.1 c2.8-0.6,6.4,0.5,9.3,1.7c2.2,1,10,6.3,14.8,9.5c5,3.4,7.9,5.3,9.4,6.1c11.5,6.1,23.8,6.3,33.1,0.4c4.2-2.7,7.5-6.3,9.5-10.5 c2.2-4.7,2.2-9.2,2.2-13.2v-44.2c0-10.5-2.6-19.6-7.6-27.3c-6.5-9.8-16.6-17.1-27.7-20c-3.9-1-8-1.5-12-1.5 c-7.6,0-15.2,1.8-22.1,5.4c-10.6,5.4-18.7,14.5-22.9,25.5C175.2,103.1,175.2,110.8,175.2,118.2z M189.7,99.8 c6.3-16.7,24.9-26.2,42.3-21.7c8.2,2.1,15.7,7.5,20.5,14.8c3.7,5.6,5.6,12.5,5.6,20.5v44.2c0,3.2,0,5.7-1,7.9 c-1,2-2.7,3.9-4.9,5.3c-2.5,1.6-5.5,2.4-8.7,2.4c-3.8,0-7.9-1.1-11.9-3.2c-0.9-0.5-5-3.2-8.3-5.4c-8.3-5.6-13.9-9.3-16.7-10.6 l-0.3-0.1c-3.6-1.4-8-2.8-12.7-2.8c-2.3-0.3-5.8-1.5-5.9-6.3v-24.9v-1.5C187.6,111.6,187.6,105.4,189.7,99.8z"/>
                        </g>

                    </svg>

                </div>

                <div class="px-10 sm:px-4 h-full flex flex-col items-center sm:items-start text-center sm:text-left justify-center">

                    <h1 class="m-0 font-mono text-lg font-normal text-[#32e5e1]">502 - Internet Broken</h1>

                    <p class="m-0 font-mono text-xs text-sky-900">Whoops, it seems the interwebs are in a bad mood. Please check back soon.</p>

                </div>

            </div>

        </div>

    </body>
  
</html>

Cette page HTML reprend le visuel ajouté plus haut. Elle est statique et il est conseillé de l’épurer. Les images sont au format SVG et il n’y a pas de gestion de localisation, la langue étant alors l’anglais. L’usage du CDN TailwindCSS permet ici une meilleure compréhension du code.

Pour permettre la reproduction de l’erreur NGINX et l’affichage de la page personnalisée, il faut alors ajouter quelques lignes dans la configuration NGINX.

Via Laravel Valet :

/opt/homebrew/etc/nginx/valet/valet.conf

error_page 502 /502.html;

    location = /502.html {
        root /path/to/your/project/public/folder/where/the/file/is;
        internal;
    }

Il est important d’indiquer que ces lignes doivent être ajoutées dans le bas de la section server.

Arrêter le service php pour accéder à la nouvelle page 502.

valet restart

brew services stop php@8.2

Cela n’est que dans l’optique d’une phase de test local. Les lignes ajoutées au fichier de configuration NGINX Valet devront ensuite être supprimées. Ces lignes peuvent néanmoins être ajoutées définitivement au fichier de configuration NGINX associé au projet, s’il en existe un.

Via Laravel Forge :

Ajouter ces lignes dans le fichier de configuration NGINX du site dans la partie server 443:

error_page 502 /502.html;

    location = /502.html {
        root /home/forge/path/to/your/project/public/folder/where/the/file/is;
        internal;
    }

Arrêter le service php sur le serveur dédié et accéder à la nouvelle page 502 :

sudo systemctl stop php8.2-fpm.service

La commande systemctl status permet de vérifier l’état du service. La command systemctl start permet de relancer le service.

Ravi d’avoir pu aider.

Créer une page 502 Bad Gateway personnalisée