Benutzerdefinierte Fehlerseiten

Standard-Fehlerseiten

Von wo aus Fehlerseiten bereitgestellt werden

• AEM-Diensttyp – author, publish, preview
• Von Adobe verwaltetem CDN

Optionen zum Anpassen von Fehlerseiten

• ErrorDocument-Apache-Anweisung
• ACS AEM Commons – Fehlerseiten-Handler
• CDN-Fehlerseiten

Die lokale AEM-Entwicklungsumgebung oder die AEM as a Cloud Service-Umgebung. Die Option CDN-Fehlerseiten ist auf die AEM as a Cloud Service-Umgebung anwendbar.

Das AEM-WKND-Projekt zum Anpassen von Fehlerseiten.

Klonen Sie das AEM-WKND-Projekt und stellen Sie es in Ihrer lokalen AEM-Entwicklungsumgebung bereit, indem Sie die folgenden Schritte ausführen:

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

Stellen Sie für die AEM as a Cloud Service-Umgebung das AEM-WKND-Projekt bereit, indem Sie die Full-Stack-Pipeline ausführen. Weitere Informationen finden Sie unter dem Beispiel produktionsfremde Pipelines.

Überprüfen Sie, ob die Seiten der WKND-Website korrekt gerendert werden.

Das Modul ui.content.sample enthält die Fehlerseiten mit Branding @ /content/wknd/language-masters/en/errors. Überprüfen Sie sie in Ihrer lokalen AEM- oder AEM as a Cloud Service-Umgebung https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors.

Die Datei wknd.vhost aus dem Modul dispatcher enthält:

• Die ErrorDocument-Anweisung, die auf die oben genannten Fehlerseiten verweist.
• Der Wert DispatcherPassError ist auf 1 festgelegt, sodass der Dispatcher alle Fehler durch Apache handhaben lässt.

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

Überprüfen Sie die benutzerdefinierten Fehlerseiten der WKND-Website, indem Sie einen falschen Seitennamen oder Pfad in Ihrer Umgebung eingeben, z. B. https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html.

Erstellen Sie ein neues React-Projekt, indem Sie den folgenden Befehl ausführen:

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

Öffnen Sie das Projekt in Ihrem bevorzugten Code-Editor und aktualisieren Sie die folgenden Dateien:

• src/App.js: Die Hauptkomponente, die den Fehlerseiteninhalt 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: Formatieren Sie den Fehlerseiteninhalt.

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

• Fügen Sie die Datei wknd-logo.png dem Ordner src hinzu. Kopieren Sie die Datei als wknd-logo.png.

• Fügen Sie die Datei favicon.ico dem Ordner public hinzu. Kopieren Sie die Datei als favicon.ico.

• Überprüfen Sie den Inhalt der CDN-Fehlerseite mit dem Branding von WKND, indem Sie das Projekt ausführen:

  code language-none
  $ npm start

  Öffnen Sie den Browser und navigieren Sie zu http://localhost:3000/, um den CDN-Fehlerseiteninhalt anzuzeigen.

• Erstellen Sie das Projekt, um die statischen Dateien zu generieren:

  code language-none
  $ npm run build

  Die statischen Dateien werden im Ordner build generiert.

Befolgen Sie die offizielle Dokumentation zu Azure Blob Storage, um einen Container zu erstellen und die statischen Dateien hochzuladen.

Stellen Sie sicher, dass die statischen Dateien öffentlich zugänglich sind. Die demospezifischen Speicherkontoeinstellungen von WKND lauten wie folgt:

• Name des Speicherkontos: aemcdnerrorpageresources
• Name des Containers: static-files

Im obigen Container static-files werden die folgenden Dateien aus dem Ordner build hochgeladen:

• error.js: Die Datei build/static/js/main.<hash>.js wird in error.js umbenannt und ist öffentlich zugänglich.
• error.css: Die Datei build/static/css/main.<hash>.css wird in error.css umbenannt und ist öffentlich zugänglich.
• favicon.ico: Die Datei build/favicon.ico wird so hochgeladen, wie sie ist, und ist öffentlich zugänglich.

Öffnen Sie den Browser und navigieren Sie zur URL der Veröffentlichungsumgebung. Hängen Sie cdnstatus?code=404 an die URL an, z. B. https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404, oder greifen Sie über die URL der benutzerdefinierten Domain zu.

Folgende Codes werden unterstützt: 403, 404, 406, 500 und 503.

Überprüfen Sie die Registerkarte „Netzwerk“ des Browsers, um zu sehen, wie die statischen Dateien aus dem Azure Blob Storage geladen werden. Das vom von Adobe verwalteten CDN bereitgestellte HTML-Dokument enthält den Mindestinhalt, und die JavaScript-Datei erstellt dynamisch den Inhalt der Fehlerseite mit Branding.

Konfigurieren von CDN-Fehlerseiten

Cloud Manager – Konfigurations-Pipeline