After you create a custom error page, when the requested content does not exist or an error occurs, the point of presence (POP) returns the custom error page instead of the default error page. A custom error page improves user experience and allows users to view more user-friendly error prompts.
Background information
Alibaba Cloud CDN can redirect requests to custom error pages when errors occur.
If a client requests a web service by using a browser and the requested URL does not exist, the website server returns the default 404 Not Found page. If you want to use a user-friendly error page, you can create a custom error page and specify the complete URL of the page. Requests are redirected to the specified URL based on the HTTP status code in the responses.
If the delivery of the custom error page is accelerated by Alibaba Cloud CDN, you are charged based on the billing rules of Alibaba Cloud CDN.
Supported status codes
You can create custom error pages for the following HTTP status codes: 400, 403, 404, 405, 414, 416, 500, 501, 502, 503, and 504.
Status code | Description |
400 | An error occurs when you access a page. |
403 | The server rejects the request. |
404 | A web page that does not exist on the server is requested. |
405 | The method that is specified in the request is not allowed. |
414 | The request URL is excessively long for the server to process. |
416 | The server cannot serve the requested ranges. |
500 | The server encounters an error and cannot complete the request. |
501 | The server does not support a feature that is required to complete the request. |
502 | The server that acts as a gateway or proxy receives an invalid response from the upstream server. |
503 | The server is not available. |
504 | The server that acts as a gateway or proxy does not receive a response from the upstream server within the timeout period. |
Procedure
Log on to the CDN console.
In the left navigation pane, click Domain Names.
On the Domain Names page, find the target domain name and click Manage in the Actions column.
In the domain's navigation pane, click Cache.
Click the Custom Pages tab.
Click Customize to open the configuration dialog box.
Select an HTTP status code from the HTTP status code drop-down list.
In the link field, enter the URL of your custom error page. For example,
http://example.aliyundoc.com/error404.html. Make sure that the URL is accessible and the page exists.
Click OK.
The configuration takes effect after a few minutes, typically within 10 minutes.
After you configure a custom error page, you can click Modify or Delete in the Actions column on the Custom Pages tab to modify or delete the configuration.
Examples
You want to configure a custom error page for the HTTP 404 status code. If you have saved the file error404.html in the root directory of the origin server and users can visit the page using the accelerated domain name example.aliyundoc.com, you can customize an error page for the HTTP 404 status code by following these steps:
HTTP status code: 404.
URL: The URL of the custom error page, such as
http://example.aliyundoc.com/error404.html.Expected result: When a 404 error occurs, requests are redirected to the custom error page
http://example.aliyundoc.com/error404.html.
Best practices
Creating effective error pages
Design error pages that maintain your site's branding and visual identity.
Write clear, helpful messages that guide users to valid content.
Keep the file size minimal to ensure quick loading, even during server issues.
Configuring for optimal user experience
Ensure the error page is hosted on a reliable server to avoid further errors.
Monitor the frequency of error page accesses to identify potential issues.
Consider different scenarios for different HTTP status codes (e.g., 404 vs 503 errors).
Performance considerations
Minimize images and heavy assets on error pages to ensure quick delivery.
Consider whether the error page itself should be cached by CDN for faster access during errors.
Monitor the performance of error pages to ensure they load faster than the origin server.
Common issues and troubleshooting
Custom error page not loading
Possible cause: The URL specified in the configuration is not accessible.
Solution: Verify that the URL exists and can be accessed directly. Make sure the error page file is properly uploaded and accessible.
Configuration not taking effect
Possible cause: The domain or configuration update may still be propagating.
Solution: Wait for approximately 10 minutes for the configuration to fully propagate through CDN POPs.
Origin server errors not triggering custom error page
Possible cause: The origin server may be handling the error internally instead of returning it to CDN.
Solution: Verify that the origin server returns the correct error codes to the CDN when errors occur.
FAQ
Q: Can I use the same custom error page URL for different status codes?
A: Yes, you can specify the same URL for multiple status codes, but it's recommended to customize the content of the page to indicate the specific error type.
Q: What file types are suitable for custom error pages?
A: Error pages can be HTML documents or other file types that browsers can render. Plain HTML files with minimal dependencies are recommended for reliable performance during error situations.