<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>500 — Internal Server Error</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<script>
window.tailwind = window.tailwind || {};
window.tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: [
"Inter",
"ui-sans-serif",
"system-ui",
"-apple-system",
"Segoe UI",
"Roboto",
"sans-serif",
],
mono: [
"JetBrains Mono",
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Consolas",
"monospace",
],
},
},
},
};
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style>
body {
font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, sans-serif;
}
.mono {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular,
Menlo, Consolas, monospace;
}
</style>
</head>
<body class="min-h-screen bg-slate-950 text-slate-300 antialiased">
<header
class="absolute top-0 inset-x-0 px-6 py-5 flex items-center justify-between"
>
<a
href="/"
class="mono text-xs tracking-widest text-slate-500 hover:text-slate-300 transition-colors"
>
umbral
</a>
<span
class="mono text-[10px] tracking-widest text-slate-600 uppercase"
>
error // internal
</span>
</header>
<div
class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_40%,#000_30%,transparent_100%)] opacity-40"
></div>
<div
class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_30%,rgba(99,102,241,0.08),transparent_60%)]"
></div>
<main
class="relative min-h-screen flex items-center justify-center px-6 py-24"
>
<div class="w-full max-w-2xl mx-auto text-center">
<p
class="mono text-xs tracking-[0.25em] text-slate-500 uppercase"
>
Error // Internal
</p>
<h1
class="mono mt-6 text-7xl sm:text-8xl md:text-9xl font-bold tracking-tighter text-slate-200 leading-none"
>
500
</h1>
<h2
class="mt-8 text-2xl sm:text-3xl font-semibold text-slate-100 tracking-tight"
>
Internal server error
</h2>
<p
class="mt-4 text-base text-slate-400 max-w-md mx-auto leading-relaxed"
>
Something went wrong on our end. The error has been logged
and we'll look into it.
</p>
{% if request_path %}
<div class="mt-8 mx-auto max-w-xl">
<div
class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2.5 backdrop-blur-sm"
>
<span
class="mono text-[10px] tracking-widest text-slate-600 uppercase shrink-0"
>REQ</span
>
<code
class="mono text-sm text-slate-300 truncate flex-1 text-left"
title="{{ request_path }}"
>{{ request_path }}</code
>
<button
type="button"
onclick="navigator.clipboard?.writeText('{{ request_path }}'); this.textContent='Copied'; setTimeout(()=>this.textContent='Copy',1200);"
class="mono text-[10px] tracking-widest uppercase text-slate-500 hover:text-slate-200 transition-colors shrink-0 px-2 py-1 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
>
Copy
</button>
</div>
</div>
{% endif %}
<div
class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3"
>
<a
href="/"
class="inline-flex items-center justify-center gap-2 rounded-md bg-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 w-full sm:w-auto"
>
<span aria-hidden="true">←</span>
<span>Go home</span>
</a>
<button
type="button"
onclick="
if (history.length > 1) {
history.back();
} else {
window.location.href = '/';
}
"
class="inline-flex items-center justify-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-5 py-2.5 text-sm font-semibold text-slate-200 hover:bg-slate-900 hover:border-slate-700 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 w-full sm:w-auto"
>
Go back
</button>
</div>
{% if dev_mode %}
<div
class="mt-16 text-left rounded-lg border border-rose-900/50 bg-rose-950/20 overflow-hidden"
>
<div
class="flex items-center justify-between gap-3 px-4 py-2.5 border-b border-rose-900/50 bg-rose-950/40"
>
<div class="flex items-center gap-2">
<span
class="inline-block h-2 w-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]"
aria-hidden="true"
></span>
<span
class="mono text-[10px] tracking-widest uppercase text-rose-300 font-semibold"
>
Developer detail
</span>
</div>
<span
class="mono text-[10px] tracking-widest uppercase text-rose-400/70"
>
Hidden in production
</span>
</div>
<div class="px-4 py-4 space-y-4">
{% if request_path %}
<section>
<p
class="mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold mb-1.5"
>
Request path
</p>
<code
class="block mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-2 break-all"
>
{{ request_path }}
</code>
</section>
{% endif %} {% if error_display %}
<section>
<div
class="flex items-center justify-between mb-1.5"
>
<p
class="mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold"
>
Error
</p>
<button
type="button"
onclick="
navigator.clipboard?.writeText(
this.dataset.copy,
);
this.textContent = 'Copied';
setTimeout(
() => (this.textContent = 'Copy'),
1200,
);
"
data-copy="{{ error_display }}"
class="mono text-[10px] tracking-widest uppercase text-rose-400/70 hover:text-rose-200 transition-colors px-2 py-0.5 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-400"
>
Copy
</button>
</div>
<pre
class="mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-2 whitespace-pre-wrap break-all overflow-x-auto"
><code>{{ error_display }}</code></pre>
</section>
{% endif %} {% if error_chain | length > 1 %}
<section>
<p
class="mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold mb-1.5"
>
Cause chain ({{ error_chain | length }})
</p>
<ol class="space-y-1.5">
{% for cause in error_chain %}
<li class="flex gap-3 items-start">
<span
class="mono text-[10px] tracking-widest text-rose-500/70 mt-1.5 shrink-0 w-6 text-right"
>
[{{ loop.index }}]
</span>
<code
class="flex-1 mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-1.5 break-all"
>
{{ cause }}
</code>
</li>
{% endfor %}
</ol>
</section>
{% endif %}
</div>
</div>
{% endif %}
</div>
</main>
<footer
class="absolute bottom-0 inset-x-0 px-6 py-5 flex items-center justify-center gap-6"
>
<a
href="/docs"
class="text-xs text-slate-500 hover:text-slate-300 transition-colors"
>Docs</a
>
<span class="text-slate-800" aria-hidden="true">·</span>
<a
href="/status"
class="text-xs text-slate-500 hover:text-slate-300 transition-colors"
>Status</a
>
<span class="text-slate-800" aria-hidden="true">·</span>
<a
href="https://github.com/umbral/umbral"
class="text-xs text-slate-500 hover:text-slate-300 transition-colors"
>GitHub</a
>
</footer>
</body>
</html>