Creating Custom HTTP Error Pages on VergeCloud: Enhance User Experience

Custom Pages

The custom pages feature within the VergeCloud CDN Service enables you to replace or customize various pages of your website, including Error Pages and Under Construction Pages. While these pages initially appear in VergeCloud's standard design, you have the option to upload HTML files or specify URLs to redirect users, enhancing their experience on your site.

Glossary

Custom Pages: Pages that can be tailored to meet specific needs, such as error notifications.
Redirect: A method to forward users from one URL to another.
Error Code: A numerical representation of the status of a web request.
DDoS: Distributed Denial of Service, a malicious attempt to disrupt the normal functioning of a targeted server.

Real Usage Scenarios

Consider a situation where your website experiences downtime for maintenance. You can configure a custom Under Construction page to inform visitors of the ongoing updates while still maintaining a professional appearance.

Field/Option Descriptions

Navigate to the Custom Pages section in your VergeCloud user panel, located under the CDN section, to manage these pages.

You can select either the default page or upload a new one for the Error Page or Under Construction Page. By choosing the Upload HTML option, you can submit your HTML file.
If you prefer to redirect your users to another page, opt for the Redirect choice.

To begin constructing your page, utilize the following custom error template:

<html>
<head></head>
<body>
 %desired variable%
</body>
</html>

Note that all external resources, such as images, CSS, and scripts included in your file, must be reachable (i.e., return a 200 OK response) to prevent errors from occurring.

For example, if you have an image file hosted on your domain and you restrict access from specific geographic regions at the domain level, you will need to adjust the paths for your static files to ensure that firewall rules do not interfere, or alternatively, utilize VergeCloud's object storage.

Available Variables

The following table outlines the variables that can be utilized on the error, update, or DDoS protection pages:

Parameter	Description
%IP%	Displays the user’s IP address.
%SID%	Shows the server ID to which the user is connected.
%DOMAIN%	Indicates the requested domain.
%ERRCODE%	Displays the error code.
%TIME%	Shows the timestamp of the error formatted as: %Y-%m-%d %H:%M:%S %Z.
%REQUEST_ID%	Displays the request ID.
%Challenge%	Calls DDoS Protection challenges dynamically.

The image below illustrates some of the aforementioned values displayed on a 403 error page.

![](image-placeholder.png)

Finally, click on Save to apply the changes.

Under Construction Pages

This feature allows you to select which page visitors will see when the website is undergoing maintenance. Essentially, you can modify the page that users encounter while your site is being updated.

Be aware that by using either the Upload HTML or Redirect options, the "Under Maintenance" mode will be activated across your entire domain.

Setting a "Custom Page" for the Under Construction Page via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY ' \
--header 'cache-control: no-cache' \
--form 'file=@"/C:/Users/vergecloud/Desktop/example.html"' \
--form 'page="under_construction"' \
--form 'type="file"'

Setting the "Redirect" for the Under Construction Page via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'page="under_construction"' \
--form 'url="https://example.com/uc.html"' \
--form 'type="url"'

Error 500

This error indicates that the primary server is temporarily inaccessible. VergeCloud displays this message by default when the origin server returns any of the 500, 502, 503, or 504 error codes.

In such cases, users will see an error similar to the image below:

![](image-placeholder.png)

Set "Redirect" for Errors Connecting to the Main Server via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'page="error_500"' \
--form 'url="https://example.com/500"' \
--form 'type="url"'

"Upload HTML" for Errors Connecting to the Main Server via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'file=@"/C:/Users/vergecloud/Desktop/example.html"' \
--form 'page="error_500"' \
--form 'type="file"'

Custom Template for DDoS Protection Challenges

When activating either the JavaScript or Captcha challenges, a page will be shown to your visitors to verify that they are not automated systems. You can personalize these DDoS challenge pages using Custom Pages.

To create DDoS pages, ensure that you include the %Challenge% variable in the file you upload for the dedicated page.

JavaScript Challenge

By default, visitors will see a page like the one below for a JavaScript challenge:

![](image-placeholder.png)

Setting Up a Custom JavaScript Challenge Page via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'file=@"/path/to/file"' \
--form 'page="ddos_js"' \
--form 'type="file"'

Captcha Challenge

By default, visitors will encounter a page like the one below for a Captcha challenge:

![](image-placeholder.png)

Setting Up a Custom Captcha Challenge Page via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'file=@"/path/to/file"' \
--form 'page="ddos_captcha"' \
--form 'type="file"'

SecureLink Invalid Errors

When activating the secure link feature on content, only users utilizing their encrypted and specially generated links can access the specified paths. These restrictions may be applied based on specific IP addresses and access durations.

If the user's identity cannot be validated according to the requested parameters, the following error will be displayed by default:

Set "Redirect" for Secure Link Error via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'page="secure_link_invalid"' \
--form 'url="https://example.com/securelink"' \
--form 'type="url"'

"Upload HTML" for Secure Link Error via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'file=@"/C:/Users/vergecloud/Desktop/example.html"' \
--form 'page="secure_link_invalid"' \
--form 'type="file"'

Firewall Errors

VergeCloud Firewall allows you to define security rules in a cloud environment and manage access to your content with a high level of security through various restrictions. You can designate which page your visitors will see when firewall errors occur.

