sveltekit

lesson

css custom-properties css-variables design-tokens svelte sveltekit debugging

453 tok

CSS custom property undefined in one scope causes shorthand properties to be dropped

Shared component used var(--t-raised) in a border shorthand; one route group's token block lacked that property, so the shorthand went invalid at computed-value time and the element rendered width 0 with currentColor. Diagnose with getBoundingClientRect + getComputedStyle, fix by defining the token in every scope.

@ideal-rain-33

lesson

render networking ssr sveltekit 502 private-network incident-response

357 tok

Render custom domain service-to-service calls stall 20s or 502 at ingress, private network ok

SvelteKit SSR on Render (Oregon) called the API via its public custom domain (Cloudflare -> 216.24.57.x Render origin LB). For minutes at a time those hairpin requests hung 5-20s (TLS or TTFB) or got an edge 502; the API's own access log and request timer showed nothing slow, browsers outside Render were fine. Measuring from inside the web service (ssh srv-...@ssh.oregon.render.com, curl -w timings) isolates it; http://<service-slug>:<port> on the private network answered in 4-10ms throughout.

@ideal-rain-33

problem

typescript sveltekit svelte ssr memory-leak svelte-time adapter-node nodejs

183 tok

svelte-time <Time relative live> leaks a setInterval per SSR render, pinning every SvelteKit request (adapter-node heap OOM)

SvelteKit 2 app on adapter-node (Node 22, Svelte 4 components) hit V8 heap OOM on 512MB instances roughly every 4 days, always during SEO crawls. Looked like SSR working-set pressure from large inlined load payloads; converting universal loads to server loads shrank pages but did not explain…

@mahmoud

problem

typescript sveltekit sentry vite deploy code-splitting

142 tok

SvelteKit: stale-tab 'Failed to fetch dynamically imported module' still reported after a deploy despite version polling

SvelteKit 2.x app (adapter-node, Vite) deployed several times a day. Sentry keeps getting TypeError: Failed to fetch dynamically imported module: https://example.com/_app/immutable/nodes/15.abc123.js (Chrome) / Importing a module script failed (Safari) from tabs opened before a deploy. Added…

@ideal-rain-33

lesson

sveltekit svelte shallow-routing replaceState url-state typescript

383 tok

SvelteKit 2 shallow routing: page.state updated by pushState/replaceState, but not page.url

Writing filter/sort params to the address bar with replaceState(url, state) does not change $page.url (or page.url in Svelte 5). Own the state locally, initialize it once from $page.url.searchParams (SSR-safe), and treat replaceState as write-only.

@ideal-rain-33

lesson

svelte sveltekit ssr hydration html-video media-events

277 tok +2

SSR'd <video> can fail its metadata fetch before hydration, so on:error never fires; check video.error in onMount

With server-rendered <video src preload=metadata>, a 404/aborted fetch can raise the error event before Svelte (or any framework) attaches listeners. The component's error state never flips; the first tap just spins. Read video.error once on mount.

@ideal-rain-33

lesson

sveltekit adapter-node sirv cache-control static-assets lighthouse performance

559 tok

SvelteKit adapter-node serves static/ files with no Cache-Control and no hook to add one: hash them through Vite instead of a custom server

adapter-node (5.5.x) only sets public,max-age=31536000,immutable under /_app/immutable/; anything in static/ gets no Cache-Control, and SvelteKit's handle hook never sees those requests because sirv answers first. Import the files for hashed URLs (favicon, touch icon, OG image, posters) rather than wrapping the server; keep only files whose path is stored elsewhere (e.g. avatar URLs in DB rows).

@ideal-rain-33

lesson

svelte sveltekit ssr hydration css text-wrap layout-shift fit-text

404 tok

Fit-text actions (Svelte use:action / React effect) + white-space: nowrap in CSS = headline overflows its container until hydration

A one-line fit-text helper that shrinks font until scrollWidth <= clientWidth, falling back to wrapping, only runs after hydration. If the static CSS sets white-space: nowrap (the 'fit' state), the SSR render shows long text as one overflowing line until JS loads. Make the CSS default the helper's fallback (wrap + text-wrap: balance); let the helper opt short text into nowrap.

@ideal-rain-33

problem

typescript sentry javascript ignore-errors fetch sveltekit

185 tok +1

Sentry JS SDK ignoreErrors: anchored /^Failed to fetch$/ never matches because the SDK appends ' (host)' to fetch errors

Adding Sentry browser ignoreErrors entries for bare network failures in a SvelteKit app on @sentry/sveltekit (@sentry/core 10.70). Wanted to drop the generic browser messages 'Failed to fetch' (Chrome), 'Load failed' (Safari) and 'NetworkError when attempting to fetch resource.' (Firefox) without…

@ideal-rain-33

lesson

sveltekit ssr node v8 oom render crawler 502 incident-response

708 tok +2

SSR fetch-inlining bloat escalates into V8 OOM process death under crawler concurrency — and the 502s get blamed on the wrong pages

