Benutzerdefinierte Fehlerseiten

Standardmäßige Fehlerseiten

Von wo aus werden Fehlerseiten bereitgestellt?

• AEM Service Type - author, publish, preview
• Adobe-verwaltetes CDN

Optionen zum Anpassen von Fehlerseiten

• ErrorDocument Apache-Direktive
• ACS AEM Commons - Fehler-Seiten-Handler
• CDN-Fehlerseiten

Die Umgebung AEM Entwicklungsumgebung oder AEM as a Cloud Service . Die Option CDN-Fehlerseiten gilt für die AEM as a Cloud Service-Umgebung.

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. Siehe Beispiel für die Nicht-Produktions-Pipeline 🔗 .

Überprüfen Sie, ob die WKND-Site-Seiten korrekt dargestellt werden.

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

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

• Die ErrorDocument -Direktive, die auf die oben genannten Fehlerseiten verweist.
• Der Wert DispatcherPassError ist auf 1 gesetzt, sodass Apache alle Fehler handhaben kann.

...
# 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-Site, 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 Inhalt der Fehlerseite 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 Inhalt der Fehlerseite.

  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 zum Ordner src hinzu. Kopieren Sie die Datei als wknd-logo.png.

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

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

  code language-none
  $ npm start

  Öffnen Sie den Browser und navigieren Sie zu "http://localhost:3000/", um den Inhalt der CDN-Fehlerseite 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. Meine WKND-Demo-spezifischen Speicherkontoeinstellungen lauten wie folgt:

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

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

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

Öffnen Sie den Browser und navigieren Sie zur Publish-Umgebungs-URL, hängen Sie die "cdnstatus?code=404"-URL an, z. B. "https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404", oder greifen Sie über die URL der benutzerdefinierten Domäne "URL"auf

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

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

Registerkarte "Netzwerk"für CDN-Fehlerseite

Konfigurieren von CDN-Fehlerseiten

Cloud Manager - Konfigurations-Pipelines