Páginas de erro personalizadas

Páginas de erro padrão

De onde as páginas de erro são servidas

• Tipo de serviço AEM - autor, publicação, visualização
• CDN gerenciada por Adobe

Opções para personalizar páginas de erro

• Diretiva Apache ErrorDocument
• ACS AEM Commons - Error Page Handler
• Páginas de erro da CDN

O ambiente de desenvolvimento local do AEM ou o ambiente do AEM as a Cloud Service. A opção Páginas de Erro de CDN é aplicável ao ambiente do AEM as a Cloud Service.

O projeto WKND AEM para personalizar páginas de erro.

Clonar e implantar o projeto AEM WKND no ambiente de desenvolvimento local do AEM seguindo as etapas abaixo:

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

Para o ambiente do AEM as a Cloud Service, implante o projeto WKND AEM executando o pipeline de pilha completa. Consulte o exemplo de pipeline de não produção.

Verifique se as páginas do site WKND são renderizadas corretamente.

O módulo ui.content.sample contém as páginas de erro @ /content/wknd/language-masters/en/errors da marca. Revise-as no seu ambiente AEM local ou AEM as a Cloud Service https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors.

O arquivo wknd.vhost do módulo dispatcher contém:

• A diretiva ErrorDocument que aponta para as páginas de erro acima.
• O valor DispatcherPassError está definido como 1 para que o Dispatcher permita que o Apache manipule todos os erros.

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

Revise as páginas de erro personalizadas do site WKND inserindo um nome de página ou caminho incorreto no seu ambiente, por exemplo https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html.

Crie um novo projeto React executando o seguinte comando:

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

Abra o projeto em seu editor de código favorito e atualize os arquivos abaixo:

• src/App.js: é o componente principal que renderiza o conteúdo da página de erro.

  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: Estilo do conteúdo da página de erro.

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

• Adicionar o arquivo wknd-logo.png à pasta src. Copie o arquivo como wknd-logo.png.

• Adicionar o arquivo favicon.ico à pasta public. Copie o arquivo como favicon.ico.

• Verifique o conteúdo da página de erro CDN com marca WKND executando o projeto:

  code language-none
  $ npm start

  Abra o navegador e navegue até http://localhost:3000/ para ver o conteúdo da página de erro CDN.

• Crie o projeto para gerar os arquivos estáticos:

  code language-none
  $ npm run build

  Os arquivos estáticos são gerados na pasta build.

Siga a documentação oficial do Armazenamento Azure Blob para criar um contêiner e carregar os arquivos estáticos.

Verifique se os arquivos estáticos estão acessíveis publicamente. Minhas configurações de conta de armazenamento específicas de demonstração WKND são as seguintes:

• Nome da Conta de Armazenamento: aemcdnerrorpageresources
• Nome do Contêiner: static-files

No contêiner acima static-files, abaixo, os arquivos da pasta build são carregados:

• error.js: O arquivo build/static/js/main.<hash>.js foi renomeado para error.js e publicamente acessível.
• error.css: O arquivo build/static/css/main.<hash>.css foi renomeado para error.css e publicamente acessível.
• favicon.ico: O arquivo build/favicon.ico é carregado como está e está acessível publicamente.

Abra o navegador e navegue até a URL de ambiente Publish, anexe o cdnstatus?code=404 à URL, por exemplo, https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404, ou acesse usando a URL de domínio personalizado

Os códigos compatíveis são: 403, 404, 406, 500 e 503.

Verifique a guia de rede do navegador para ver se os arquivos estáticos são carregados do Armazenamento de Blobs do Azure. O documento HTML entregue pelo CDN gerenciado por Adobe contém o conteúdo mínimo básico e o arquivo JavaScript cria dinamicamente o conteúdo da página de erro de marca.

Configurando Páginas de Erro da CDN

Cloud Manager - Configurar pipelines