Personalización de páginas de error y mantenimiento
Cuando falla una solicitud al origen de Fastly, devuelve páginas de respuesta predeterminadas con formato básico y mensajería genérica que pueden ser confusas para los usuarios. Por ejemplo, Fastly devuelve la siguiente página de error predeterminada cuando una solicitud al origen de Fastly falla debido a un error 503.
Puede actualizar la configuración de la tienda Adobe Commerce para reemplazar algunas páginas de respuesta predeterminadas por páginas que tengan mensajes más descriptivos y un estilo de HTML mejorado, como se muestra en el siguiente ejemplo.
Actualmente, puede personalizar las siguientes páginas de respuesta rápida para su proyecto de Adobe Commerce en la nube.
Requisitos de codificación de HTML:
El código de HTML de la página personalizada debe cumplir los siguientes requisitos:
- El contenido puede contener hasta 65.535 caracteres.
- Especifique todos los CSS en línea en el origen del HTML.
- Agrupe imágenes en la página del HTML utilizando base64 para que se muestren aunque Fastly esté sin conexión. Ver URI de datos en el sitio de css-tricks.
Personalización de la página de error 503
Los clientes ven la página de error 503 predeterminada en los siguientes casos:
- Cuando una solicitud al origen Fastly devuelve un estado de respuesta mayor que 500
- Cuando el origen de Fastly está inactivo, como un tiempo de espera, una actividad de mantenimiento o problemas de estado
Puede personalizar la página predeterminada adaptando el siguiente código de HTML para incluir el estilo que coincida con la temática de la tienda Adobe Commerce y modificando el título y los mensajes según sea necesario.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>503</title>
</head>
<body>
<p>Service unavailable</p>
</body></html>
Compruebe que el origen modificado se muestra correctamente en el explorador. A continuación, añada el código de HTML personalizado a la configuración de Fastly.
Para agregar la página de respuesta personalizada a la configuración de Fastly:
-
Inicie sesión en el administrador.
-
Seleccione Tiendas > Configuración > Configuración > Avanzada > Sistema.
-
En el panel derecho, expanda Caché de página completa > Configuración rápida > Páginas sintéticas personalizadas.
-
Seleccione Establecer HTML.
-
Copie y pegue el código fuente de la página de respuesta personalizada en el campo HTML.
-
Seleccione Cargar en la parte superior de la página para cargar el origen del HTML personalizado en el servidor de Fastly.
-
Seleccione Guardar configuración en la parte superior de la página para guardar el archivo de configuración actualizado.
-
Actualice la caché.
-
En la notificación que aparece en la parte superior de la página, seleccione el vínculo Administración de caché.
-
En la página Administración de caché, seleccione Vaciar caché del Magento.
-
Personalización de la página de error WAF
Los clientes ven la siguiente página de error WAF predeterminada cuando una solicitud al origen de Fastly falla con un error 403 Forbidden causado por un evento de bloqueo WAF.
El siguiente ejemplo de código muestra el origen del HTML para la página predeterminada:
<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>
Puede usar la opción Páginas sintéticas personalizadas > Editar página WAF en el menú de configuración de Fastly para personalizar el código predeterminado para su proyecto de infraestructura de Adobe Commerce en la nube. Cuando edite el código, conserve la línea siguiente que proporciona el ID de referencia para el evento de bloqueo WAF:
<p>"} req.http.x-request-id {"</p>
Para editar la página de error WAF:
-
Seleccione Tiendas > Configuración > Configuración > Avanzada > Sistema.
-
En el panel derecho, expanda Caché de página completa > Configuración rápida > Páginas sintéticas personalizadas.
-
Seleccione Editar página WAF.
-
Rellene los campos para actualizar el HTML.
- Estado: seleccione el estado
403 Forbidden. - Tipo MIME — Tipo
text/html. - Contenido: edite la respuesta predeterminada del HTML para agregar CSS personalizado y actualizar el título y los mensajes según sea necesario.
- Estado: seleccione el estado
-
Seleccione Cargar en la parte superior de la página para cargar el origen del HTML personalizado en el servidor de Fastly.
-
Seleccione Guardar configuración en la parte superior de la página para guardar el archivo de configuración actualizado.
-
Actualice la caché.
-
En la notificación que aparece en la parte superior de la página, seleccione el vínculo Administración de caché.
-
En la página Administración de caché, seleccione Vaciar caché del Magento.
-
Mostrar número de informe de error
De manera predeterminada, oculta rápidamente todos los errores de Adobe Commerce detrás del error 503 Servicio no disponible. Para mostrar el número del informe de registro de errores y poder encontrar y revisar los detalles del error en los registros, abra el sitio web omitiendo Rápidamente siguiendo estos pasos:
-
Recupere la dirección IP de su tienda:
-
Para entornos de ensayo y producción Pro:
code language-bash nslookup {your_project_id}.ent.magento.cloud -
Para entornos de integración Pro y entornos Starter:
code language-bash nslookup gw.{your_region}.magentosite.cloud
-
-
Añada el dominio de aplicación y la dirección IP al archivo de hosts de la estación de trabajo local:
code language-text {server_IP} {store_domain} -
Borre la caché y las cookies del explorador (o cambie al modo incógnito).
-
Vuelva a abrir el sitio web de la tienda para ver el código de error.
-
Utilice el código de error para encontrar los detalles en el archivo de informe de errores:
-
Busque el archivo
./var/report/{error_number}.