Feature tagging

Feature tagging lets you annotate session replays with named markers. When a user hits your checkout flow, onboarding wizard, or any other important flow, you call startReplay('checkout') — and in the dashboard you’ll see every session tagged with checkout, with a clickable timestamp that jumps the player to that exact moment.

Tracelit dashboard showing sessions tagged with 'checkout' and 'onboarding' feature labels

Basic usage

import { startReplay, stopReplay } from '@tracelit/tracker'

// Mark the start of a feature
startReplay('checkout')

// Mark the end
stopReplay('checkout')

You can use any string as a feature name — keep them short and descriptive:

startReplay('onboarding')
startReplay('payment-flow')
startReplay('settings-update')
startReplay('trial-upgrade')

React example — tag a component lifecycle

The most natural place to call these in React is inside a useEffect in the component that represents the flow:

import { useEffect } from 'react'
import { startReplay, stopReplay } from '@tracelit/tracker'

function CheckoutFlow() {
  useEffect(() => {
    startReplay('checkout')
    return () => stopReplay('checkout')  // called when user leaves
  }, [])

  return <CheckoutSteps />
}

When the user mounts CheckoutFlow, a checkout tag appears in the session. When they leave (or the component unmounts), the tag closes. In the dashboard you’ll see the exact duration they spent in checkout.

Next.js example — tag a page or route group

// app/checkout/layout.tsx
'use client'
import { useEffect } from 'react'
import { startReplay, stopReplay } from '@tracelit/tracker'

export default function CheckoutLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    startReplay('checkout')
    return () => stopReplay('checkout')
  }, [])
  return <>{children}</>
}

Multiple concurrent tags

You can have multiple active tags at once — Tracelit stacks them:

startReplay('checkout')
startReplay('upsell-offer')   // user sees an upsell mid-checkout

// Later...
stopReplay('upsell-offer')    // upsell dismissed, still in checkout
stopReplay('checkout')        // checkout complete

Check what’s currently active:

import { getActiveFeatures } from '@tracelit/tracker'

console.log(getActiveFeatures())
// → ['checkout', 'upsell-offer']

Trigger mode + feature tagging

If you set replay.mode: 'trigger', recording only starts when you call startReplay(). This is useful on high-traffic sites where you only want recordings of specific flows:

import { init, startReplay, stopReplay } from '@tracelit/tracker'

init({
  token: 'YOUR_TOKEN_HERE',
  environment: 'production',
  replay: { mode: 'trigger' }  // record nothing until startReplay() is called
})

// Somewhere in your checkout component:
startReplay('checkout')    // recording begins here
stopReplay('checkout')     // recording pauses here

If all features are stopped, the pipeline flushes and recording pauses until the next `startReplay()` call.

API reference

Function	Description
`startReplay(feature?)`	Start a named feature segment. Injects a `tl:feature_start` marker into the recording.
`stopReplay(feature?)`	End a named feature segment. Injects a `tl:feature_end` marker.
`getActiveFeatures()`	Returns an array of currently active feature tag strings.

Use this AI prompt

Add Tracelit feature tagging in my project.

Requirements:
1) Tag my main product flows with startReplay()/stopReplay(), including: onboarding, checkout, and settings-update.
2) In React/Next components, start on mount and stop on unmount.
3) Avoid duplicate tags and keep names consistent.
4) Keep code changes minimal and production-safe.
5) Show exactly which files you changed.
6) Add a quick test plan for verifying tags appear in Tracelit replay.

Getting Started

Core Features

Agentic Process

Integrations

Basic usage

React example — tag a component lifecycle

Next.js example — tag a page or route group

Multiple concurrent tags

Trigger mode + feature tagging

If all features are stopped, the pipeline flushes and recording pauses until the next `startReplay()` call.

API reference

Use this AI prompt

​Basic usage

​React example — tag a component lifecycle

​Next.js example — tag a page or route group

​Multiple concurrent tags

​Trigger mode + feature tagging

​If all features are stopped, the pipeline flushes and recording pauses until the next startReplay() call.

​API reference

​Use this AI prompt

Basic usage

React example — tag a component lifecycle

Next.js example — tag a page or route group

Multiple concurrent tags

Trigger mode + feature tagging

If all features are stopped, the pipeline flushes and recording pauses until the next `startReplay()` call.

API reference

Use this AI prompt