Personnalisation des pages d’erreur et de maintenance
Lorsqu’une requête à l’origine Fastly échoue, la fonction Rapide renvoie des pages de réponse par défaut avec une mise en forme de base et un message générique pouvant dérouter les utilisateurs. Par exemple, Fastly renvoie la page d’erreur par défaut suivante lorsqu’une requête à l’origine Fastly échoue en raison d’une erreur 503.
Vous pouvez mettre à jour la configuration de la boutique Adobe Commerce pour remplacer certaines pages de réponse par défaut par des pages qui contiennent des messages plus conviviaux et un style d’HTML amélioré, comme illustré dans l’exemple suivant.
Actuellement, vous pouvez personnaliser les pages de réponse rapide suivantes pour votre projet d’infrastructure cloud Adobe Commerce.
Exigences en matière 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 toutes les feuilles de style CSS intégrées dans la source de l’HTML.
- Regroupez les images dans la page d’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.
Personnalisation de la page d’erreur 503
Les clients voient la page 503-error par défaut dans les cas suivants :
- Lorsqu’une requête à l’origine Fastly renvoie un état de réponse supérieur à 500
- Lorsque l’origine Fastly est arrêtée, par exemple un dépassement de délai, 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 suivant afin d’inclure le style correspondant à votre thème de magasin Adobe Commerce et en modifiant le titre et la messagerie, le cas échéant.
<!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 Full Page Cache > Fastly Configuration > Custom Synthetic Pages.
-
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 Télécharger en haut de la page pour télécharger la source d’HTML personnalisée sur le serveur Fastly.
-
Sélectionnez Save Config en haut de la page pour enregistrer le fichier de configuration mis à jour.
-
Actualisez le cache.
-
Dans la notification située en haut de la page, sélectionnez le lien Gestion du cache.
-
Sur la page Gestion du cache, sélectionnez Vider le cache du Magento.
-
Personnalisation de la page d’erreur WAF
Les clients voient la page d’erreur WAF par défaut suivante lorsqu’une requête à l’origine Fastly échoue avec une erreur 403 Forbidden provoquée par un événement de blocage WAF.
L’exemple de code suivant illustre 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 afin de personnaliser le code par défaut de votre projet Adobe Commerce sur l’infrastructure cloud. Lorsque vous modifiez le code, conservez la ligne suivante qui fournit l’ID de référence de 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 Full Page Cache > Fastly Configuration > Custom Synthetic Pages.
-
Sélectionnez Modifier la page WAF.
-
Renseignez les champs pour mettre à jour l'HTML.
- Status — Sélectionnez l’état
403 Forbidden. - MIME type — Type
text/html. - Contenu — Modifiez la réponse par défaut de l’HTML pour ajouter une page CSS personnalisée et mettre à jour le titre et la messagerie, le cas échéant.
- Status — Sélectionnez l’état
-
Sélectionnez Télécharger en haut de la page pour télécharger la source d’HTML personnalisée sur le serveur Fastly.
-
Sélectionnez Save Config en haut de la page pour enregistrer le fichier de configuration mis à jour.
-
Actualisez le cache.
-
Dans la notification située en haut de la page, sélectionnez le lien Gestion du cache.
-
Sur la page Gestion du cache, sélectionnez Vider le cache du Magento.
-
Afficher le numéro du rapport d’erreur
Par défaut, masque Fastly toutes les erreurs Adobe Commerce derrière l'erreur 503 Service Unavailable . Pour afficher le numéro du rapport du journal des erreurs afin de retrouver et de consulter les détails de l’erreur dans les logs, ouvrez le site web omettant Fastly en procédant comme suit :
-
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 Starter :
code language-bash nslookup gw.{your_region}.magentosite.cloud
-
-
Ajoutez votre domaine d’application et votre adresse IP au fichier hosts de votre poste de travail local :
code language-text {server_IP} {store_domain} -
Effacez le cache du navigateur et les cookies (ou passez en mode incognito).
-
Ouvrez à nouveau votre site web de magasin pour afficher le code d’erreur.
-
Utilisez le code d’erreur pour trouver les détails dans le fichier de rapport d’erreur :
-
Recherchez le fichier
./var/report/{error_number}.