Configuring CDN Error Pages cdn-error-pages
In the unlikely event that the ÃÛ¶¹ÊÓƵ-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.yamlor 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.
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.