Session replay — what it is and how to enable it

Session replay is one of the most powerful signals in a Yaplet bug report. Instead of reading a description of what happened, you watch it — every click, scroll, and DOM change, reconstructed as a seamless replay. This article explains what it captures, how the privacy model works, and how to turn it on.

What session replay captures

When session replay is enabled, Yaplet records a continuous stream of browser DOM snapshots in the background. When a bug report is submitted, the last ~30 seconds of that stream are attached to the ticket. The replay includes:

• Mouse cursor movements and clicks
• Keyboard input (see masking below)
• Page scrolling
• DOM changes — elements appearing, disappearing, or changing state
• CSS changes — style updates, animations, transitions
• Network request timing (overlaid as a signal summary)
• Console error events (overlaid as a signal summary)

The replay is stored in a compressed format and is not a video file — it's a structured event log that is replayed in a sandboxed iframe in your dashboard, so there is no performance overhead from video encoding.

What is masked by default

Session replay is built on top of rrweb, an open-source DOM recording library. Yaplet applies these defaults before any data leaves the browser:

• Password fields — all <input type="password"> values are never recorded.
• Elements with class gl-block — completely omitted from the recording; replaced with a placeholder.
• Elements with class gl-ignore — recorded as empty placeholders (structure preserved, content omitted).
• Elements with class gl-mask — text content is replaced with asterisks.

How to enable session replay

1. Go to Widgets in your Yaplet dashboard and open the widget you want to configure.
2. Open the Settings tab.
3. Find the Session replay toggle (or Enable web replays) and turn it on.
4. Save the widget.

Session replay is off by default. Enable it only for widgets where you want the enhanced debugging data.

Extending privacy controls via the SDK

Your development team can go further with Yaplet.setReplayOptions(options) called before Yaplet.initialize(). Useful options include:

• maskAllInputs: true — masks all text input values, not just passwords.
• maskTextSelector: ".sensitive-data" — masks text in any element matching a CSS selector.
• blockSelector: "#payment-form" — completely blocks a section from recording.
• ignoreCSSAttributes: ["color", "font-size"] — excludes CSS properties from style snapshots.

Network log privacy can be controlled separately with Yaplet.setNetworkLogsBlacklist(["api.payments.com"]) and Yaplet.setNetworkLogPropsToIgnore(["Authorization"]).

GDPR considerations

Session replay records user behaviour, which is personal data under GDPR. To comply:

• Disclose session replay in your privacy policy and cookie notice.
• Enable maskAllInputs: true unless you have a specific reason to record input values.
• Use blockSelector to exclude any section of your UI that shows personal or financial data.
• Yaplet's self-hosted deployment (EU Coolify stack) means replay data stays within the EU and never transits a US-based SaaS provider.