Bug tracking for SvelteKit — session replay, console + HAR (2026)
3 min read · JavaScript
What SvelteKit teams ship with BugMojo
Svelte 5 replaced the magic of "assign to a variable, the UI updates" with **runes** — `$state`, `$derived`, `$effect`. The new system is more explicit and faster, but it changes how every Svelte bug manifests. SvelteKit 2 layered on top brings server load functions, form actions, and edge-deployed adapters — each with its own failure modes.
A SvelteKit bug report needs the route ID (because the same URL can hit different `+page.server.ts` files depending on layout), the form action result, and the rune state at the failure moment. BugMojo captures the DOM + console + network HAR end-to-end so the engineer can see exactly where the load function returned vs where the page rendered.
This guide covers Svelte 5 runes gotchas, SvelteKit 2 load-function bugs, and how to wire BugMojo into a Svelte team's workflow.
SvelteKit gotchas
Framework-specific failure modes our team has shipped through. Each one is hard to spot in a screenshot — easy to spot in a session replay.
Mixing legacy reactive syntax with runes
High impactSvelte 5 supports both `$:` reactive declarations (legacy) and `$derived` (runes) in the same file. They interact in confusing ways. Pick one mode per component.
$effect runs on the client only
Medium impactUnlike `onMount` in Svelte 4 or `useEffect` in React, `$effect` does NOT run during SSR. Anything that needs to fire on both server and client renders should live in the load function, not in `$effect`.
Form actions return data that overrides page state
Medium impactA `+page.server.ts` action returns a value that becomes `form` in the page. If the action returns an object with a key that collides with page data, you get surprising re-renders.
Edge adapters limit fs/cookie/crypto APIs
High impactCloudflare and Vercel Edge adapters don't support Node's `fs`, full `crypto` module, or large request bodies. Bug class: works locally (Node), 500s in production.
Common SvelteKit bugs
Real bug patterns from SvelteKit apps, with the symptom you’ll see in a bug report and the fix that actually works.
$state on an object does not deep-track new properties
- Symptom
- Adding a new key to a `$state` object does not trigger updates.
- Fix
- `$state` proxies via `new Proxy`. Properties that exist at declaration are tracked; properties added later need to be declared up front (set to undefined initially) OR use `$state.raw` and replace the whole object.
let user = $state<{ name: string; email?: string }>({ name: '' });
// later
user.email = 'foo@bar.com'; // ✅ works because email was in the typegoto() before mount throws
- Symptom
- Navigation from `$effect` or `onMount` fails silently.
- Fix
- SvelteKit's `goto()` requires the navigation system to be initialized. Wrap in `tick()` or use `redirect()` from a load function instead.
Streamed promises in load() never resolve on the client
- Symptom
- A skeleton loader spins forever for a server-streamed promise.
- Fix
- Streamed promises require the response to remain open. A reverse proxy or compression middleware can buffer the response and break streaming. Test against a direct origin URL, then add infrastructure back layer by layer.
Setup
# Install BugMojo from the Chrome Web Store
# Works with SvelteKit dev (vite), preview, and any adapter (Node, Vercel, Cloudflare)BugMojo vs alternatives
The honest comparison — where BugMojo wins, and where another tool might serve you better.
| Capability | BugMojo | Browser DevTools alone |
|---|---|---|
| Replay the bug for a teammate | ✅ | ❌ |
| Capture SvelteKit form action payload | ✅ network HAR | ⚠️ live only |
| Capture rune state at failure | ✅ (via DOM) | ⚠️ snapshot only |
| One-click ticket to Jira/Linear | ✅ | ❌ |
Frequently asked questions
Sources
- Svelte 5 runes overview — svelte.dev (2025)