Svelte / SvelteKit - Tracelit

Svelte

npm install @tracelit/tracker

Call init() inside onMount in your root layout so it only runs in the browser:

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte'
  import { init } from '@tracelit/tracker'

  onMount(() => init({ token: 'YOUR_TOKEN_HERE', environment: 'production' }))
</script>

<slot />

Always set environment. Only "production" and "development" are accepted. If omitted, events default to development.

onMount only runs on the client, so init() is never called during SSR. No extra guard needed.

Adding user identity

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte'
  import { init, identify, reset } from '@tracelit/tracker'
  export let data  // from +layout.server.ts

  onMount(() => {
    init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
    if (data.user) {
      identify(data.user.id, { email: data.user.email, plan: data.user.plan })
    }
  })

  // React to auth changes
  $: if (data.user) identify(data.user.id, { email: data.user.email })
  $: if (!data.user) reset()
</script>

<slot />

LLM Prompt

Paste this into your coding assistant to install Tracelit for you:

Install Tracelit in my SvelteKit project.
Initialize @tracelit/tracker in src/routes/+layout.svelte inside onMount:
init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
Make minimal edits, show changed files, and include a 30-second verification checklist.

What’s next?

Topic	Description	Guide
Identify users	Full guide to linking sessions to real users.	Read
Feature tagging	Tag flows in session replays.	Read