Aangepaste foutpagina's

Standaardfoutpagina's

Vanaf waar de foutpagina's worden weergegeven

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

Opties om foutpagina's aan te passen

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

De lokale ontwikkelomgeving van AEMof 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 project van AEM WKNDom foutenpagina's aan te passen.

U kunt het AEM WKND-project klonen en 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 project van AEM WKND 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 milieu van AEMof 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.

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

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.

In browser, navigeer aan AEM as a Cloud Service publiceer URL, voeg cdnstatus?code=404 aan URL, bijvoorbeeld, https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404of toegang toe 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 HTML-document dat door de door Adobe beheerde CDN wordt geleverd, bevat de minimale inhoud en het JavaScript-bestand maakt dynamisch de inhoud van de pagina met foutmeldingen met branding.

Vormend CDN de Pagina's van de Fout

Cloud Manager - Config pijpleidingen