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.

Page d’erreur par défaut Fastly

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.

Page d’erreur personnalisée Fastly

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 :

  1. Connectez-vous à l’administrateur.

  2. Sélectionnez Magasins > Paramètres > Configuration > Avancé > Système.

  3. Dans le volet de droite, développez Cache de page complet > Configuration rapide > Pages synthétiques personnalisées.

    Modifier la page d’erreur 503

  4. Sélectionnez Définir l’HTML.

  5. Copiez et collez le code source de votre page de réponse personnalisée dans le champ HTML .

    Mise à jour de la page d’erreur 503

  6. Sélectionnez Charger en haut de la page pour charger la source d’HTML personnalisée sur le serveur Fastly.

  7. Sélectionnez Enregistrer la configuration en haut de la page pour enregistrer le fichier de configuration mis à jour.

  8. 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.

Page derreur 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>
NOTE
L’option Modifier WAF est disponible uniquement si le service Managed Cloud WAF est activé pour votre projet d’infrastructure cloud Adobe Commerce.

Pour modifier la page d’erreur WAF :

  1. Connectez-vous à Admin.

  2. Sélectionnez Magasins > Paramètres > Configuration > Avancé > Système.

  3. Dans le volet de droite, développez Cache de page complet > Configuration rapide > Pages synthétiques personnalisées.

    Option Modifier la page d’erreur WAF

  4. Sélectionnez Modifier la page WAF.

  5. Renseignez les champs pour mettre à jour l’HTML.

    Page d’erreur de mise à jour de WAF

    • 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.
  6. Sélectionnez Charger en haut de la page pour charger la source d’HTML personnalisée sur le serveur Fastly.

  7. Sélectionnez Enregistrer la configuration en haut de la page pour enregistrer le fichier de configuration mis à jour.

  8. 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 :

  1. 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
      
  2. 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}
    
  3. Effacez le cache et les cookies du navigateur (ou passez en mode navigation privée).

  4. Ouvrez à nouveau le site web de votre boutique pour afficher le code d’erreur.

  5. Utilisez le code d’erreur pour rechercher les détails dans le fichier de rapport d’erreur :

recommendation-more-help