Custom error Pages for Dev #4006
Conversation
📝 WalkthroughWalkthroughThe changes involve updating the Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## staging #4006 +/- ##
========================================
Coverage 11.73% 11.73%
========================================
Files 114 114
Lines 15330 15330
Branches 319 319
========================================
Hits 1799 1799
Misses 13531 13531 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
k8s/nginx/development/global-config.yaml (2)
21-147: Consider extracting common styles to reduce duplicationThe HTML error pages share identical CSS styles with only color variations. Consider implementing these as separate CSS files and including them via nginx's
sub_filterdirective for better maintainability.Example configuration:
+ # Add to the main nginx configuration + http { + sub_filter_once off; + sub_filter '__STYLE_URL__' '/static/error-pages.css'; + }Then modify the error pages to reference the external stylesheet:
- <style> - * { margin: 0; padding: 0; box-sizing: border-box; } - ... - </style> + <link rel="stylesheet" href="__STYLE_URL__">🧰 Tools
🪛 yamllint (1.35.1)
[error] 110-110: trailing spaces
(trailing-spaces)
[error] 137-137: trailing spaces
(trailing-spaces)
23-48: Enhance accessibility supportConsider adding the following accessibility improvements:
- Add
lang="en"attribute to HTML tags- Include ARIA labels for interactive elements
- Add
role="alert"to error messagesExample improvement for the 500 error page:
- <html> + <html lang="en"> <head> <title>500 - Internal Server Error</title> </head> <body> <div class="container"> - <div class="error-code">500</div> + <div class="error-code" role="alert" aria-label="Error code 500">500</div>Also applies to: 53-81, 84-111, 114-146
k8s/nginx/staging/global-config.yaml (1)
14-150: Consider using a template system for environment configurationsThe error pages are identical between development and staging environments. Consider using a template system or including shared configurations to reduce duplication and maintenance overhead.
Example approach using environment variables:
# shared/error-pages.conf error_page 500 = @custom_internal_server_error; error_page 404 = @custom_page_not_found; error_page 403 = @custom_access_denied; error_page 401 = @custom_unauthorized; # Then in each environment's config: include shared/error-pages.conf;🧰 Tools
🪛 yamllint (1.35.1)
[error] 113-113: trailing spaces
(trailing-spaces)
[error] 140-140: trailing spaces
(trailing-spaces)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
k8s/nginx/development/global-config.yaml(1 hunks)k8s/nginx/staging/global-config.yaml(1 hunks)
🧰 Additional context used
🪛 yamllint (1.35.1)
k8s/nginx/development/global-config.yaml
[error] 110-110: trailing spaces
(trailing-spaces)
[error] 137-137: trailing spaces
(trailing-spaces)
k8s/nginx/staging/global-config.yaml
[error] 113-113: trailing spaces
(trailing-spaces)
[error] 140-140: trailing spaces
(trailing-spaces)
🔇 Additional comments (1)
k8s/nginx/development/global-config.yaml (1)
11-14: Consider API clients when serving HTML error pages
While the HTML error pages enhance the user experience for browser clients, API clients expecting JSON responses might be affected. Consider adding content negotiation based on the Accept header.
| </html>'; | ||
| } | ||
|
|
||
| location @custom_access_denied { | ||
| return 403 ' | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>403 - Access Denied</title> | ||
| <style> | ||
| * { margin: 0; padding: 0; box-sizing: border-box; } | ||
| body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background: #f5f7fa; color: #2d3748; min-height: 100vh; display: flex; flex-direction: column; } | ||
| .container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; } | ||
| .error-code { font-size: 8rem; font-weight: bold; color: #d69e2e; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } | ||
| .title { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; color: #2d3748; } | ||
| .message { font-size: 1.2rem; color: #4a5568; margin-bottom: 2rem; max-width: 600px; line-height: 1.6; } | ||
| .home-button { background-color: #d69e2e; color: white; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; font-weight: 500; transition: background-color 0.2s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } | ||
| .home-button:hover { background-color: #b7791f; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class=\"container\"> | ||
| <div class=\"error-code\">403</div> | ||
| <h1 class=\"title\">Access Denied</h1> | ||
| <p class=\"message\"> | ||
| You don’t have permission to access this resource. If you believe this is a mistake, please contact the administrator. | ||
| </p> | ||
| <a href=\"/\" class=\"home-button\">Back to Home</a> | ||
| </div> | ||
| </body> | ||
| </html>'; | ||
| } | ||
|
|
||
| location @custom_unauthorized { | ||
| return 401 ' | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>401 - Unauthorized</title> | ||
| <style> | ||
| * { margin: 0; padding: 0; box-sizing: border-box; } | ||
| body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background: #f5f7fa; color: #2d3748; min-height: 100vh; display: flex; flex-direction: column; } | ||
| .container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; } | ||
| .error-code { font-size: 8rem; font-weight: bold; color: #dd6b20; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } | ||
| .title { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; color: #2d3748; } | ||
| .message { font-size: 1.2rem; color: #4a5568; margin-bottom: 2rem; max-width: 600px; line-height: 1.6; } | ||
| .home-button { background-color: #dd6b20; color: white; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; font-weight: 500; transition: background-color 0.2s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } | ||
| .home-button:hover { background-color: #c05621; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class=\"container\"> | ||
| <div class=\"error-code\">401</div> | ||
| <h1 class=\"title\">Unauthorized</h1> | ||
| <p class=\"message\"> | ||
| You need to log in to access this page. Please check your credentials and try again. | ||
| </p> | ||
| <a href=\"/\" class=\"home-button\">Back to Home</a> | ||
| </div> | ||
| </body> | ||
| </html>'; | ||
| } | ||
|
|
||
| location @custom_page_not_found { | ||
| return 404 ' | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>404 - Page Not Found</title> | ||
| <style> | ||
| * { margin: 0; padding: 0; box-sizing: border-box; } | ||
| body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background: #f5f7fa; color: #2d3748; min-height: 100vh; display: flex; flex-direction: column; } | ||
| .container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; } | ||
| .error-code { font-size: 8rem; font-weight: bold; color: #4299e1; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } | ||
| .title { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; color: #2d3748; } | ||
| .message { font-size: 1.2rem; color: #4a5568; margin-bottom: 2rem; max-width: 600px; line-height: 1.6; } | ||
| .home-button { background-color: #4299e1; color: white; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; font-weight: 500; transition: background-color 0.2s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } | ||
| .home-button:hover { background-color: #3182ce; } | ||
| footer { text-align: center; padding: 1.5rem; background-color: white; color: #718096; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); } | ||
| .animation { margin-bottom: 2rem; font-size: 4rem; animation: bounce 2s infinite; } | ||
| @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class=\"container\"> | ||
| <div class=\"animation\">🤔</div> | ||
| <div class=\"error-code\">404</div> | ||
| <h1 class=\"title\">Page Not Found</h1> | ||
| <p class=\"message\"> | ||
| Oops! The page you are looking for seems to have vanished into thin air. | ||
| Do not worry, you can navigate back to our home page or try searching for what you need. | ||
| </p> | ||
| <a href=\"/\" class=\"home-button\">Back to Home</a> | ||
| </div> | ||
| <footer> | ||
| © 2024 AirQo. All rights reserved. | ||
| </footer> | ||
| </body> | ||
| </html>'; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add security headers for HTML responses
Consider adding security headers for the HTML error pages to enhance security:
- Content-Security-Policy
- X-Content-Type-Options
- X-Frame-Options
Example implementation:
location @custom_internal_server_error {
+ add_header Content-Security-Policy "default-src 'self'; style-src 'unsafe-inline'";
+ add_header X-Content-Type-Options nosniff;
+ add_header X-Frame-Options DENY;
return 500 'Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 yamllint (1.35.1)
[error] 113-113: trailing spaces
(trailing-spaces)
[error] 140-140: trailing spaces
(trailing-spaces)
Description
Custom error pages for Nginx- Dev
Testing
Affected Services
Endpoints Ready for Testing
API Documentation Updated?
Additional Notes
[Add any additional notes or comments here]
Summary by CodeRabbit
New Features
Bug Fixes