Configuring CDN Error Pages :headding-anchor:cdn-error-pages

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 config pipeline.

Setup :headding-anchor:setup

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

  1. Create a file named cdn.yaml or similar, referencing the syntax section below.

  2. Place the file somewhere under a top level folder named config or similar, as described in Using Config Pipelines.

  3. Create a configuration pipeline in Cloud Manager, as described in the Using Config Pipelines.

  4. Deploy the configuration.

Syntax :headding-anchor:syntax

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

See Using Config Pipelines for a description of the properties above the data node. The kind property value should be CDN and the version property should be set to 1.

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 :headding-anchor: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 :headding-anchor: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.

Tutorial

Refer to the CDN error pages tutorial for step-by-step instructions on how to create, deploy and test the CDN served error pages.

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