Personnaliser les pages d’erreur et de maintenance
Lorsqu’une requête à l’origine Fastly échoue, Fastly renvoie les pages de réponse par défaut avec une mise en forme de base et un message générique qui peut être déroutant pour les utilisateurs et les utilisatrices. Par exemple, Fastly renvoie la page d’erreur par défaut suivante lorsqu’une requête vers l’origine Fastly échoue en raison d’une erreur 503.
Vous pouvez mettre à jour la configuration de votre boutique Adobe Commerce pour remplacer certaines pages de réponse par défaut par des pages proposant une messagerie plus conviviale et un style d’HTML amélioré, comme illustré dans l’exemple suivant.
Actuellement, vous pouvez personnaliser les pages de réponse Fastly suivantes pour votre projet d’infrastructure cloud Adobe Commerce.
Exigences de codage d’HTML :
Le code d’HTML de la page personnalisée doit répondre aux exigences suivantes :
- Le contenu peut contenir jusqu’à 65 535 caractères.
- Spécifiez tous les CSS intégrés dans la source d’HTML.
- Regroupez les images dans la page HTML à l’aide de base64 afin qu’elles s’affichent même si Fastly est hors ligne. Voir URI de données sur le site CSS-tricks.
Personnaliser la page d’erreur 503
Les clients voient la page d’erreur 503 par défaut dans les cas suivants :
- Lorsqu’une requête à l’origine Fastly renvoie un statut de réponse supérieur à 500
- Lorsque l’origine Fastly est inactive, comme une temporisation, une activité de maintenance ou des problèmes d’intégrité
Vous pouvez personnaliser la page par défaut en adaptant le code d’HTML ci-après pour inclure le style afin qu’il corresponde au thème de votre boutique Adobe Commerce, puis en modifiant le titre et le message selon vos besoins.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>503</title>
</head>
<body>
<p>Service unavailable</p>
</body></html>
Vérifiez que la source modifiée s’affiche correctement dans le navigateur. Ajoutez ensuite le code d’HTML personnalisé à la configuration Fastly .
Pour ajouter la page de réponse personnalisée à la configuration Fastly :
-
Connectez-vous à l’administrateur.
-
Sélectionnez Magasins > Paramètres > Configuration > Avancé > Système.
-
Dans le volet de droite, développez Cache de page complet > Configuration rapide > Pages synthétiques personnalisées.
-
Sélectionnez Définir l’HTML.
-
Copiez et collez le code source de votre page de réponse personnalisée dans le champ HTML .
-
Sélectionnez Charger en haut de la page pour charger la source d’HTML personnalisée sur le serveur Fastly.
-
Sélectionnez Enregistrer la configuration en haut de la page pour enregistrer le fichier de configuration mis à jour.
-
Actualisez le cache.
-
Dans la notification en haut de la page, cliquez sur le lien Gestion du cache.
-
Sur la page Gestion du cache, sélectionnez Vider le cache du Magento.
-
Personnaliser la page d’erreur WAF
Les clients voient la page d’erreur WAF suivante par défaut lorsqu’une demande de l’origine Fastly échoue avec une erreur 403 Forbidden
due à un événement de blocage WAF.
L’exemple de code suivant montre la source d’HTML de la page par défaut :
<html>
<head>
<title>Magento 403 Forbidden</title>
</head>
<body>
<p>The requested URL was rejected.</p>
<p>For additional information, please contact support and provide this reference ID:</p>
<p>"} req.http.x-request-id {"</p>
<p><button onclick='history.back();'>Go Back</button></p>
</body>
</html>
Vous pouvez utiliser l’option Pages synthétiques personnalisées > Modifier la page WAF dans le menu de configuration Fastly pour personnaliser le code par défaut de votre projet d’infrastructure cloud Adobe Commerce. Lorsque vous modifiez le code, conservez la ligne suivante qui fournit l’identifiant de référence pour l’événement de blocage WAF :
<p>"} req.http.x-request-id {"</p>
Pour modifier la page d’erreur WAF :
-
Sélectionnez Magasins > Paramètres > Configuration > Avancé > Système.
-
Dans le volet de droite, développez Cache de page complet > Configuration rapide > Pages synthétiques personnalisées.
-
Sélectionnez Modifier la page WAF.
-
Renseignez les champs pour mettre à jour l’HTML.
- Statut — Sélectionnez le statut du
403 Forbidden
. - Type MIME — Type
text/html
. - Contenu — Modifiez la réponse d’HTML par défaut pour ajouter un CSS personnalisé et mettre à jour le titre et le message selon les besoins.
- Statut — Sélectionnez le statut du
-
Sélectionnez Charger en haut de la page pour charger la source d’HTML personnalisée sur le serveur Fastly.
-
Sélectionnez Enregistrer la configuration en haut de la page pour enregistrer le fichier de configuration mis à jour.
-
Actualisez le cache.
-
Dans la notification en haut de la page, cliquez sur le lien Gestion du cache.
-
Sur la page Gestion du cache, sélectionnez Vider le cache du Magento.
-
Afficher le numéro de rapport d’erreur
Par défaut, Fastly masque toutes les erreurs Adobe Commerce derrière l’erreur Service 503 indisponible . Pour afficher le numéro de rapport du journal des erreurs afin que vous puissiez trouver et consulter les détails des erreurs dans les journaux, ouvrez le site web en omettant Fastly à l’aide des étapes suivantes :
-
Récupérez l’adresse IP de votre boutique :
-
Pour les environnements d’évaluation et de production Pro :
code language-bash nslookup {your_project_id}.ent.magento.cloud
-
Pour les environnements d’intégration Pro et les environnements de démarrage :
code language-bash nslookup gw.{your_region}.magentosite.cloud
-
-
Ajoutez votre domaine d'application et votre adresse IP au fichier des hôtes sur votre station de travail locale :
code language-text {server_IP} {store_domain}
-
Effacez le cache et les cookies du navigateur (ou passez en mode navigation privée).
-
Ouvrez à nouveau le site web de votre boutique pour afficher le code d’erreur.
-
Utilisez le code d’erreur pour rechercher les détails dans le fichier de rapport d’erreur :
-
Recherchez le fichier
./var/report/{error_number}
.