Páginas de error personalizadas

Páginas de error predeterminadas

Desde donde se muestran las páginas de error

• Tipo de servicio de AEM: creación, publicación y vista previa
• CDN administrado por Adobe

Opciones para personalizar páginas de error

• Directiva Apache ErrorDocument
• ACS AEM Commons - Controlador de página de error
• Páginas de error de CDN

El entorno de desarrollo local de AEM o el entorno de AEM as a Cloud Service. La opción Páginas de error de CDN se aplica al entorno de AEM as a Cloud Service.

Proyecto WKND de AEM para personalizar páginas de error.

Clone e implemente el proyecto WKND de AEM en su entorno de desarrollo local de AEM siguiendo los pasos a continuación:

# For local AEM development environment
$ git clone git@github.com:adobe/aem-guides-wknd.git
$ cd aem-guides-wknd
$ mvn clean install -PautoInstallSinglePackage -PautoInstallSinglePackagePublish

Para el entorno AEM as a Cloud Service, implemente el proyecto WKND de AEM ejecutando la canalización de pila completa; consulte el ejemplo de la canalización que no es de producción.

Compruebe que las páginas del sitio WKND se representan correctamente.

El módulo ui.content.sample contiene las páginas de error de marca en /content/wknd/language-masters/en/errors. Revisarlos en su entorno local AEM o AEM as a Cloud Service https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors.

El archivo wknd.vhost del módulo dispatcher contiene:

• La directiva ErrorDocument que señala a las páginas de error anteriores.
• El valor DispatcherPassError está establecido en 1, por lo que Dispatcher permite que Apache gestione todos los errores.

# In `wknd.vhost` file:

...

## ErrorDocument directive
ErrorDocument 404 ${404_PAGE}
ErrorDocument 500 ${500_PAGE}
ErrorDocument 502 ${500_PAGE}
ErrorDocument 503 ${500_PAGE}
ErrorDocument 504 ${500_PAGE}

## Add Header for 5XX error page response
<IfModule mod_headers.c>
  ### By default, CDN overrides 5XX error pages. To allow the actual response of the backend to pass through, add the header x-aem-error-pass: true
  Header set x-aem-error-pass "true" "expr=%{REQUEST_STATUS} >= 500 && %{REQUEST_STATUS} < 600"
</IfModule>

...
## DispatcherPassError directive
<IfModule disp_apache2.c>
    ...
    DispatcherPassError        1
</IfModule>

# In `custom.vars` file
...
## Define the error page paths
Define 404_PAGE /content/wknd/us/en/errors/404.html
Define 500_PAGE /content/wknd/us/en/errors/500.html
...

Revise las páginas de error personalizadas del sitio WKND introduciendo un nombre de página o una ruta incorrectos en su entorno, por ejemplo https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html.

Cree un nuevo proyecto de React ejecutando el siguiente comando:

$ npx create-react-app aem-cdn-error-page

Abra el proyecto en su editor de código favorito y actualice los siguientes archivos:

• src/App.js: es el componente principal que procesa el contenido de la página de error.

  code language-javascript

  import logo from "./wknd-logo.png"; import "./App.css"; function App() { return ( <> <div className="App"> <div className="container"> <img src={logo} className="App-logo" alt="logo" /> </div> </div> <div className="container"> <div className="error-code">CDN Error Page</div> <h1 className="error-message">Ruh-Roh! Page Not Found</h1> <p className="error-description"> We're sorry, we are unable to fetch this page! </p> </div> </> ); } export default App;

• src/App.css: aplicar estilo al contenido de la página de error.

  code language-css

  .App { text-align: left; } .App-logo { height: 14vmin; pointer-events: none; } body { margin-top: 0; padding: 0; font-family: Arial, sans-serif; background-color: #fff; color: #333; display: flex; justify-content: center; align-items: center; } .container { text-align: letf; padding-top: 10px; } .error-code { font-size: 4rem; font-weight: bold; color: #ff6b6b; } .error-message { font-size: 2.5rem; margin-bottom: 10px; } .error-description { font-size: 1rem; margin-bottom: 20px; }

• Agregar el archivo wknd-logo.png a la carpeta src. Copie el archivo como wknd-logo.png.

• Agregar el archivo favicon.ico a la carpeta public. Copie el archivo como favicon.ico.

• Compruebe el contenido de la página de error de CDN con marca WKND ejecutando el proyecto:

  code language-none
  $ npm start

  Abra el explorador y vaya a http://localhost:3000/ para ver el contenido de la página de error de CDN.

• Cree el proyecto para generar los archivos estáticos:

  code language-none
  $ npm run build

  Los archivos estáticos se generan en la carpeta build.

Siga la documentación oficial de Azure Blob Storage para crear un contenedor y cargar los archivos estáticos.

Asegúrese de que los archivos estáticos sean de acceso público. Mi configuración de cuenta de almacenamiento específica de demostración de WKND es la siguiente:

• Nombre de cuenta de almacenamiento: aemcdnerrorpageresources
• Nombre de contenedor: static-files

En el contenedor superior static-files, se cargan los siguientes archivos de la carpeta build:

• error.js: se cambió el nombre del archivo build/static/js/main.<hash>.js a error.js y a accesible públicamente.
• error.css: se cambió el nombre del archivo build/static/css/main.<hash>.css a error.css y a accesible públicamente.
• favicon.ico: el archivo build/favicon.ico se ha cargado tal cual y es de acceso público.

En el explorador, vaya a la URL de publicación de AEM as a Cloud Service y anexe cdnstatus?code=404 a la URL, por ejemplo, https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404, o acceda a través de la URL de dominio personalizado

Los códigos admitidos son: 403, 404, 406, 500 y 503.

Compruebe la pestaña de red del explorador para ver si los archivos estáticos se cargan desde el almacenamiento del blob de Azure. El documento de HTML entregado por la CDN administrada por Adobe contiene el contenido mínimo y el archivo de JavaScript crea dinámicamente el contenido de la página de error con marca.

Configurar páginas de error de CDN

Cloud Manager - Canalizaciones de configuración