mirror of
https://github.com/chatwoot/chatwoot.git
synced 2026-06-04 21:02:35 +08:00
b2cb3717e5
## Summary - Replace generic Rails 404, 422, and 500 error pages with custom-designed pages - Each page features a prominent gradient error code, clean typography, and a "Back to home" CTA - Full dark mode support via `prefers-color-scheme` media query - Mobile responsive design - No external dependencies (self-contained static HTML, works even when Rails is down) - No logo/branding to ensure compatibility with custom-branded self-hosted instances --- ## Before (default Rails 404) <img width="2400" height="1998" alt="old-404" src="https://github.com/user-attachments/assets/c5f044c4-aab6-40e9-aa11-6096ed9d2b42" /> --- ## After ### Light mode | 404 | 422 | 500 | |-----|-----|-----| | <img width="600" alt="new-404-light" src="https://github.com/user-attachments/assets/1826c812-0eb9-4219-bdd2-026c54b53123" /> | <img width="600" alt="new-422-light" src="https://github.com/user-attachments/assets/d72ffdbf-b61e-4f53-a16b-4ee81103124f" /> | <img width="600" alt="new-500-light" src="https://github.com/user-attachments/assets/81bbdb24-bfe7-43a1-b584-f37f71e3bded" /> | --- ### Dark mode | 404 | 422 | 500 | |-----|-----|-----| | <img width="600" alt="new-404-dark" src="https://github.com/user-attachments/assets/bd323915-bfb9-48c1-885d-96ff263b4ae0" /> | <img width="600" alt="new-422-dark" src="https://github.com/user-attachments/assets/dcb08eca-aee5-4e36-9690-f44da13e8d88" /> | <img width="600" alt="new-500-dark" src="https://github.com/user-attachments/assets/538c3c2c-b9dc-406c-9932-ff8897b64790" /> | --- ## Test plan Easier way to verify: - [ ] Visit `/404.html` directly to verify the 404 page - [ ] Visit `/422.html` directly to verify the 422 page - [ ] Visit `/500.html` directly to verify the 500 page Full verification: - [ ] Visit a non-existent route in production mode to verify the 404 page - [ ] Trigger a 422 error (e.g., invalid CSRF token) to verify the 422 page - [ ] Trigger a 500 error to verify the 500 page - [ ] Toggle system dark mode and verify all pages render correctly - [ ] Test on mobile viewport widths |
||
|---|---|---|
| .. | ||
| assets | ||
| audio | ||
| brand-assets | ||
| dashboard/images | ||
| downloads | ||
| integrations | ||
| 404.html | ||
| 422.html | ||
| 500.html | ||
| android-icon-36x36.png | ||
| android-icon-48x48.png | ||
| android-icon-72x72.png | ||
| android-icon-96x96.png | ||
| android-icon-144x144.png | ||
| android-icon-192x192.png | ||
| apple-icon-57x57.png | ||
| apple-icon-60x60.png | ||
| apple-icon-72x72.png | ||
| apple-icon-76x76.png | ||
| apple-icon-114x114.png | ||
| apple-icon-120x120.png | ||
| apple-icon-144x144.png | ||
| apple-icon-152x152.png | ||
| apple-icon-180x180.png | ||
| apple-icon-precomposed.png | ||
| apple-icon.png | ||
| apple-touch-icon-precomposed.png | ||
| apple-touch-icon.png | ||
| browserconfig.xml | ||
| favicon-16x16.png | ||
| favicon-32x32.png | ||
| favicon-96x96.png | ||
| favicon-512x512.png | ||
| favicon-badge-16x16.png | ||
| favicon-badge-32x32.png | ||
| favicon-badge-96x96.png | ||
| manifest.json | ||
| ms-icon-70x70.png | ||
| ms-icon-144x144.png | ||
| ms-icon-150x150.png | ||
| ms-icon-310x310.png | ||
| robots.txt | ||
| sw.js | ||
