DocumentationAEM as a Cloud ServiceUser Guide

Configuring CDN Error Pages cdn-error-pages

Last update: Wed Jun 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Admin

In the unlikely event that the Adobe-managed CDN cannot reach the AEM origin, the CDN by default serves an unbranded, generic error page which indicates that the server cannot be reached. You can override the default error page by hosting static files in self-hosted storage such as Amazon S3 or Azure Blob Storage, and referencing them in a configuration file that is deployed by using the Cloud Manager Configuration Pipeline.

Setup setup

Before you can override the default error page you need to do the following:

  • Create this folder and file structure in the top-level folder of your Git project:
config/
     cdn.yaml

  • The cdn.yaml configuration file should contain both metadata and the rules described in examples below. The kind parameter should be set to CDN and the version should be set to the schema version, which is currently 1.

  • Create a targeted deployment config pipeline in Cloud Manager. See configuring production pipelines and configuring non-production pipelines.

Notes

  • RDEs do not currently support the configuration pipeline.
  • You can use yq to validate locally the YAML formatting of your configuration file (for example, yq cdn.yaml).

Configuration configuration

The error page is implemented as a single page application (SPA), and references a handful of properties, as shown in the example below. The static files referenced by the urls should be hosted by you on an internet accessible service such as Amazon S3 or Azure Blob Storage.

Configuration example:


kind: "CDN"
version: "1"
metadata:
  envTypes: ["dev"]
data:
  errorPages:
    spa:
      title: the error page
      icoUrl: https://www.example.com/error.ico
      cssUrl: https://www.example.com/error.css
      jsUrl: https://www.example.com/error.js
Name
Allowed Properties
Meaning
spa
title
Title for the error page.
icoUrl
URL to an icon file.
cssUrl
URL to a CSS file.
jsUrl
URL to a JavaScript file.

Sample Generated HTML sample-generated-html

The HTML code generated by the CDN and served to the client such as a browser will resemble (but not be identical to) the following snippet:


<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <title>the error page</title>
        <link rel="icon" href="https://www.example.com/error.ico">
        <link rel="stylesheet" href="https://www.example.com/error.css">
    </head>
    <body>
        ...
        <div id="root" status="403"></div>
        <script src="https://www.example.com/error.js"> </script>
    </body>
</html>

Testing testing

For testing purposes, call the dedicated endpoint with the supported error code, for example:

curl "https://publish-pXXXXX-eXXXXXX.adobeaemcloud.com/cdnstatus?code=403"

The supported codes are: 403, 404, 406, 500 and 503.

In this way, you directly trigger the CDN’s error handler in order to test the synthetic response for a given error code.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab