Páginas de error personalizadas

Páginas de error predeterminadas

Desde donde se muestran las páginas de error

• AEM Tipo de servicio de: creación, publicación, previsualización
• CDN administrado por Adobe

Opciones para personalizar páginas de error

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

AEM El entorno de desarrollo local 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.

AEM El proyecto WKNDde para personalizar las páginas de error.

AEM AEM Clone e implemente el proyecto WKND de local 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 de AEM as a Cloud Service AEM, implemente el proyecto WKND de ejecutando la canalización de pila completa, vea 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. AEM Revíselos en su entorno local deo de https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors de AEM as a Cloud Service.

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.

...
# ErrorDocument directive in wknd.vhost file
ErrorDocument 404 ${404_PAGE}
ErrorDocument 500 ${500_PAGE}
ErrorDocument 502 ${500_PAGE}
ErrorDocument 503 ${500_PAGE}
ErrorDocument 504 ${500_PAGE}

...
# DispatcherPassError value in wknd.vhost file
<IfModule disp_apache2.c>
    ...
    DispatcherPassError        1
</IfModule>

# Custom error pages path in custom.vars file
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.

Abra el explorador y vaya a la URL del entorno de Publish; añada 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 del HTML entregado por la CDN administrada por Adobe contiene el contenido mínimo y el archivo 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