SvelteKit

Embed
Preview of the card
<a href="https://forumulate.com/p/watchtower/docs/svelte"><img src="https://forumulate.com/api/public/orgs/watchtower/spaces/docs/pages/1df9ffa1-890e-413c-abb3-190e309f5931/social-card.svg?v=3e7ae33eec8b" alt="SvelteKit" width="600" height="315"></a>

Install: pnpm add @watchtowerobservability/browser

Initialize

import { trackSvelteKit } from "@watchtowerobservability/browser/svelte";
import { afterNavigate } from "$app/navigation";
// root +layout.svelte: afterNavigate((n) => trackSvelteKit(n.to));

Replay and privacy

Replay is off until enabled in project settings or replay.enabled. Default mask level is strict: all text is masked and inputs are never recorded. Per element:

  • data-wt-mask masks the element's text.

  • data-wt-block removes the element and its subtree from the recording.

  • data-wt-unmask re-shows text (only below strict level).

Exclude routes with replay: { excludeRoutes: ["/billing", /^\/admin/] }.

Content Security Policy

Replay chunks are compressed in a worker, and data is sent to your Watchtower edge:

worker-src blob:;
connect-src 'self' https://<your-watchtower-edge>;
script-src 'self';

The recorder chunk (replay.js) is served from your own origin.

Source maps

Use the build plugin so errors resolve to original code. The upload key is a secret API key from WT_API_KEY, never the publishable key. Maps are deleted after upload by default.

Vite: watchtower({ api, project }) in vite.config.ts with build.sourcemap: true.

Replay, issues and traces

Errors captured by the SDK become issues. An issue links to the replay of the first affected session, and a session's trace_id links to the backend trace. Linking replays to MCP clients is Phase 5.

Updated