How Session Recording Works — Practical UX Insights

Session recording captures every user interaction on your website — mouse movements, clicks, scrolls, and form inputs. Instead of relying on aggregated metrics, you see exactly what individual users experience.

Images in this article were generated by AI and may contain imperfections. Real application screenshots will be added soon.

This article may describe features that are still in development. If you need any of them prioritized, please contact us via the contact form (applies to Business subscription or higher).

How Session Recording Works

A lightweight JavaScript snippet (under 30KB gzipped) is added to your website. When a user visits, the script captures DOM mutations, mouse coordinates, scroll positions, and input events. This data is serialized using the rrweb protocol and streamed to our servers.

On the backend, events are stored in a time-series format optimized for playback. The player reconstructs the page state by replaying mutations sequentially, creating a visual reproduction of the user's session.

From the user's perspective: nothing changes. The script runs asynchronously and has minimal impact on page performance (typically under 2ms per frame). Sensitive data can be masked automatically using CSS selectors or data attributes.

[img: horizontal illustration showing a browser window with cursor trail, click indicators, and scroll depth markers overlaid on a checkout page interface, clean SaaS dashboard aesthetic]

Real-World Use Case

A SaaS company notices high drop-off during signup. Analytics show users leave at step 2, but not why. Session recordings reveal that users repeatedly click a disabled "Continue" button — they don't realize a required checkbox at the bottom of the form is unchecked.

The fix: move the checkbox above the button and add inline validation. Result: 23% increase in signup completion. Without session recordings, this specific friction point would have remained invisible in funnel data.

[img: horizontal illustration showing a session replay player interface with timeline, playback controls, and event markers, dark mode analytics dashboard style]

Frequently Asked Questions

Does session recording affect website performance?

The impact is minimal. The script runs asynchronously and captures events passively. Typical overhead is under 2ms per frame. We use requestIdleCallback where supported to further reduce any impact on page interactivity.

How is sensitive data handled?

Input fields are masked by default — we capture that text was entered, but not the actual characters. You can configure additional masking using CSS classes or data-* attributes. Password fields are never recorded.

How long are recordings stored?

Storage duration depends on your plan: 30 days for Starter, 90 days for Professional, 180 days for Business, and 365 days for Enterprise. After this period, session data is permanently deleted.

Can I record sessions on single-page applications (SPAs)?

Yes. The script handles client-side routing and dynamic content changes automatically. It tracks DOM mutations regardless of how they're triggered — whether by React, Vue, Angular, or vanilla JavaScript.

Start in 60 seconds

No card. No setup. First recordings in a minute.

Optimize your UX image

Sign up for free – no credit card required!

Try the full Enterprise plan for 7 days with 1000 sessions limit – no commitments.

  • Registration takes seconds – no credit card required
  • For a week, use all features and full platform power
  • After trial, choose any paid plan or switch to "Cebula" (free tier) for free
  • 🧅 "Cebula" (The Onion) - Polish for savvy saver. Perfect for small sites – zero cost!