Skip to content

feat(pages): Redesign the error pages #581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
balamurali27 merged 2 commits into from
Aug 18, 2026
Merged

feat(pages): Redesign the error pages #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e421d72
feat(pages): Redesign the error pages
balamurali27 Aug 16, 2026
8166147
feat(pages): Point the 500 page at the bench's web.error.log
balamurali27 Aug 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 101 additions & 128 deletions agent/pages/bad_gateway.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,169 +2,142 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bad Gateway</title>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color-scheme: light;
}

body {
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: #1a4469;
background-color: #f9fafa;
}

.container {
padding-top: 4rem;
max-width: 768px;
margin: 0 auto;
Cantarell, "Helvetica Neue", sans-serif;
background-color: #ffffff;
color: #171717;
min-height: 100vh;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 48px;
}

.logo {
.content {
max-width: 26rem;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 16px;
}

.logo svg {
height: 2rem;
.text {
display: flex;
flex-direction: column;
gap: 8px;
}

.logo h1 {
font-size: 18px;
h1 {
font-size: 20px;
font-weight: 600;
color: #171717;
line-height: 1.3;
}

.message-container {
width: 24rem;
margin: 0 auto;
background-color: white;
padding: 2.5rem;
margin-top: 1.5rem;
-webkit-box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
font-size: 13px;
text-align: center;
border-radius: 0.375rem;
p {
font-size: 14px;
line-height: 1.5;
color: #525252;
}

.alert-icon svg {
height: 2rem;
width: 2rem;
.footer {
font-size: 14px;
line-height: 1.5;
text-align: center;
color: #7c7c7c;
}

h1 {
font-size: 16px;
font-weight: 500;
a {
color: #0070cc;
}

p {
color: #4c5a67;
line-height: 1.5;
/* plain-html visited purple. must not reach .button, whose label is white */
a:not(.button):visited {
color: #551a8b;
}

a {
color: #1579d0;
.button {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 8px;
background-color: #171717;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #1579d0;
}

.button:hover {
background-color: #2f2f2f;
}
</style>
</head>

<body>
<div class="container">
<div class="logo">
<svg
width="40"
height="100"
viewBox="0 0 160 120"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M93.4626 0H23.5665C10.5511 0 0 10.5511 0 23.5665V93.4626C0 106.478 10.5511 117.029 23.5665 117.029H93.4626C106.478 117.029 117.029 106.478 117.029 93.4626V23.5665C117.029 10.5511 106.478 0 93.4626 0Z"
fill="url(#paint0_radial_0_9)"
/>
<path
d="M94.4529 48.9854C89.7801 42.265 81.9046 38.3798 73.7142 38.9048C70.1965 32.552 63.6861 28.3517 56.0732 27.8792C50.7704 27.5642 45.4151 29.4018 41.2674 32.972C38.4322 35.4396 36.3846 38.2748 35.1245 41.4775C34.3895 43.3676 32.7094 44.5751 30.9243 44.5751H18.3761V55.0757H30.9243C37.0671 55.0757 42.5799 51.243 44.8901 45.3102C45.5201 43.6826 46.5702 42.265 48.1453 40.8999C50.1929 39.1148 52.8705 38.1698 55.3907 38.3273C59.1709 38.5898 61.8485 40.3224 63.5286 42.475C65.3137 44.4701 66.3113 47.5678 66.8888 50.6655C70.249 49.7204 73.9242 48.9329 77.4419 49.5104C80.3296 49.9829 83.0072 51.5055 84.9498 53.7631C85.2648 54.1307 85.5798 54.4982 85.8424 54.9182C88.3625 58.5409 88.835 63.0037 87.1549 67.4139C85.6324 71.5091 80.0145 75.2369 75.3418 75.2369H38.7997C33.8119 75.2369 29.7167 71.5091 29.0867 66.7314H18.5861C19.2686 77.337 28.0366 85.7374 38.7997 85.7374H75.3943C84.4248 85.7374 93.9278 79.3321 97.0255 71.1416C99.9132 63.4762 98.9681 55.3907 94.5054 48.9329L94.4529 48.9854Z"
fill="#FFFAE9"
/>
<defs>
<radialGradient
id="paint0_radial_0_9"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-28.5 -58) rotate(54.335) scale(209.246)"
>
<stop stop-color="#40D1FF" />
<stop offset="1" stop-color="#0097FF" />
</radialGradient>
</defs>
</svg>
<div class="logo-text">
<h1>Frappe Cloud</h1>
</div>
</div>
<div class="message-container">
<div class="alert-icon">
<!-- Red filled circle with white exclamation mark (scaled down via CSS) -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" fill="#EF4444" stroke="#EF4444" />
<line x1="12" x2="12" y1="8" y2="12" stroke="white" />
<line x1="12" x2="12.01" y1="16" y2="16" stroke="white" />
</svg>
</div>
<h1>Bad Gateway</h1>
<p class="message">
Your bench appears to be down.
<a
href="https://docs.frappe.io/cloud/site/common-issues/502-bad-gateway"
style="
display: inline-block;
margin-top: 10px;
padding: 8px 16px;
background: #f5f5f5;
border-radius: 4px;
color: #333;
text-decoration: none;
font-weight: bold;
border: 1px solid #e0e0e0;
"
>
📄 Follow the step-by-step guide to debug this issue
</a>
</p>
<p>
If you are the owner of this site, please check the error logs on your
site's
<a class="dashboard-url" href="https://frappecloud.com/dashboard"
><strong>dashboard</strong></a
>.
</p>
<div class="content">
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M17.4 5.5a3 3 0 0 1 5.2 0l14.1 24.5a3 3 0 0 1-2.6 4.5H5.9a3 3 0 0 1-2.6-4.5L17.4 5.5Z"
stroke="#E5484D"
stroke-width="2.5"
stroke-linejoin="round"
/>
<path
d="M20 15.5v6.5"
stroke="#E5484D"
stroke-width="2.5"
stroke-linecap="round"
/>
<circle cx="20" cy="27.5" r="1.75" fill="#E5484D" />
</svg>
<div class="text">
<h1>This site is not responding</h1>
<p>Error: 502 Bad Gateway</p>
</div>
<a
class="button"
href="https://docs.frappe.io/cloud/site/common-issues/502-bad-gateway"
>View troubleshooting guide</a
>
</div>
<p class="footer">
Site owner? Check the
<a class="dashboard-url" href="https://frappecloud.com/dashboard"
>dashboard</a
>
for the current status of your bench.
</p>
<script>
// the dashboard link needs the site name, which only the browser knows here
document.querySelector(".dashboard-url").href =
`https://frappecloud.com/dashboard/sites/${window.location.hostname}`;
</script>
</body>

<script>
const dashboardUrl = document.querySelector(".dashboard-url");
const siteName = window.location.hostname;
dashboardUrl.href = `https://frappecloud.com/dashboard/sites/${siteName}`;
</script>
</html>
Loading
Loading