Pages d’erreur personnalisées

Pages d’erreur par défaut

Endroit à partir duquel les pages d’erreur sont diffusées.

• Type de service AEM : création, publication, prévisualisation
• Réseau CDN géré par Adobe

Options de personnalisation des pages d’erreur

• Directive Apache ErrorDocument
• ACS AEM Commons - Gestionnaire de pages d’erreur
• Pages d’erreur du réseau CDN

Environnement de développement local AEM ou AEM as a Cloud Service. L’option Pages d’erreur du réseau CDN s’applique à l’environnement AEM as a Cloud Service.

Projet AEM WKND pour personnaliser les pages d’erreur.

Clonez et déployez le projet AEM WKND dans votre environnement de développement AEM local en suivant les étapes ci-dessous :

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

Pour l’environnement AEM as a Cloud Service, déployez le projet AEM WKND en exécutant le pipeline full-stack, voir l’exemple de pipeline hors production.

Vérifiez que le rendu des pages du site WKND est correct.

Le module ui.content.sample contient les pages d’erreur de marque @ /content/wknd/language-masters/en/errors. Vérifiez-les dans votre environnement AEM local ou AEM as a Cloud Service https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors.

Le fichier wknd.vhost du module dispatcher contient les éléments suivants :

• Directive ErrorDocument qui pointe vers les pages d’erreur ci-dessus.
• La valeur DispatcherPassError est définie sur 1 afin que Dispatcher laisse Apache gérer toutes les erreurs.

...
# 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
...

Passez en revue les pages d’erreur personnalisées du site WKND en saisissant un nom ou un chemin de page incorrect dans votre environnement, par exemple https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html.

Créez un projet React en exécutant la commande suivante :

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

Ouvrez le projet dans votre éditeur de code préféré et mettez à jour les fichiers suivants :

• src/App.js : il s’agit du composant principal qui effectue le rendu du contenu de la page d’erreur.

  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 : appliquez un style au contenu de la page d’erreur.

  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; }

• Ajoutez le fichier wknd-logo.png dans le dossier src. Copiez le fichier en tant que wknd-logo.png.

• Ajoutez le fichier favicon.ico dans le dossier public. Copiez le fichier en tant que favicon.ico.

• Vérifiez le contenu de la page d’erreur du réseau CDN de marque WKND en exécutant le projet :

  code language-none
  $ npm start

  Ouvrez le navigateur et accédez à http://localhost:3000/ pour afficher le contenu de la page d’erreur du réseau CDN.

• Créez le projet pour générer les fichiers statiques :

  code language-none
  $ npm run build

  Les fichiers statiques sont générés dans le dossier build.

Suivez la documentation officielle Stockage Blob Azure pour créer un conteneur et charger les fichiers statiques.

Assurez-vous que les fichiers statiques sont accessibles publiquement. Les paramètres de mon compte de stockage spécifique à la démonstration WKND sont les suivants :

• Nom du compte de stockage  : aemcdnerrorpageresources
• Nom du conteneur  : static-files

Dans le conteneur static-files supérieur, les fichiers inférieurs du dossier build sont chargés :

• error.js : le fichier build/static/js/main.<hash>.js est renommé error.js et est publiquement accessible.
• error.css : le fichier build/static/css/main.<hash>.css est renommé error.css et est publiquement accessible.
• favicon.ico : le fichier build/favicon.ico est chargé en l’état et est publiquement accessible.

Ouvrez le navigateur et accédez à l’URL de l’environnement de publication, ajoutez cdnstatus?code=404 à l’URL, par exemple, https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404 ou accédez-y à l’aide de l’URL de domaine personnalisé.

Les codes pris en charge sont : 403, 404, 406, 500 et 503.

Vérifiez l’onglet réseau du navigateur pour voir que les fichiers statiques sont chargés à partir du stockage Blob Azure. Le document HTML diffusé par le réseau CDN géré par Adobe contient le contenu minimum et le fichier JavaScript crée dynamiquement le contenu de la page d’erreur de marque.

Configuration des pages d’erreur du réseau CDN

Cloud Manager - Pipelines de configuration