Beautiful branded error pages (502, 503, 404) with auto-refresh
1.7K
Beautiful, customizable error pages for reverse proxies. Replace ugly default 502/503/404 pages with professional, branded pages that auto-refresh.
When your backend crashes, users see "502 Bad Gateway" in plain text. It looks broken. It is broken. But it doesn't have to look broken. Error pages give your users confidence that you're aware of the issue and working on it — with auto-refresh so they don't have to mash F5.
services:
error-pages:
image: zachbg/docker-error-pages:latest
restart: unless-stopped
environment:
BRAND_NAME: "My Company"
BRAND_URL: "https://mycompany.com"
services:
error-pages:
image: zachbg/docker-error-pages:latest
labels:
traefik.enable: "true"
traefik.http.services.error-pages.loadbalancer.server.port: 8080
traefik:
image: traefik:v3
command:
- "--providers.docker=true"
- "--entrypoints.web.address=:80"
labels:
traefik.http.middlewares.error-pages.errors.status: "400-599"
traefik.http.middlewares.error-pages.errors.service: error-pages
traefik.http.middlewares.error-pages.errors.query: "/{status}"
proxy_intercept_errors on;
error_page 502 503 504 @error;
location @error {
proxy_pass http://error-pages:8080/$status;
}
handle_errors {
rewrite * /{err.status_code}
reverse_proxy error-pages:8080
}
| Variable | Default | Description |
|---|---|---|
THEME | modern | Visual theme |
BRAND_NAME | Service | Your company/service name |
BRAND_URL | / | Homepage URL |
SUPPORT_EMAIL | Support email to display | |
CUSTOM_CSS | Additional CSS to inject |
| Code | Title | Features |
|---|---|---|
| 401 | Unauthorized | Login redirect button |
| 403 | Forbidden | Contact admin prompt |
| 404 | Not Found | Search suggestion |
| 429 | Too Many Requests | Countdown timer + auto-retry |
| 500 | Internal Server Error | Team notified message |
| 502 | Bad Gateway | Auto-refresh (30s) |
| 503 | Service Unavailable | Spinner + auto-refresh (15s) |
| 504 | Gateway Timeout | Auto-refresh (30s) |
Mount your own HTML files to override defaults:
volumes:
- ./my-404.html:/usr/share/nginx/error-pages/404.html
- ./my-503.html:/usr/share/nginx/error-pages/503.html
Access error pages directly by status code:
http://error-pages:8080/404http://error-pages:8080/502http://error-pages:8080/503This makes integration with any reverse proxy trivial.
Content type
Image
Digest
sha256:ed46b7091…
Size
25.4 MB
Last updated
6 months ago
docker pull zachbg/docker-error-pages