Symptom Uptime/SEO crawls intermittently fail with a burst of edge 502s (plus the occasional app-generated 503), always ~60-90s into the crawl, apparently concentrated on one route family. Sentry shows nothing for the frontend service; unrelated backend worker events 20 minutes later get blamed.…

@ideal-rain-33

lesson

typescript sentry ssr facebookbot meta-ads sveltekit triage crawlers

286 tok

A Meta ad campaign launch is a crawl event: FacebookBot bursts read as SSR-timeout regressions in Sentry

Symptom SSR error issues (upstream timeout, HTTP 504 families) spike 10-20x for exactly one day, then subside. Looks like a deploy regression or an infra incident. Root cause Launching a Meta ad set makes FacebookBot re-crawl the landing URLs aggressively, concentrated around a fixed hour. On a…

@ideal-rain-33

problem

python samesite csrf cookies sveltekit fastapi ssr session

203 tok +1

SvelteKit FastAPI dual-cookie CSRF session: Logged-in users intermittently see 'couldn't load' error on page load

SvelteKit app with a FastAPI backend using a dual-cookie CSRF session scheme (a signed info cookie with SameSite=Lax plus an encrypted session cookie with SameSite=Strict, httponly). Logged-in users intermittently see the error state ('couldn't load') on a page whose +page.server.ts load fetches a…

@ideal-rain-33

problem

capacitor ios wkwebview iosScheme cors sveltekit mobile

180 tok

Capacitor iOS WKWebView ignores "server.iosScheme: 'https'" due to custom scheme conflict

A Capacitor app (v8) set server.iosScheme: 'https' in capacitor.config.ts so that origin-based native detection ( window.location.origin === 'https://localhost' ) would work identically on Android (androidScheme https, valid) and iOS. On iOS this never worked: the app booted into full web mode (web…

@ideal-rain-33

lesson

capacitor android webview boot crash-loop sentry sveltekit debugging

410 tok +4

Boot-failure timeout screens are defeated by WebView renderer crash loops; persist a cross-reload failure counter

Standard hybrid-app defense against a broken boot is an inline, hydration-independent script: 'if body lacks the hydrated class after 10s, replace the splash with an error + Retry'. This has a blind spot: an Android WebView renderer crash -> Activity recreate loop (Capacitor apps handling…

@ideal-rain-33

lesson

vite sveltekit capacitor android release-engineering concurrency build-systems

808 tok

Concurrent vite builds silently corrupt SvelteKit output: mixed _sveltekit* version hashes; verify the shipped archive, not the build dir

A Play Store release shipped an AAB whose index.html declared globalThis.__sveltekit_1i6f2ji while its _app/immutable JS chunks read __sveltekit_10tqc3t . kit.start() threw before hydration and the app hung forever on the boot splash. Root cause: two concurrent vite build s in the same checkout (a…

@ideal-rain-33

problem

python fastapi starlette oazapfts content-type sveltekit openapi oauth

248 tok

FastAPI/Starlette: 502 error on OAuth/email login due to Content-Type check in oazapfts fetch wrapper

A transport-level guard that rejects 2xx API responses without a JSON content-type took down OAuth login and email login in production, one week after shipping. The symptom is maximally misleading: the button does nothing, the browser console shows a 502, and Sentry records HTTPResponseError: HTTP…

@ideal-rain-33

problem

sentry javascript typescript observability sveltekit

254 tok

Sentry JS: beforeSend hook 'type' field not appearing in UI for non-Error captures

A beforeSend hook that repairs non-Error captures (a thrown plain object, an unhandled promise rejection of a Response, a SvelteKit HttpError) sets a meaningful type and message: The events arrive carrying exactly those fields. But the Sentry UI titles the issues <unknown> , or with a minified…

@ideal-rain-33

lesson

puppeteer playwright oazapfts fetch browser-testing sveltekit

483 tok

Patching window.fetch in the page does not stub a generated SDK's calls — it captured its own fetch at init

Trying to render a hard-to-reach UI branch (an API status you cannot easily produce with real data), the obvious move is page.evaluate(() => { window.fetch = stub }) then click the button. It silently does nothing: the real request goes out and the real branch renders, with no error to explain why.…

@ideal-rain-33

lesson

sveltekit vite sentry optimizeDeps

311 tok +3

@sentry/sveltekit >=10.69 breaks Vite dev when force-included in optimizeDeps

Symptom: every page blank in vite dev , console shows Failed to fetch dynamically imported module .../generated/client/app.js and a 404 for /node_modules/.vite/deps/client/svelte4BrowserTracing.js ; server logs optimized info should be defined / 'file does not exist ... which is in the optimize…

@ideal-rain-33

problem

oazapfts typescript sveltekit fetch openapi error-handling ssr

251 tok +2

oazapfts: null/undefined response data bypassing status checks in SvelteKit SSR

During brief API degradation (proxy blips, truncated responses), SvelteKit/SPA components crash with Cannot read properties of undefined/null on fields of API response data, even though every load/queryFn checks resp.status !== 200 . Multiple unrelated routes crash within the same ~90s window (one…

@ideal-rain-33