bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify the error handling

Browse Source 
Just use normal HTML + static CSS
This commit is contained in:
David Heinemeier Hansson
2025-10-29 17:39:50 +01:00
parent 711c87e0e1
commit 7bebea07b4
15 changed files with 234 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/controllers/application_controller.rb
+1 -1
View File
@@ -5,5 +5,5 @@ class ApplicationController < ActionController::Base
include TurboFlash, ViewTransitions include TurboFlash, ViewTransitions
stale_when_importmap_changes stale_when_importmap_changes
allow_browser versions: :modern, block: -> { render "errors/not_acceptable", layout: "error" } allow_browser versions: :modern
end end
app/controllers/errors_controller.rb
-25
View File
@@ -1,25 +0,0 @@
class ErrorsController < ApplicationController
require_untenanted_access
layout "error"
def bad_request
render status: :bad_request
end
def not_found
render status: :not_found
end
def not_acceptable
render status: :not_acceptable
end
def unprocessable_entity
render status: :unprocessable_entity
end
def internal_server_error
render status: :internal_server_error
end
end
app/views/errors/bad_request.html.erb
-9
View File
@@ -1,9 +0,0 @@
<% @page_title = "400 Bad Request" %>
<hgroup class="error-page__stamp">
<h1>400</h1>
<h2>Bad request</h2>
<hr />
<div>Your request could not be understood by the server.</div>
</hgroup>
app/views/errors/internal_server_error.html.erb
-9
View File
@@ -1,9 +0,0 @@
<% @page_title = "500 Internal Server Error" %>
<hgroup class="error-page__stamp">
<h1>500</h1>
<h2>Internal server error</h2>
<hr />
<div>Something went wrong on our end; please try again later.</div>
</hgroup>
app/views/errors/not_acceptable.html.erb
-9
View File
@@ -1,9 +0,0 @@
<% @page_title = "406 Not Acceptable" %>
<hgroup class="error-page__stamp">
<h1>406</h1>
<h2>Not acceptable</h2>
<hr />
<div>The requested resource is not available in a format acceptable to your browser.</div>
</hgroup>
app/views/errors/not_found.html.erb
-9
View File
@@ -1,9 +0,0 @@
<% @page_title = "404 Not Found" %>
<hgroup class="error-page__stamp">
<h1>404</h1>
<h2>Sorry, that page doesn’t exist!</h2>
<hr />
<div>You may have mistyped the address or the page may have moved.</div>
</hgroup>
app/views/errors/unprocessable_entity.html.erb
-9
View File
@@ -1,9 +0,0 @@
<% @page_title = "422 Unprocessable Entity" %>
<hgroup class="error-page__stamp">
<h1>422</h1>
<h2>Unprocessable entity</h2>
<hr />
<div>The server understands the request but was unable to process it.</div>
</hgroup>
app/views/layouts/error.html.erb
-143
View File
@@ -1,143 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<%= page_title_tag %>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<style>
:root {
--color-canvas: white;
--color-ink: oklch(26% 0.05 264);
--color-accent: oklch(57.02% 0.1895 260.46);
--text-large: 6rem;
--text-medium: 2rem;
--text-normal: 1rem;
@media (prefers-color-scheme: dark) {
--color-canvas: oklch(20% 0.0195 232.58);
--color-ink: oklch(96.02% 0.0034 260);
--color-accent: oklch(74% 0.1293 256);
}
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
html {
font-size: 1.5rem;
overflow: hidden;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
align-items: center;
background-color: var(--color-canvas);
color: var(--color-ink);
display: flex;
flex-direction: column;
font-family: system-ui;
font-size: var(--text-normal);
font-style: normal;
font-weight: 500;
gap: 2rem;
line-height: 1.375;
min-height: 100vh;
overflow: hidden;
padding-inline: 1rem;
justify-content: center;
text-align: center;
text-rendering: optimizeLegibility;
text-size-adjust: none;
/* Cool wavy striped lines */
&:before {
--mask:
radial-gradient(6px at 50% calc(100% + 3px), #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px ,
radial-gradient(6px at 50% -3px, #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) 50% calc(50% + 3px)/16px 6px ;
-webkit-mask: var(--mask);
mask: var(--mask);
background: var(--color-accent);
content: "";
inset: 0;
opacity: 0.15;
position: absolute;
z-index: -1;
}
}
.error-page__stamp {
--padding: 1rem 2rem;
--stroke-width: 0.25rem;
align-items: center;
background-color: color-mix(in oklch, var(--color-canvas), transparent 50%);
background-color: var(--color-canvas);
border-radius: calc(var(--stroke-width) * 2);
border: calc(var(--stroke-width) * 1) dashed var(--color-accent);
color: var(--color-accent);
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.25;
max-inline-size: 36ch;
rotate: -5deg;
padding: var(--padding);
position: relative;
}
h1 {
font-size: var(--text-large);
font-weight: 900;
line-height: 1;
position: relative;
text-transform: uppercase;
@supports (-webkit-text-stroke: 1px black) {
-webkit-text-stroke: var(--stroke-width) var(--color-accent);
-webkit-text-fill-color: transparent;
}
}
h2 {
font-size: var(--text-normal);
font-weight: inherit;
}
hr {
inline-size: 100%;
border: 0;
border-block-start: calc(var(--stroke-width) / 2) solid currentcolor;
color: currentcolor;
margin: 1ch auto;
}
a {
color: inherit;
line-height: 2rem;
display: inline-block;
padding-inline: 1ch;
border-radius: 99rem;
text-decoration: none;
span {
text-decoration: underline;
text-underline-offset: 0.25ch;
}
&:hover {
color: var(--color-accent);
}
}
</style>
</head>
<body>
<%= yield %>
<%= link_to "&larr; Back home".html_safe, root_url %>
</body>
</html>
config/routes.rb
-6
View File
@@ -210,12 +210,6 @@ Rails.application.routes.draw do
get "manifest" => "rails/pwa#manifest", as: :pwa_manifest get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
get "service-worker" => "pwa#service_worker" get "service-worker" => "pwa#service_worker"
match "/400", to: "errors#bad_request", via: :all
match "/404", to: "errors#not_found", via: :all
match "/406", to: "errors#not_acceptable", via: :all
match "/422", to: "errors#unprocessable_entity", via: :all
match "/500", to: "errors#internal_server_error", via: :all
root "events#index" root "events#index"
unless Rails.application.config.x.oss_config unless Rails.application.config.x.oss_config
public/400.html
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<title>400 Bad Request</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="/error.css">
</head>
<body>
<hgroup class="error-page__stamp">
<h1>400</h1>
<h2>Bad request</h2>
<hr />
<div>Your request could not be understood by the server.</div>
</hgroup>
<a href="/">&larr; Back home</a>
</body>
</html>
public/404.html
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<title>404 Not Found</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="/error.css">
</head>
<body>
<hgroup class="error-page__stamp">
<h1>404</h1>
<h2>Sorry, that page doesn’t exist!</h2>
<hr />
<div>You may have mistyped the address or the page may have moved.</div>
</hgroup>
<a href="/">&larr; Back home</a>
</body>
</html>
public/406.html
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<title>406 Not Acceptable</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="/error.css">
</head>
<body>
<hgroup class="error-page__stamp">
<h1>406</h1>
<h2>Not acceptable</h2>
<hr />
<div>The requested resource is not available in a format acceptable to your browser.</div>
</hgroup>
<a href="/">&larr; Back home</a>
</body>
</html>
public/422.html
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<title>422 Unprocessable Entity</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="/error.css">
</head>
<body>
<hgroup class="error-page__stamp">
<h1>422</h1>
<h2>Unprocessable entity</h2>
<hr />
<div>The server understands the request but was unable to process it.</div>
</hgroup>
<a href="/">&larr; Back home</a>
</body>
</html>
public/500.html
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<title>500 Internal Server Error</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="/error.css">
</head>
<body>
<hgroup class="error-page__stamp">
<h1>500</h1>
<h2>Internal server error</h2>
<hr />
<div>Something went wrong on our end; please try again later.</div>
</hgroup>
<a href="/">&larr; Back home</a>
</body>
</html>
public/error.css
+128
View File
@@ -0,0 +1,128 @@
:root {
--color-canvas: white;
--color-ink: oklch(26% 0.05 264);
--color-accent: oklch(57.02% 0.1895 260.46);
--text-large: 6rem;
--text-medium: 2rem;
--text-normal: 1rem;
@media (prefers-color-scheme: dark) {
--color-canvas: oklch(20% 0.0195 232.58);
--color-ink: oklch(96.02% 0.0034 260);
--color-accent: oklch(74% 0.1293 256);
}
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
html {
font-size: 1.5rem;
overflow: hidden;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
align-items: center;
background-color: var(--color-canvas);
color: var(--color-ink);
display: flex;
flex-direction: column;
font-family: system-ui;
font-size: var(--text-normal);
font-style: normal;
font-weight: 500;
gap: 2rem;
line-height: 1.375;
min-height: 100vh;
overflow: hidden;
padding-inline: 1rem;
justify-content: center;
text-align: center;
text-rendering: optimizeLegibility;
text-size-adjust: none;
/* Cool wavy striped lines */
&:before {
--mask:
radial-gradient(6px at 50% calc(100% + 3px), #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px ,
radial-gradient(6px at 50% -3px, #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) 50% calc(50% + 3px)/16px 6px ;
-webkit-mask: var(--mask);
mask: var(--mask);
background: var(--color-accent);
content: "";
inset: 0;
opacity: 0.15;
position: absolute;
z-index: -1;
}
}
.error-page__stamp {
--padding: 1rem 2rem;
--stroke-width: 0.25rem;
align-items: center;
background-color: color-mix(in oklch, var(--color-canvas), transparent 50%);
background-color: var(--color-canvas);
border-radius: calc(var(--stroke-width) * 2);
border: calc(var(--stroke-width) * 1) dashed var(--color-accent);
color: var(--color-accent);
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.25;
max-inline-size: 36ch;
rotate: -5deg;
padding: var(--padding);
position: relative;
}
h1 {
font-size: var(--text-large);
font-weight: 900;
line-height: 1;
position: relative;
text-transform: uppercase;
@supports (-webkit-text-stroke: 1px black) {
-webkit-text-stroke: var(--stroke-width) var(--color-accent);
-webkit-text-fill-color: transparent;
}
}
h2 {
font-size: var(--text-normal);
font-weight: inherit;
}
hr {
inline-size: 100%;
border: 0;
border-block-start: calc(var(--stroke-width) / 2) solid currentcolor;
color: currentcolor;
margin: 1ch auto;
}
a {
color: inherit;
line-height: 2rem;
display: inline-block;
padding-inline: 1ch;
border-radius: 99rem;
text-decoration: none;
span {
text-decoration: underline;
text-underline-offset: 0.25ch;
}
&:hover {
color: var(--color-accent);
}
}