The default error pages for VergeCloud’s firewall are illustrated below:

![](image-placeholder.png)

Configure Firewall Error "Redirect" via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'page="firewall_error"' \
--form 'url="https://example.com/firewall"' \
--form 'type="url"'

"Upload HTML" for Firewall Error via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'file=@"/C:/Users/vergecloud/Desktop/example.html"' \
--form 'page="firewall_error"' \
--form 'type="file"'

WAF Errors

The Web Application Firewall (WAF) is designed to monitor and block manipulated data packets targeting web applications.

The default error messages for this service are shown below:

![](image-placeholder.png)

Set "Redirect" for WAF Error via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'page="waf_protection"' \
--form 'url="https://example.com/waf"' \
--form 'type="url"'

"Upload HTML" for WAF Error via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'file=@"/C:/Users/vergecloud/Desktop/example.html"' \
--form 'page="waf_protection"' \
--form 'type="file"'

Rate Limit Errors

Rate Limiting allows you to control the incoming and outgoing traffic to and from a network by restricting the number of requests a user can send.

If a user exceeds the allowed traffic limits, they will encounter an error, which by default appears as shown below:

![](image-placeholder.png)

Set "Redirect" for Rate Limit Error via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'page="rate_limit_exceeded"' \
--form 'url="https://example.com/rl"' \
--form 'type="url"'

"Upload HTML" for Rate Limit Error via API:

curl --location --request GET 'https://napi.vergecloud.com/cdn/4.0/domains/example.com/custom-pages' \
--header 'authority: napi.vergecloud.com' \
--header 'accept: application/json, text/plain, */*' \
--header 'authorization: APIKEY 1 2 3 4' \
--header 'cache-control: no-cache' \
--form 'file=@"/C:/Users/vergecloud/Desktop/example.html"' \
--form 'page="rate_limit_exceeded"' \
--form 'type="file"'

Related Articles
Understanding HTTP Headers Sent by VergeCloud CDN: Optimize Your Website’s Performance
Headers Sent by CDN to User and Origin Server When a website utilizes VergeCloud CDN, visitor requests are directed to VergeCloud CDN servers rather than the original server that hosts the site. In reply to these requests, the CDN edge server ...
Using a Custom SSL Certificate on VergeCloud: Secure Your Website with Confidence
Custom SSL Certificate You can continue utilizing your custom SSL certificate by navigating to the VergeCloud HTTPS Settings. Introduction Custom SSL certificates are essential for securing data transmitted over the internet. With VergeCloud, users ...
Setting Up JA3 Fingerprint on VergeCloud: Enhance Website Security and Threat Detection
VergeCloud JA3 Fingerprint The JA3 Fingerprint feature enables you to assess SSL/TLS clients that submit requests to your website, regardless of port, IP address, or HTTP parameters. This capability allows you to recognize users with an SSL/TLS ...
Understanding Load Balancing on VergeCloud: Optimize Traffic Distribution and Performance
Load Balancing Using VergeCloud CDN, you can efficiently distribute traffic across multiple servers with similar resources and data capabilities. This setup enhances redundancy and reliability by enabling more servers to handle requests effectively. ...
Setting Up HTTPS Configuration on VergeCloud: Secure Your Website with an SSL Certificate
HTTPS Configuration with VergeCloud In this section, you'll learn how to manage the connection protocol between users and your website via VergeCloud's CDN edge servers. You can adjust settings related to HTTPS for content delivery, including ...

How to Set Up Custom HTTP Error Pages on VergeCloud for Improved User Experience

Creating Custom HTTP Error Pages on VergeCloud: Enhance User Experience

Custom Pages

Glossary

Real Usage Scenarios

Field/Option Descriptions

Available Variables

Under Construction Pages

Setting a "Custom Page" for the Under Construction Page via API:

Setting the "Redirect" for the Under Construction Page via API:

Error 500

Set "Redirect" for Errors Connecting to the Main Server via API:

"Upload HTML" for Errors Connecting to the Main Server via API:

Custom Template for DDoS Protection Challenges

JavaScript Challenge

Setting Up a Custom JavaScript Challenge Page via API:

Captcha Challenge

Setting Up a Custom Captcha Challenge Page via API:

SecureLink Invalid Errors

Set "Redirect" for Secure Link Error via API:

"Upload HTML" for Secure Link Error via API:

Firewall Errors

Configure Firewall Error "Redirect" via API:

"Upload HTML" for Firewall Error via API:

WAF Errors

Set "Redirect" for WAF Error via API:

"Upload HTML" for WAF Error via API:

Rate Limit Errors

Set "Redirect" for Rate Limit Error via API:

"Upload HTML" for Rate Limit Error via API:

Related Articles

Understanding HTTP Headers Sent by VergeCloud CDN: Optimize Your Website’s Performance

Using a Custom SSL Certificate on VergeCloud: Secure Your Website with Confidence

Setting Up JA3 Fingerprint on VergeCloud: Enhance Website Security and Threat Detection

Understanding Load Balancing on VergeCloud: Optimize Traffic Distribution and Performance

Setting Up HTTPS Configuration on VergeCloud: Secure Your Website with an SSL Certificate