Merge pull request #790 from aosus/add-error-page

Add user-friendly error page on Proxy errors
aosus · Jan 26, 2024 · 9c265cd · 9c265cd
2 parents ea85475 + 2d2ed99
commit 9c265cd
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 9 deletions.
diff --git a/caddy/configs/aosus-wordpress.caddyfile b/caddy/configs/aosus-wordpress.caddyfile
@@ -2,6 +2,13 @@ aosus.org {
 	header {
 		Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
 	}
+	handle_errors {
+		# handle_errors is only triggerd on erros from Caddy and not the proxy, that's why we don't specifiy any errors here.
+		rewrite * /proxy_error_page.html
+		file_server {
+			root /srv/
+		}
+	}
 	# https://matrix-org.github.io/synapse/latest/reverse_proxy.html#caddy-v2
 	header /.well-known/matrix/* Content-Type application/json
 	header /.well-known/matrix/* Access-Control-Allow-Origin *

diff --git a/caddy/configs/discourse.caddyfile b/caddy/configs/discourse.caddyfile
@@ -2,6 +2,13 @@ discourse.aosus.org {
 	header {
 		Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
 	}
+	handle_errors {
+		# handle_errors is only triggerd on erros from Caddy and not the proxy, that's why we don't specifiy any errors here.
+		rewrite * /proxy_error_page.html
+		file_server {
+			root /srv/
+		}
+	}
 	reverse_proxy app:80
 	encode zstd gzip
 }
diff --git a/caddy/configs/gnulinuxsa-wordpress.caddyfile b/caddy/configs/gnulinuxsa-wordpress.caddyfile
@@ -2,6 +2,13 @@ gnulinuxsa.org {
 	header {
 		Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
 	}
+	handle_errors {
+		# handle_errors is only triggerd on erros from Caddy and not the proxy, that's why we don't specifiy any errors here.
+		rewrite * /proxy_error_page.html
+		file_server {
+			root /srv/
+		}
+	}
 	reverse_proxy gnulinuxsa-wordpress:80
 	encode zstd gzip
 }
diff --git a/caddy/configs/matrix.caddyfile b/caddy/configs/matrix.caddyfile
@@ -25,6 +25,13 @@ matrix.aosus.org {
 			header_up Host media.discordapp.net
 		}
 	}
+	handle_errors {
+		# handle_errors is only triggerd on erros from Caddy and not the proxy, that's why we don't specifiy any errors here.
+		rewrite * /proxy_error_page.html
+		file_server {
+			root /srv/
+		}
+	}
 	reverse_proxy synapse:8008
 	encode zstd gzip
 }

diff --git a/caddy/configs/piped.caddyfile b/caddy/configs/piped.caddyfile
@@ -16,11 +16,18 @@ piped.aosus.link {
 	respond /robots.txt 200 {
 		body "User-agent: *
 Disallow: /"
-	}    
+	}
+	handle_errors {
+		# handle_errors is only triggerd on erros from Caddy and not the proxy, that's why we don't specifiy any errors here.
+		rewrite * /proxy_error_page.html
+		file_server {
+			root /srv/
+		}
+	}
 	header {
-        X-Robots-Tag "noindex, noarchive, nofollow, nosnippet"
+		X-Robots-Tag "noindex, noarchive, nofollow, nosnippet"
 		X-XSS-Protection "1; mode=block"
-    }
+	}
 	# end aosus settings
 	reverse_proxy pipedfrontend:80
 	import piped-global
@@ -32,11 +39,11 @@ api.piped.aosus.link {
 	respond /robots.txt 200 {
 		body "User-agent: *
 Disallow: /"
-	}    
+	}
 	header {
-        X-Robots-Tag "noindex, noarchive, nofollow, nosnippet"
+		X-Robots-Tag "noindex, noarchive, nofollow, nosnippet"
 		X-XSS-Protection "1; mode=block"
-    }
+	}
 	# end aosus settings
 	reverse_proxy piped-nginx:80
 	import piped-global
@@ -50,11 +57,11 @@ proxy.piped.aosus.link {
 	respond /robots.txt 200 {
 		body "User-agent: *
 Disallow: /"
-	}    
+	}
 	header {
-        X-Robots-Tag "noindex, noarchive, nofollow, nosnippet"
+		X-Robots-Tag "noindex, noarchive, nofollow, nosnippet"
 		X-XSS-Protection "1; mode=block"
-    }
+	}
 	# end aosus settings
 	route {
 		header @ytproxy {

diff --git a/caddy/configs/plausible.caddyfile b/caddy/configs/plausible.caddyfile
@@ -2,6 +2,13 @@ pa.aosus.org {
 	header {
 		Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
 	}
+	handle_errors {
+		# handle_errors is only triggerd on erros from Caddy and not the proxy, that's why we don't specifiy any errors here.
+		rewrite * /proxy_error_page.html
+		file_server {
+			root /srv/
+		}
+	}
 	rewrite /js/pls.js /js/plausible.js
 	rewrite /js/pls2.js /js/plausible.hash.js
 	rewrite /js/pls3.js /js/plausible.outbound-links.js

diff --git a/caddy/docker-compose.yml b/caddy/docker-compose.yml
@@ -22,6 +22,7 @@ services:
         target: /etc/caddy/Caddyfile
     volumes:
       - /home/aosus/caddy/configs:/etc/caddy/configs:ro
+      - /home/aosus/caddy/proxy_error_page.html:/srv/proxy_error_page.html:ro
       - data:/data
       - config:/config
       - piped-proxy:/var/run/ytproxy

diff --git a/caddy/proxy_error_page.html b/caddy/proxy_error_page.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="ar">
+
+<head>
+    <div dir="RTL">
+        <meta charset="utf-8">
+        <meta http-equiv="refresh" content="60">
+        <title>هذه الخدمة غير متوفرة حاليا</title>
+        <style>
+            .center {
+                display: flex;
+                justify-content: center;
+            }
+
+            .container {
+                background: #ececec;
+                max-width: 500px;
+                padding: 50px 50px 30px 50px;
+                margin-top: 50px;
+                border-radius: 20px; /* Rounded corners */
+            }
+
+            .title {
+                padding-top: 20px;
+            }
+
+            h1,
+            p {
+                font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
+            }
+
+            @keyframes spin {
+                from {
+                    transform: rotate(0deg);
+                }
+
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            .spinner {
+                animation: spin 2s infinite linear;
+                height: 30px;
+                width: 30px;
+                border: 4px solid #919191;
+                border-right-color: transparent;
+                border-radius: 50%;
+                margin-top: 20px;
+            }
+
+            /* Center the buttons */
+            .button-container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            /* Style the buttons */
+            .button {
+                border: none; /* Remove border */
+                color: white; /* White text */
+                padding: 15px 32px; /* Add some padding */
+                text-align: center; /* Centered text */
+                text-decoration: none; /* Remove underline */
+                display: inline-block; /* Inline element */
+                font-size: 16px; /* Set a font size */
+                border-radius: 30px; /* Rounded corners */
+                box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26); /* Add a shadow */
+                transition: 0.3s; /* Add a transition effect */
+            }
+
+            /* Change the button color on hover */
+            .button:hover {
+                box-shadow: 0 4px 10px 0 rgba(0,0,0,0.37); /* Bigger shadow */
+            }
+
+            /* Green button */
+            .green {
+                background-color: green; /* Green background */
+            }
+
+            /* Green button on hover */
+            .green:hover {
+                background-color: #66bb6a; /* Lighter green */
+            }
+
+            /* Cyan button */
+            .cyan {
+                background-color: #0088CC; /* Cyan background */
+            }
+
+            /* Cyan button on hover */
+            .cyan:hover {
+                background-color: #00aaff; /* Lighter cyan */
+            }
+
+            /* Add some margin between the buttons */
+            .button + .button {
+                margin: 10px;
+            }
+        </style>
+</head>
+
+<body>
+    <div class="center">
+        <div class="container">
+            <div class="center">
+                <img src="https://cdn-cf-discourse.aosus.org/original/2X/c/c3ea74b68d4f80fbf949a0b6989e44a1b33dce29.svg"
+                    alt="Discourse logo" width="244" height="66">
+            </div>
+            <h1 class="title">هذه الخدمة غير متوفرة حاليا&hellip;</h1>
+            <div class="center">
+                <p>ربما يتم تحديثها او تواجه صعوبات تقنية <br />
+                تأكد من حالة خدمات مجتمع عبر الزر بالاسفل
+                </p>
+            </div>
+            <div class="button-container">
+                <a href="https://status.aosus.org" class="button green">حالة خدمات أسس</a>
+                <a href="https://t.me/aosus" class="button cyan"> أسس على التيليجرام</a>
+            </div>
+            <div class="center">
+              <p>الصفحة يتم تحديثها تلقائيا كل 60 ثانية</p>
+            </div>
+            <div class="center">
+                <div class="spinner"></div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>