Pagine di errore personalizzate

Pagine di errore predefinite

Da dove vengono distribuite le pagine di errore

• Tipo di servizio AEM: authoring, pubblicazione, anteprima
• CDN gestito da Adobe

Opzioni per personalizzare le pagine di errore

• ErrorDocument Direttiva Apache
• ACS AEM Commons - Gestore pagina di errore
• Pagine errore CDN

ambiente di sviluppo AEM locale o ambiente AEM as a Cloud Service. L'opzione Pagine errore CDN è applicabile all'ambiente AEM as a Cloud Service.

Il progetto WKND dell'AEM per personalizzare le pagine di errore.

Clona e implementa il progetto WKND dell’AEM nell’ambiente di sviluppo AEM locale seguendo i passaggi seguenti:

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

Per l'ambiente AEM as a Cloud Service, distribuire il progetto WKND dell'AEM eseguendo la pipeline full stack. Vedere l'esempio pipeline non di produzione.

Verifica che il rendering delle pagine del sito WKND sia corretto.

Il modulo ui.content.sample contiene le pagine di errore @ /content/wknd/language-masters/en/errors con marchio. Esaminali nell'ambiente AEM locale o AEM as a Cloud Service https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors.

Il file wknd.vhost del modulo dispatcher contiene:

• Direttiva ErrorDocument che punta alle pagine di errore precedenti.
• Il valore DispatcherPassError è impostato su 1, pertanto Dispatcher consente ad Apache di gestire tutti gli errori.

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

Rivedi le pagine di errore personalizzate del sito WKND immettendo un nome o un percorso di pagina errato nell'ambiente, ad esempio https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html.

Creare un nuovo progetto React eseguendo il comando seguente:

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

Apri il progetto nel tuo editor di codice preferito e aggiorna i seguenti file:

• src/App.js: è il componente principale che esegue il rendering del contenuto della pagina di errore.

  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: applicare lo stile al contenuto della pagina di errore.

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

• Aggiungere il file wknd-logo.png alla cartella src. Copia il file come wknd-logo.png.

• Aggiungere il file favicon.ico alla cartella public. Copia il file come favicon.ico.

• Verifica il contenuto della pagina di errore CDN con marchio WKND eseguendo il progetto:

  code language-none
  $ npm start

  Apri il browser e passa a http://localhost:3000/ per visualizzare il contenuto della pagina di errore CDN.

• Crea il progetto per generare i file statici:

  code language-none
  $ npm run build

  I file statici vengono generati nella cartella build.

Segui la documentazione ufficiale di Azure Blob Storage per creare un contenitore e caricare i file statici.

Assicurati che i file statici siano accessibili al pubblico. Le impostazioni dell’account di archiviazione specifico per la demo WKND sono le seguenti:

• Nome account di archiviazione: aemcdnerrorpageresources
• Nome contenitore: static-files

Nel contenitore superiore a static-files, vengono caricati i file di seguito della cartella build:

• error.js: il file build/static/js/main.<hash>.js è stato rinominato in error.js e pubblicamente accessibile.
• error.css: il file build/static/css/main.<hash>.css è stato rinominato in error.css e pubblicamente accessibile.
• favicon.ico: il file build/favicon.ico è stato caricato così com'è e accessibile pubblicamente.

Apri il browser e passa all'URL dell'ambiente Publish, aggiungi cdnstatus?code=404 all'URL, ad esempio https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404, oppure accedi utilizzando l'URL di dominio personalizzato

I codici supportati sono: 403, 404, 406, 500 e 503.

Verifica la scheda di rete del browser per visualizzare i file statici caricati dall’archiviazione BLOB di Azure. Il documento HTML distribuito dalla rete CDN gestita da Adobe contiene il contenuto minimo richiesto e il file JavaScript crea in modo dinamico il contenuto della pagina di errore con marchio.

Configurazione delle pagine di errore CDN

Cloud Manager - Config pipeline