Personalizzare le pagine di errore e manutenzione
Quando una richiesta all’origine Fastly ha esito negativo, Fastly restituisce pagine di risposta predefinite con formattazione di base e messaggi generici che possono creare confusione per gli utenti. Ad esempio, Fastly restituisce la seguente pagina di errore predefinita quando una richiesta all’origine Fastly non riesce a causa di un errore 503.
Puoi aggiornare la configurazione dell’archivio Adobe Commerce per sostituire alcune pagine di risposta predefinite con pagine che presentano messaggi più semplici e uno stile HTML migliorato, come illustrato nell’esempio seguente.
Attualmente, puoi personalizzare le seguenti pagine di risposta Fastly per il progetto di infrastruttura cloud di Adobe Commerce.
Requisiti di codifica HTML:
Il codice HTML per la pagina personalizzata deve soddisfare i seguenti requisiti:
- Il contenuto può contenere fino a 65.535 caratteri.
- Specifica tutti i file CSS in linea nell’origine HTML.
- Crea il bundle delle immagini nella pagina HTML utilizzando base64 in modo che vengano visualizzate anche se Fastly è offline. Vedi URI di dati sul sito css-tricks.
Personalizzare la pagina di errore 503
I clienti visualizzano la pagina di errore 503 predefinita nei casi seguenti:
- Quando una richiesta all’origine Fastly restituisce uno stato di risposta maggiore di 500
- Quando l’origine Fastly è inattiva, ad esempio per timeout, attività di manutenzione o problemi di salute
Puoi personalizzare la pagina predefinita adattando il seguente codice HTML per includere uno stile che corrisponda al tema del negozio Adobe Commerce e modificando il titolo e i messaggi in base alle esigenze.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>503</title>
</head>
<body>
<p>Service unavailable</p>
</body></html>
Verifica che l’origine modificata venga visualizzata correttamente nel browser. Quindi, aggiungi il codice HTML personalizzato alla configurazione Fastly.
Per aggiungere la pagina di risposta personalizzata alla configurazione Fastly:
-
Accedi all'amministratore.
-
Seleziona Archivi > Impostazioni > Configurazione > Avanzate > Sistema.
-
Nel riquadro di destra espandere Cache a pagina intera > Configurazione rapida > Pagine sintetiche personalizzate.
-
Selezionare Imposta HTML.
-
Copia e incolla il codice sorgente per la pagina di risposta personalizzata nel campo HTML.
-
Seleziona Carica nella parte superiore della pagina per caricare l'origine HTML personalizzata nel server Fastly.
-
Seleziona Salva configurazione nella parte superiore della pagina per salvare il file di configurazione aggiornato.
-
Aggiorna la cache.
-
Nella notifica nella parte superiore della pagina, seleziona il collegamento Gestione cache.
-
Nella pagina Gestione cache selezionare Svuota cache Magento.
-
Personalizzare la pagina di errore WAF
I clienti visualizzano la seguente pagina di errore WAF predefinita quando una richiesta all'origine Fastly non riesce con un errore 403 Forbidden causato da un evento di blocco WAF.
Nell'esempio di codice riportato di seguito viene illustrata l'origine HTML per la pagina predefinita.
<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>
Puoi utilizzare l'opzione Pagine sintetiche personalizzate > Modifica pagina WAF nel menu di configurazione Fastly per personalizzare il codice predefinito per il progetto Adobe Commerce su infrastruttura cloud. Quando modifichi il codice, conserva la seguente riga che fornisce l’ID di riferimento per l’evento di blocco WAF:
<p>"} req.http.x-request-id {"</p>
Per modificare la pagina di errore WAF:
-
Seleziona Archivi > Impostazioni > Configurazione > Avanzate > Sistema.
-
Nel riquadro di destra espandere Cache a pagina intera > Configurazione rapida > Pagine sintetiche personalizzate.
-
Selezionare Modifica pagina WAF.
-
Compila i campi per aggiornare HTML.
- Stato — Selezionare lo stato
403 Forbidden. - Tipo MIME — Tipo
text/html. - Contenuto - Modifica la risposta predefinita del HTML per aggiungere CSS personalizzato e aggiornare il titolo e i messaggi in base alle esigenze.
- Stato — Selezionare lo stato
-
Seleziona Carica nella parte superiore della pagina per caricare l'origine HTML personalizzata nel server Fastly.
-
Seleziona Salva configurazione nella parte superiore della pagina per salvare il file di configurazione aggiornato.
-
Aggiorna la cache.
-
Nella notifica nella parte superiore della pagina, seleziona il collegamento Gestione cache.
-
Nella pagina Gestione cache selezionare Svuota cache Magento.
-
Visualizza il numero della segnalazione errori
Per impostazione predefinita, Fastly nasconde tutti gli errori Adobe Commerce dietro l'errore 503 Servizio non disponibile. Per visualizzare il numero del rapporto del registro degli errori in modo da poter trovare e rivedere i dettagli degli errori nei registri, aprire il sito Web omettendo Fastly seguendo la procedura riportata di seguito.
-
Recupera l’indirizzo IP del tuo negozio:
-
Per ambienti di staging e produzione Pro:
code language-bash nslookup {your_project_id}.ent.magento.cloud -
Per gli ambienti di integrazione Pro e gli ambienti Starter:
code language-bash nslookup gw.{your_region}.magentosite.cloud
-
-
Aggiungere il dominio dell'applicazione e l'indirizzo IP al file hosts sulla workstation locale:
code language-text {server_IP} {store_domain} -
Cancella la cache del browser e i cookie (o passa alla modalità in incognito).
-
Apri di nuovo il sito web del negozio per visualizzare il codice di errore.
-
Utilizza il codice di errore per trovare i dettagli nel file della segnalazione errori:
-
Individuare il file
./var/report/{error_number}.