Documentation AEM as a Cloud Service User Guide

Configuring CDN Error Pages cdn-error-pages

Last update: Wed Sep 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Dispatcher

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

Setup setup

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

Create a file named cdn.yaml or similar, referencing the syntax section below.
Place the file somewhere under a top level folder named config or similar, as described in Using Config Pipelines.
Create a configuration pipeline in Cloud Manager, as described in the Using Config Pipelines.
Deploy the configuration.

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

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