Personalizar páginas de erro e manutenção
Quando uma solicitação para a origem do Fastly falha, o Fastly retorna páginas de resposta padrão com formatação básica e mensagens genéricas que podem ser confusas para os usuários. Por exemplo, o Fastly retorna a seguinte página de erro padrão quando uma solicitação para a origem do Fastly falha devido a um erro 503.
Você pode atualizar a configuração da loja do Adobe Commerce para substituir algumas páginas de resposta padrão por páginas com mensagens mais amigáveis e estilo de HTML aprimorado, como mostrado no exemplo a seguir.
Atualmente, você pode personalizar as seguintes páginas de resposta do Fastly para seu projeto do Adobe Commerce na infraestrutura da nuvem.
Requisitos de codificação de HTML:
O código de HTML da página personalizada deve atender aos seguintes requisitos:
- O conteúdo pode conter até 65.535 caracteres.
- Especifique todos os CSS em linha na origem do HTML.
- Agrupe imagens na página de HTML usando base64 para que elas sejam exibidas mesmo se o Fastly estiver offline. Consulte URIs de dados no site de truques de css.
Personalizar a página de erro 503
Os clientes veem a página de erro 503 padrão nos seguintes casos:
- Quando uma solicitação para a origem Fastly retorna um status de resposta maior que 500
- Quando a origem do Fastly está inativa, como tempo limite, atividade de manutenção ou problemas de integridade
Você pode personalizar a página padrão adaptando o seguinte código de HTML para incluir o estilo para corresponder ao tema da loja do Adobe Commerce e modificando o título e as mensagens conforme necessário.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>503</title>
</head>
<body>
<p>Service unavailable</p>
</body></html>
Verifique se a origem modificada é exibida corretamente no navegador. Em seguida, adicione o código de HTML personalizado à configuração do Fastly.
Para adicionar a página de resposta personalizada à configuração do Fastly:
-
Fazer logon para o Administrador.
-
Selecionar Lojas > Configurações > Configuração > Avançado > Sistema.
-
No painel direito, expanda Cache de Página Inteira > Configuração do Fastly > Páginas sintéticas personalizadas.
-
Selecionar Definir HTML.
-
Copie e cole o código-fonte da sua página de resposta personalizada no campo HTML.
-
Selecionar Carregar na parte superior da página para fazer upload da fonte de HTML personalizada para o servidor Fastly.
-
Selecionar Salvar configuração na parte superior da página para salvar o arquivo de configuração atualizado.
-
Atualize o cache.
-
Na notificação na parte superior da página, selecione a variável Gerenciamento de cache link.
-
Na página Gerenciamento de cache, selecione Liberar cache de Magento.
-
Personalizar a página de erro do WAF
Os clientes veem a seguinte página de erro padrão do WAF quando uma solicitação para a origem do Fastly falha com um 403 Forbidden erro causado por um WAF evento de bloqueio.
O código de amostra a seguir mostra a fonte do HTML para a página padrão:
<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>
Você pode usar o Páginas sintéticas personalizadas > Editar página do WAF no menu de configuração do Fastly para personalizar o código padrão do seu projeto do Adobe Commerce na nuvem. Ao editar o código, mantenha a seguinte linha que fornece a ID de referência para o evento de bloqueio do WAF:
<p>"} req.http.x-request-id {"</p>
Para editar a página de erro do WAF:
-
Selecionar Lojas > Configurações > Configuração > Avançado > Sistema.
-
No painel direito, expanda Cache de Página Inteira > Configuração do Fastly > Páginas sintéticas personalizadas.
-
Selecionar Editar página do WAF.
-
Preencha os campos para atualizar o HTML.
- Status — Selecione o
403 Forbiddenstatus. - Tipo MIME — Tipo
text/html. - Conteúdo — Edite a resposta de HTML padrão para adicionar CSS personalizado e atualize o título e as mensagens conforme necessário.
- Status — Selecione o
-
Selecionar Carregar na parte superior da página para fazer upload da fonte de HTML personalizada para o servidor Fastly.
-
Selecionar Salvar configuração na parte superior da página para salvar o arquivo de configuração atualizado.
-
Atualize o cache.
-
Na notificação na parte superior da página, selecione a variável Gerenciamento de cache link.
-
Na página Gerenciamento de cache, selecione Liberar cache de Magento.
-
Exibir número do relatório de erros
Por padrão, o Fastly oculta todos os erros do Adobe Commerce atrás do Serviço 503 Indisponível erro. Para exibir o número do relatório de log de erros para que você possa encontrar e revisar os detalhes dos erros nos logs, abra o site omitindo o Fastly usando estas etapas:
-
Recupere o endereço IP do armazenamento:
-
Para ambientes de preparo e produção profissionais:
code language-bash nslookup {your_project_id}.ent.magento.cloud -
Para ambientes de integração Pro e ambientes iniciais:
code language-bash nslookup gw.{your_region}.magentosite.cloud
-
-
Adicione o domínio do aplicativo e o endereço IP ao arquivo de hosts na estação de trabalho local:
code language-text {server_IP} {store_domain} -
Limpe o cache do navegador e os cookies (ou alterne para o modo incógnito).
-
Abra o site da loja novamente para exibir o código de erro.
-
Use o código de erro para localizar os detalhes no arquivo de relatório de erros:
-
Localize o
./var/report/{error_number}arquivo.