Custom Error Page
For security reasons, we respond with our own error page for all HTTP errors with a code 50x . This hides the load balancer, the Alokai app errors, and the stack trace. Additionally, we offer the ability to customize the error page - to do that you will need to prepare the html page and upload it via the API.
The default error page
Disable the error page
In some situations having an error page with a whole error stack trace from the application or the load balancer can be really useful - it might help with debugging the problem. To disable the custom error page and display the errors you need to turn off the page through our API.
We do not recommend keeping the error page disabled.
API curl request example:
curl -H "X-User-Id: $CLOUD_USERNAME" -H "X-Api-Key: $CLOUD_PASSWORD" -H 'Content-Type: application/json' -X PATCH -d'
{
"nginx": {
"custom_error_page": {
"enabled": false
}
}
}' https://farmer.storefrontcloud.io/instance/<your-instance-name>
Upload the custom error page
Encode the html page with base64
Example HTML code of the custom error page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style> @import url(https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400&display=swap); @import url(https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400&display=swap); body { margin: 0; } .main { color: #19181b; font-family: "Red Hat Text", sans-serif; font-size: 16px; line-height: 24px; flex: 1 1 auto; max-width: 100%; position: relative; } header { box-shadow: 0 0 2px rgba(25, 24, 27, 0.2); overflow: visible; } .page-wrapper { padding: 0 12px; margin-right: auto; margin-left: auto; display: flex; flex-direction: column; } section.page-wrapper { justify-content: center; } .logo { flex-direction: row; height: 80px; } .logo > a > img { height: 50%; } @media (min-width: 768px) { .page-wrapper { max-width: 728px; flex-direction: row; } } @media (min-width: 1024px) { .page-wrapper { max-width: 984px; } } @media (min-width: 1440px) { .page-wrapper { max-width: 1280px; } } @media (min-width: 768px) { .content-wrapper { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 1024px) { .content-wrapper { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } } .error-header { font-family: "Red Hat Display", sans-serif; line-height: 104px; font-size: 96px; font-weight: 700; margin-top: 40px; margin-bottom: 16px; } .error-subtitle { font-size: 18px; line-height: 26px; font-weight: 400; } .error-description { font-size: 16px; line-height: 24px; margin: 24px 0; } .text-center { text-align: center; } #action-button { cursor: pointer; align-items: center; display: inline-flex; font-weight: 500; justify-content: center; letter-spacing: 0.0892857143em; line-height: normal; outline: 0; text-indent: 0.0892857143em; text-transform: uppercase; font-size: 0.875rem; --v-theme-primary: 2, 198, 82; background: rgb(var(--v-theme-primary)); -webkit-appearance: button; min-width: 60px; color: #fff; width: 100%; height: 52px; border-radius: 6px; box-shadow: 0 2px 4px rgba(25, 24, 27, 0.1), 0 0 2px rgba(25, 24, 27, 0.2); } </style>
</head>
<body>
<div class="main">
<header>
<div class="page-wrapper logo">
<a href="/">
<img src="https://uploads-ssl.webflow.com/5e7cf661c23ac9df156d9c3d/6164b265de5283834dad50da_VSF%20Primary.svg" alt="logo" />
</a>
</div>
</header>
<section class="page-wrapper">
<div class="content-wrapper">
<h1 class="error-header text-center">Custom Error Page!</h1>
<h2 class="error-subtitle text-center">Something went wrong...</h2>
<p class="error-description text-center">We are experiencing an unexpected server error. We are working on fixing the problem. Be back soon.</p>
<btn id="action-button" class="" onclick="location.reload()">Refresh page</btn>
</div>
</section>
</div>
</body>
</html>
You can use base64 command line utility to encode the html page.
First, save the page into html file. Then in a terminal simply execute the following:
cat custom-error-page.html | base64
What you will get as a result is the same HTML error page encoded to Base64 string:
PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICAgIDxzdHlsZT4gQGltcG9ydCB1cmwoaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1SZWQrSGF0K0Rpc3BsYXk6d2dodEA0MDAmZGlzcGxheT1zd2FwKTsgQGltcG9ydCB1cmwoaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1SZWQrSGF0K1RleHQ6d2dodEA0MDAmZGlzcGxheT1zd2FwKTsgYm9keSB7IG1hcmdpbjogMDsgfSAubWFpbiB7IGNvbG9yOiAjMTkxODFiOyBmb250LWZhbWlseTogIlJlZCBIYXQgVGV4dCIsIHNhbnMtc2VyaWY7IGZvbnQtc2l6ZTogMTZweDsgbGluZS1oZWlnaHQ6IDI0cHg7IGZsZXg6IDEgMSBhdXRvOyBtYXgtd2lkdGg6IDEwMCU7IHBvc2l0aW9uOiByZWxhdGl2ZTsgfSBoZWFkZXIgeyBib3gtc2hhZG93OiAwIDAgMnB4IHJnYmEoMjUsIDI0LCAyNywgMC4yKTsgb3ZlcmZsb3c6IHZpc2libGU7IH0gLnBhZ2Utd3JhcHBlciB7IHBhZGRpbmc6IDAgMTJweDsgbWFyZ2luLXJpZ2h0OiBhdXRvOyBtYXJnaW4tbGVmdDogYXV0bzsgZGlzcGxheTogZmxleDsgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsgfSBzZWN0aW9uLnBhZ2Utd3JhcHBlciB7IGp1c3RpZnktY29udGVudDogY2VudGVyOyB9IC5sb2dvIHsgZmxleC1kaXJlY3Rpb246IHJvdzsgaGVpZ2h0OiA0MHB4OyB9IC5sb2dvID4gYSA+IGltZyB7IGhlaWdodDogMTAwJTsgfSBAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHsgLnBhZ2Utd3JhcHBlciB7IG1heC13aWR0aDogNzI4cHg7IGZsZXgtZGlyZWN0aW9uOiByb3c7IH0gfSBAbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7IC5wYWdlLXdyYXBwZXIgeyBtYXgtd2lkdGg6IDk4NHB4OyB9IH0gQG1lZGlhIChtaW4td2lkdGg6IDE0NDBweCkgeyAucGFnZS13cmFwcGVyIHsgbWF4LXdpZHRoOiAxMjgwcHg7IH0gfSBAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHsgLmNvbnRlbnQtd3JhcHBlciB7IGZsZXg6IDAgMCA1MCU7IG1heC13aWR0aDogNTAlOyB9IH0gQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkgeyAuY29udGVudC13cmFwcGVyIHsgZmxleDogMCAwIDMzLjMzMzMzMzMzMzMlOyBtYXgtd2lkdGg6IDMzLjMzMzMzMzMzMzMlOyB9IH0gLmVycm9yLWhlYWRlciB7IGZvbnQtZmFtaWx5OiAiUmVkIEhhdCBEaXNwbGF5Iiwgc2Fucy1zZXJpZjsgbGluZS1oZWlnaHQ6IDMycHg7IGZvbnQtc2l6ZTogMjRweDsgZm9udC13ZWlnaHQ6IDcwMDsgbWFyZ2luLXRvcDogNDBweDsgbWFyZ2luLWJvdHRvbTogMTZweDsgfSAuZXJyb3Itc3VidGl0bGUgeyBmb250LXNpemU6IDE4cHg7IGxpbmUtaGVpZ2h0OiAyNnB4OyBmb250LXdlaWdodDogNDAwOyB9IC5lcnJvci1kZXNjcmlwdGlvbiB7IGZvbnQtc2l6ZTogMTZweDsgbGluZS1oZWlnaHQ6IDI0cHg7IG1hcmdpbjogMjRweCAwOyB9IC50ZXh0LWNlbnRlciB7IHRleHQtYWxpZ246IGNlbnRlcjsgfSAjYWN0aW9uLWJ1dHRvbiB7IGN1cnNvcjogcG9pbnRlcjsgYWxpZ24taXRlbXM6IGNlbnRlcjsgZGlzcGxheTogaW5saW5lLWZsZXg7IGZvbnQtd2VpZ2h0OiA1MDA7IGp1c3RpZnktY29udGVudDogY2VudGVyOyBsZXR0ZXItc3BhY2luZzogMC4wODkyODU3MTQzZW07IGxpbmUtaGVpZ2h0OiBub3JtYWw7IG91dGxpbmU6IDA7IHRleHQtaW5kZW50OiAwLjA4OTI4NTcxNDNlbTsgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsgZm9udC1zaXplOiAwLjg3NXJlbTsgLS12LXRoZW1lLXByaW1hcnk6IDIsIDE5OCwgODI7IGJhY2tncm91bmQ6IHJnYih2YXIoLS12LXRoZW1lLXByaW1hcnkpKTsgLXdlYmtpdC1hcHBlYXJhbmNlOiBidXR0b247IG1pbi13aWR0aDogNjBweDsgY29sb3I6ICNmZmY7IHdpZHRoOiAxMDAlOyBoZWlnaHQ6IDUycHg7IGJvcmRlci1yYWRpdXM6IDZweDsgYm94LXNoYWRvdzogMCAycHggNHB4IHJnYmEoMjUsIDI0LCAyNywgMC4xKSwgMCAwIDJweCByZ2JhKDI1LCAyNCwgMjcsIDAuMik7IH0gPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1haW4iPgogICAgICAgIDxoZWFkZXI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InBhZ2Utd3JhcHBlciBsb2dvIj4KICAgICAgICAgICAgICAgIDxhIGhyZWY9Ii8iPgogICAgICAgICAgICAgICAgICAgIDxpbWcgc3JjPSJodHRwczovL3VwbG9hZHMtc3NsLndlYmZsb3cuY29tLzVlN2NmNjYxYzIzYWM5ZGYxNTZkOWMzZC82MTY0YjI2NWRlNTI4MzgzNGRhZDUwZGFfVlNGJTIwUHJpbWFyeS5zdmciIGFsdD0ibG9nbyIgLz4KICAgICAgICAgICAgICAgIDwvYT4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9oZWFkZXI+CiAgICAgICAgPHNlY3Rpb24gY2xhc3M9InBhZ2Utd3JhcHBlciI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImNvbnRlbnQtd3JhcHBlciI+CiAgICAgICAgICAgICAgICA8aDEgY2xhc3M9ImVycm9yLWhlYWRlciB0ZXh0LWNlbnRlciI+Q3VzdG9tIEVycm9yIFBhZ2UhPC9oMT4KICAgICAgICAgICAgICAgIDxoMiBjbGFzcz0iZXJyb3Itc3VidGl0bGUgdGV4dC1jZW50ZXIiPlNvbWV0aGluZyB3ZW50IHdyb25nLi4uPC9oMj4KICAgICAgICAgICAgICAgIDxwIGNsYXNzPSJlcnJvci1kZXNjcmlwdGlvbiB0ZXh0LWNlbnRlciI+V2UgYXJlIGV4cGVyaWVuY2luZyBhbiB1bmV4cGVjdGVkIHNlcnZlciBlcnJvci4gV2UgYXJlIHdvcmtpbmcgb24gZml4aW5nIHRoZSBwcm9ibGVtLiBCZSBiYWNrIHNvb24uPC9wPgogICAgICAgICAgICAgICAgPGJ0biBpZD0iYWN0aW9uLWJ1dHRvbiIgY2xhc3M9IiIgb25jbGljaz0ibG9jYXRpb24ucmVsb2FkKCkiPlJlZnJlc2ggcGFnZTwvYnRuPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L3NlY3Rpb24+CiAgICA8L2Rpdj4KPC9ib2R5Pgo8L2h0bWw+Cg==
Configure your instance with a custom error page
Having the page encoded what is left is to send it in the request to Alokai API /instance endpoint:
curl -H "X-User-Id: $CLOUD_USERNAME" -H "X-Api-Key: $CLOUD_PASSWORD" -H 'Content-Type: application/json' -X PATCH -d'
{
"nginx": {
"custom_error_page": {
"body": "PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICAgIDxzdHlsZT4gQGltcG9ydCB1cmwoaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1SZWQrSGF0K0Rpc3BsYXk6d2dodEA0MDAmZGlzcGxheT1zd2FwKTsgQGltcG9ydCB1cmwoaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1SZWQrSGF0K1RleHQ6d2dodEA0MDAmZGlzcGxheT1zd2FwKTsgYm9keSB7IG1hcmdpbjogMDsgfSAubWFpbiB7IGNvbG9yOiAjMTkxODFiOyBmb250LWZhbWlseTogIlJlZCBIYXQgVGV4dCIsIHNhbnMtc2VyaWY7IGZvbnQtc2l6ZTogMTZweDsgbGluZS1oZWlnaHQ6IDI0cHg7IGZsZXg6IDEgMSBhdXRvOyBtYXgtd2lkdGg6IDEwMCU7IHBvc2l0aW9uOiByZWxhdGl2ZTsgfSBoZWFkZXIgeyBib3gtc2hhZG93OiAwIDAgMnB4IHJnYmEoMjUsIDI0LCAyNywgMC4yKTsgb3ZlcmZsb3c6IHZpc2libGU7IH0gLnBhZ2Utd3JhcHBlciB7IHBhZGRpbmc6IDAgMTJweDsgbWFyZ2luLXJpZ2h0OiBhdXRvOyBtYXJnaW4tbGVmdDogYXV0bzsgZGlzcGxheTogZmxleDsgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsgfSBzZWN0aW9uLnBhZ2Utd3JhcHBlciB7IGp1c3RpZnktY29udGVudDogY2VudGVyOyB9IC5sb2dvIHsgZmxleC1kaXJlY3Rpb246IHJvdzsgaGVpZ2h0OiA0MHB4OyB9IC5sb2dvID4gYSA+IGltZyB7IGhlaWdodDogMTAwJTsgfSBAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHsgLnBhZ2Utd3JhcHBlciB7IG1heC13aWR0aDogNzI4cHg7IGZsZXgtZGlyZWN0aW9uOiByb3c7IH0gfSBAbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7IC5wYWdlLXdyYXBwZXIgeyBtYXgtd2lkdGg6IDk4NHB4OyB9IH0gQG1lZGlhIChtaW4td2lkdGg6IDE0NDBweCkgeyAucGFnZS13cmFwcGVyIHsgbWF4LXdpZHRoOiAxMjgwcHg7IH0gfSBAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHsgLmNvbnRlbnQtd3JhcHBlciB7IGZsZXg6IDAgMCA1MCU7IG1heC13aWR0aDogNTAlOyB9IH0gQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkgeyAuY29udGVudC13cmFwcGVyIHsgZmxleDogMCAwIDMzLjMzMzMzMzMzMzMlOyBtYXgtd2lkdGg6IDMzLjMzMzMzMzMzMzMlOyB9IH0gLmVycm9yLWhlYWRlciB7IGZvbnQtZmFtaWx5OiAiUmVkIEhhdCBEaXNwbGF5Iiwgc2Fucy1zZXJpZjsgbGluZS1oZWlnaHQ6IDMycHg7IGZvbnQtc2l6ZTogMjRweDsgZm9udC13ZWlnaHQ6IDcwMDsgbWFyZ2luLXRvcDogNDBweDsgbWFyZ2luLWJvdHRvbTogMTZweDsgfSAuZXJyb3Itc3VidGl0bGUgeyBmb250LXNpemU6IDE4cHg7IGxpbmUtaGVpZ2h0OiAyNnB4OyBmb250LXdlaWdodDogNDAwOyB9IC5lcnJvci1kZXNjcmlwdGlvbiB7IGZvbnQtc2l6ZTogMTZweDsgbGluZS1oZWlnaHQ6IDI0cHg7IG1hcmdpbjogMjRweCAwOyB9IC50ZXh0LWNlbnRlciB7IHRleHQtYWxpZ246IGNlbnRlcjsgfSAjYWN0aW9uLWJ1dHRvbiB7IGN1cnNvcjogcG9pbnRlcjsgYWxpZ24taXRlbXM6IGNlbnRlcjsgZGlzcGxheTogaW5saW5lLWZsZXg7IGZvbnQtd2VpZ2h0OiA1MDA7IGp1c3RpZnktY29udGVudDogY2VudGVyOyBsZXR0ZXItc3BhY2luZzogMC4wODkyODU3MTQzZW07IGxpbmUtaGVpZ2h0OiBub3JtYWw7IG91dGxpbmU6IDA7IHRleHQtaW5kZW50OiAwLjA4OTI4NTcxNDNlbTsgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsgZm9udC1zaXplOiAwLjg3NXJlbTsgLS12LXRoZW1lLXByaW1hcnk6IDIsIDE5OCwgODI7IGJhY2tncm91bmQ6IHJnYih2YXIoLS12LXRoZW1lLXByaW1hcnkpKTsgLXdlYmtpdC1hcHBlYXJhbmNlOiBidXR0b247IG1pbi13aWR0aDogNjBweDsgY29sb3I6ICNmZmY7IHdpZHRoOiAxMDAlOyBoZWlnaHQ6IDUycHg7IGJvcmRlci1yYWRpdXM6IDZweDsgYm94LXNoYWRvdzogMCAycHggNHB4IHJnYmEoMjUsIDI0LCAyNywgMC4xKSwgMCAwIDJweCByZ2JhKDI1LCAyNCwgMjcsIDAuMik7IH0gPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1haW4iPgogICAgICAgIDxoZWFkZXI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InBhZ2Utd3JhcHBlciBsb2dvIj4KICAgICAgICAgICAgICAgIDxhIGhyZWY9Ii8iPgogICAgICAgICAgICAgICAgICAgIDxpbWcgc3JjPSJodHRwczovL3VwbG9hZHMtc3NsLndlYmZsb3cuY29tLzVlN2NmNjYxYzIzYWM5ZGYxNTZkOWMzZC82MTY0YjI2NWRlNTI4MzgzNGRhZDUwZGFfVlNGJTIwUHJpbWFyeS5zdmciIGFsdD0ibG9nbyIgLz4KICAgICAgICAgICAgICAgIDwvYT4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9oZWFkZXI+CiAgICAgICAgPHNlY3Rpb24gY2xhc3M9InBhZ2Utd3JhcHBlciI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImNvbnRlbnQtd3JhcHBlciI+CiAgICAgICAgICAgICAgICA8aDEgY2xhc3M9ImVycm9yLWhlYWRlciB0ZXh0LWNlbnRlciI+Q3VzdG9tIEVycm9yIFBhZ2UhPC9oMT4KICAgICAgICAgICAgICAgIDxoMiBjbGFzcz0iZXJyb3Itc3VidGl0bGUgdGV4dC1jZW50ZXIiPlNvbWV0aGluZyB3ZW50IHdyb25nLi4uPC9oMj4KICAgICAgICAgICAgICAgIDxwIGNsYXNzPSJlcnJvci1kZXNjcmlwdGlvbiB0ZXh0LWNlbnRlciI+V2UgYXJlIGV4cGVyaWVuY2luZyBhbiB1bmV4cGVjdGVkIHNlcnZlciBlcnJvci4gV2UgYXJlIHdvcmtpbmcgb24gZml4aW5nIHRoZSBwcm9ibGVtLiBCZSBiYWNrIHNvb24uPC9wPgogICAgICAgICAgICAgICAgPGJ0biBpZD0iYWN0aW9uLWJ1dHRvbiIgY2xhc3M9IiIgb25jbGljaz0ibG9jYXRpb24ucmVsb2FkKCkiPlJlZnJlc2ggcGFnZTwvYnRuPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L3NlY3Rpb24+CiAgICA8L2Rpdj4KPC9ib2R5Pgo8L2h0bWw+Cg==",
"enabled": true
}
}
}' https://farmer.storefrontcloud.io/instance/<your-instance-name>
The error page after the change
