Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tracelit.io/llms.txt

Use this file to discover all available pages before exploring further.

Next.js 
npm install @tracelit/tracker
Add init() inside useEffect in _app.tsx so it only runs in the browser: 
// pages/_app.tsx
import { useEffect } from 'react'
import { init } from '@tracelit/tracker'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    init({ token: 'YOUR_TOKEN_HERE' })
  }, [])
  return <Component {...pageProps} />
}
Tracelit automatically tracks client-side navigation between pages via history.pushState — no extra setup needed.

​
Adding user identity

// pages/_app.tsx
import { useEffect } from 'react'
import { init, identify, reset } from '@tracelit/tracker'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  const { user } = pageProps  // or from your auth hook

  useEffect(() => {
    init({ token: 'YOUR_TOKEN_HERE' })
  }, [])

  useEffect(() => {
    if (user) identify(user.id, { email: user.email, plan: user.plan })
    else reset()
  }, [user])

  return <Component {...pageProps} />
}

​
Install with AI (Bolt, Lovable, Replit)

Bolt logo

Lovable logo

Replit logo
Install Tracelit in my Next.js Pages Router project.
Initialize @tracelit/tracker in pages/_app.tsx with:
init({ token: 'YOUR_TOKEN_HERE' })
Only make minimal edits, show changed files, then add a short verification checklist.

​
What’s next?

Identify users

Full guide to linking sessions to real users.

Feature tagging

Tag routes and flows in session replays.