Request ID
Every HTTP request carries a stable correlation id. Read it from any server-side code with getRequestContext().requestId — it's a Bun.randomUUIDv7() by default (time-ordered), can be seeded from an upstream proxy.requestIdHeader, and the same id rides every lifecycle event (request, error, action:*) so observability tooling can stitch a request together.
- This page render
01a0980a-2f3b-75fa-9a17-0be17244c782
Reload the page to get a fresh id — each request re-runs the resolver.
<script lang="ts">
import Fetcher from './Fetcher.svelte';
let { requestId }: { requestId: string } = $props();
</script>
<div class="card">
<dl>
<dt>This page render</dt>
<dd><code>{requestId}</code></dd>
</dl>
<p class="hint">Reload the page to get a fresh id — each request re-runs the resolver.</p>
<Fetcher mochi:hydrate />
</div>
Styles
<style>
.card {
background: var(--surface);
color: var(--text);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: 1.5rem;
max-width: 560px;
margin: 0 auto;
}
dl {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 1.25rem;
row-gap: 0.75rem;
margin: 0 0 1rem 0;
}
dt {
font-weight: 600;
color: var(--text-muted);
}
dd {
margin: 0;
word-break: break-all;
color: var(--text);
}
code {
font-family: var(--font-mono);
background: var(--code-bg);
color: var(--code-accent);
padding: 0.2rem 0.45rem;
border-radius: var(--radius-sm);
font-size: 0.9em;
}
.hint {
color: var(--text-subtle);
font-size: 0.9rem;
margin: 0 0 1.25rem 0;
}
</style>
More demos
File Uploads via form actions How file uploads through form actions work — multipart/form-data validated with fail() and success(), shown enhanced and plain. Image: Component How the <Image> component works — named sizes, ThumbHash blur-up placeholders, and encrypted deferred URLs whose transforms run lazily on the endpoint. MdSvex How mdsvex works — a .md file compiled through mdsvex and rendered as a Svelte component, embedded <script> and all.