Record session replay safely

Session replay is opt-in and available through the JavaScript browser SDK. Record only the journeys you are prepared to store and review.

Start recording

import { startReplay } from '@teml/sdk/replay';

const stopReplay = startReplay({
  endpoint: 'https://api.teml.io',
  apiKey: import.meta.env.VITE_TEML_REPLAY_KEY,
  distinctId: currentCustomerId,
  maskAllInputs: true,
  captureConsole: false,
  captureNetwork: false,
});

Use a project-scoped browser key with replay:write. Replay chunks are not authorized by ingest:write. Do not add read, management, or agent scopes to a browser key.

Call stopReplay() when the application tears down the recorder. Chunks also flush during normal page navigation.

Keep the defaults private

Input masking is enabled by default. Keep it enabled unless every affected field has been reviewed. Network and console capture are enabled by the SDK unless explicitly disabled, and can include customer or application data. The example starts with both disabled. Enable either one only after reviewing what the application logs or sends and filtering sensitive payloads at the source.

Replay data is opaque at ingestion time; browser-side masking is therefore the important privacy boundary.

Connect replay to the backend

Keep browser request tracing enabled and allow trace-header propagation to your own API origin. Your backend must allow the traceparent and baggage request headers and must validate identity at a trusted boundary.

When this path is configured correctly, a replay can link to the backend trace and error produced by the same session.

Verify

1. Start a development session under a recognizable test customer.
2. Navigate through the application and trigger a test error.
3. Open Replays and play the session.
4. Confirm the related error and trace are present.
5. Open the customer and confirm the replay appears on their timeline.

If the recording is absent or cannot play, see Replay or symbols are not working.