Aangepaste foutpagina's

Standaardfoutpagina's

Vanaf waar de foutpagina's worden weergegeven

• AEM servicetype - auteur, publiceren, voorvertoning
• CDN met beheerde Adobe

Opties om foutpagina's aan te passen

• ErrorDocument Apache, instructie
• ACS AEM Commons - de Handler van de foutenpagina
• CDN-foutpagina's

De lokale AEM ontwikkelomgevingof het milieu van AEM as a Cloud Service. De CDN optie van de Pagina's van de Fout is toepasselijk op het milieu van AEM as a Cloud Service.

Het AEM project WKNDom foutenpagina's aan te passen.

Klonen en het AEM WKND-project implementeren in uw lokale AEM ontwikkelomgeving door de onderstaande stappen uit te voeren:

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

Voor het milieu van AEM as a Cloud Service, stel het AEM WKND- project door de volledig-stapelpijpleidingin werking te stellen, zie de niet-productiepijpleidingvoorbeeld.

Controleer of de WKND-sitepagina's correct worden weergegeven.

De ui.content.sample module bevat de brandde foutenpagina's@ /content/wknd/language-masters/en/errors. Herzie hen in uw lokale AEMof milieu van AEM as a Cloud Service https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors.

Het bestand wknd.vhost van de module dispatcher bevat:

• De richtlijn ErrorDocumentdie aan de bovengenoemde foutenpagina'sricht.
• De 🔗 waarde 0} DispatcherPassError wordt geplaatst aan 1 zodat Dispatcher laat Apache alle fouten behandelen.

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

Herzie de pagina's van de douanefout van de plaats WKND door een onjuiste paginanaam of een weg in uw milieu in te gaan, bijvoorbeeld https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html.

Creeer een nieuw React project door het volgende bevel in werking te stellen:

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

Open het project in uw favoriete code redacteur en werk de hieronder dossiers bij:

• src/App.js: het is de hoofdcomponent die de inhoud van de foutpagina rendert.

  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: maak de inhoud van de foutpagina op.

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

• Voeg het bestand wknd-logo.png toe aan de map src . Kopieer het dossierals wknd-logo.png.

• Voeg het bestand favicon.ico toe aan de map public . Kopieer het dossierals favicon.ico.

• Verifieer de van het brandmerk CDN van WKND de inhoud van de foutenpagina door het project in werking te stellen:

  code language-none
  $ npm start

  Open de browser en navigeer naar http://localhost:3000/ om de inhoud van de CDN-foutpagina te bekijken.

• Bouw het project om de statische dossiers te produceren:

  code language-none
  $ npm run build

  De statische bestanden worden gegenereerd in de map build .

Volg de officiële Azure Blokopslagdocumentatie om een container te creëren en de statische dossiers te uploaden.

Zorg ervoor dat de statische bestanden openbaar toegankelijk zijn. Mijn WKND-demo-specifieke instellingen voor opslagaccounts zijn als volgt:

• de Naam van de Rekening van de Opslag: aemcdnerrorpageresources
• Naam van de Container: static-files

In de container boven static-files worden de onderstaande bestanden uit de map build geüpload:

• error.js: Het build/static/js/main.<hash>.js dossier wordt anders genoemd aan error.js en openbaar toegankelijk.
• error.css: Het build/static/css/main.<hash>.css dossier wordt anders genoemd aan error.css en openbaar toegankelijk.
• favicon.ico: Het build/favicon.ico dossier wordt geupload zoals is en openbaar toegankelijk.

Open browser en navigeer aan het milieu URL van Publish, voeg cdnstatus?code=404 aan URL toe, bijvoorbeeld, https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404of toegang gebruikend douanedomein URL

De volgende codes worden ondersteund: 403, 404, 406, 500 en 503.

Controleer het tabblad van het browsernetwerk om te zien hoe de statische bestanden worden geladen van de Azure Blob-opslag. Het document van HTML dat door Adobe-beheerde CDN wordt geleverd bevat de volledige minimuminhoud en het dossier van JavaScript leidt dynamisch tot de branded inhoud van de foutenpagina.

Vormend CDN de Pagina's van de Fout

Cloud Manager - Config pijpleidingen