Dashboard

Svelte SDK

@sentriq/svelte wraps @sentriq/browser with Svelte 5 runes-based reactive state and Svelte's own context API — it never reimplements signal collection or transport. Targets Svelte 5.x only; earlier versions are not supported (no real reason to support Svelte 3/4 given Svelte 5 is the current, actively-maintained major).

Install

npm install @sentriq/svelte

Setup

<script>
  import { createSentriq } from '@sentriq/svelte';

  createSentriq({ publicKey: 'pub_test_xxx' });
</script>

Call createSentriq() exactly once, at the top level of your root component's <script> — Svelte's own setContext() restriction requires this to happen during component initialization, the same convention as @sentriq/vue's app.use(createSentriq(options)) and @sentriq/react's <SentriqProvider>. It never touches window/document/navigator in a non-browser context — see Server-side rendering below. Does not call track()/identify() automatically; initialization and event execution are kept as two separate, explicit steps.

getSentriq()

<script>
  import { getSentriq } from '@sentriq/svelte';

  const sentriq = getSentriq();

  async function handleLogin(userId) {
    if (!sentriq.ready) return; // or queue the call — your choice
    const result = await sentriq.track('login', { account: { id: userId } });
    // result.risk.decision
  }
</script>

<p>status: {sentriq.status}</p>
{#if sentriq.ready}
  <button onclick={() => handleLogin('user_123')}>Log in</button>
{/if}

sentriq.status is a reactive property (a Svelte 5 rune under the hood — $state/$derived on a plain class), one of 'idle' | 'initializing' | 'ready' | 'error'; sentriq.ready is a derived boolean convenience for status === 'ready' — the same convenience @sentriq/vue and @sentriq/angular expose, on top of the exact same state @sentriq/react exposes. Calling getSentriq() without a parent createSentriq() call throws a clear error immediately, rather than a confusing undefined.

Account identity
track(event, { account: { id } }) takes your own opaque reference for the end user — never an email or other sensitive value. There is no separate Svelte-specific identity concept; this is the exact same AccountReference contract @sentriq/browser defines.

Server-side rendering

Safe to call createSentriq() from a server-rendered component (via Svelte's own svelte/server rendering, or from within SvelteKit) — it never touches window/document/navigator during that render, and getSentriq() resolves to a real (if inert, status: 'idle') state rather than throwing, so every component that calls it renders correctly on both the server and the client.

Errors

Same typed errors as @sentriq/browser — re-exported unchanged from @sentriq/svelte.

Consent and pageview tracking

Neither is implemented — @sentriq/browser has no consent-gating mechanism or automatic pageview tracking today, so none was invented for Svelte either.

Version compatibility

Svelte ^5.0.0 (peer range); Svelte 5.57.x tested this phase. Built with @sveltejs/package, the canonical Svelte library toolchain.