Session replay is one of the most powerful tools in a product team's arsenal. Watching how real users navigate your interface reveals problems that no amount of A/B testing or funnel analysis can surface. But session replay also raises serious privacy questions. Recording user sessions means capturing potentially sensitive interactions, and doing it wrong can violate privacy regulations, erode user trust, and expose your company to legal risk.
This article explains how session replay works at a technical level, where privacy risks arise, and how Traceflair's architecture addresses them.
How Session Replay Actually Works
A common misconception is that session replay tools record video of the user's screen. They do not. Video recording would produce enormous files and require screen-capture permissions that browsers do not grant to JavaScript. Instead, session replay works by recording the DOM.
The Initial Snapshot
When a session begins, the recorder serializes the entire DOM tree into a structured format. Every element, attribute, text node, and computed style is captured as a JSON-like data structure. This snapshot represents the starting state of the page.
Mutation Observation
After the initial snapshot, the recorder uses the browser's MutationObserver API to watch for changes. Every time the DOM changes, whether from user interaction, JavaScript execution, or network responses, the observer captures the mutation as a compact delta:
// Simplified mutation record
{
type: "childList",
target: nodeId_42,
addedNodes: [{ tag: "div", attributes: { class: "modal" }, ... }],
removedNodes: [nodeId_38],
timestamp: 1709654321000
}The recorder also captures user interactions (clicks, scrolls, mouse movements, keyboard input) and network activity as timestamped events. Together, the initial snapshot plus the stream of mutations and events form a complete recording that can be replayed by rebuilding the DOM in an iframe.
Traceflair's Recorder Architecture
Traceflair's recorder package contains 44 individual capture modules, each responsible for a specific aspect of the recording: DOM mutations, input values, scroll positions, network requests, console logs, CSS transitions, canvas rendering, and more. This modular design means each module can independently respect privacy rules and consent state.
The Privacy Risks of Naive Session Replay
A session replay tool that simply records everything creates several categories of risk.
Capturing Personally Identifiable Information
Text content in the DOM often includes PII: names, email addresses, phone numbers, physical addresses, and sometimes even partial credit card numbers rendered in confirmation pages. A naive recorder captures all of this as plain text in the snapshot and mutation stream.
Recording User Input
Form fields capture the most sensitive user data: passwords, credit card numbers, social security numbers, medical information. Without explicit input masking, a session replay tool records every keystroke in every field.
Third-Party Content
Embedded widgets, chat windows, and third-party iframes may contain content that you have no legal right to record. Recording these elements can violate terms of service or data processing agreements.
Regulatory Exposure
Under GDPR, session recordings constitute personal data processing. Under CCPA, they may qualify as "selling" personal information if shared with a third-party analytics vendor. Recording without proper consent or data handling procedures can result in significant fines.
Traceflair's Privacy-First Approach
Traceflair was designed from the ground up with privacy as a core constraint, not an afterthought. Here is how.
Three Consent Modes
Every Traceflair deployment must specify a consent mode. There is no default that silently records everything. The three modes cover the spectrum of regulatory requirements:
Opt-in mode is the strictest. No data is collected until the user explicitly grants consent. This is required for GDPR compliance when session replay is involved:
<script
src="https://cdn.traceflair.com/tracker.js"
data-site-id="your-site-id"
data-consent="opt-in">
</script>Opt-out mode collects data by default but stops immediately when the user revokes consent. This is suitable for jurisdictions with implied consent frameworks:
<script
src="https://cdn.traceflair.com/tracker.js"
data-site-id="your-site-id"
data-consent="opt-out">
</script>Implied mode is for contexts where consent is not required, such as internal tools or authenticated enterprise applications where users have agreed to monitoring through employment terms:
<script
src="https://cdn.traceflair.com/tracker.js"
data-site-id="your-site-id"
data-consent="implied">
</script>Consent state is persisted in localStorage under the key traceflair_consent. Every plugin checks this state before collecting any data. Changing the consent mode at runtime takes effect immediately across all active plugins.
Automatic PII Detection
Traceflair's recorder includes heuristic PII detection that identifies and masks common patterns in DOM text content: email addresses, phone numbers, numeric sequences that resemble credit card numbers or social security numbers. These patterns are replaced with placeholder text in the recording before the data ever leaves the browser.
Input Masking
All input fields with type="password" are masked by default, with no configuration required. For other sensitive fields, Traceflair masks input values so that the recording shows that a user typed in a field and how many characters they entered, but not what they typed. This preserves the behavioral insight (did the user hesitate? did they correct their entry?) without capturing the actual data.
The data-traceflair-ignore Attribute
For sections of the page that should never be recorded, Traceflair provides the data-traceflair-ignore attribute. Adding this attribute to any element excludes the entire subtree from the DOM serializer, the mutation observer, click tracking, and rage/dead click detection:
<!-- This entire section will be invisible to the recorder -->
<div data-traceflair-ignore>
<h2>Account Details</h2>
<p>Name: Jane Smith</p>
<p>Email: jane@example.com</p>
<p>SSN: ***-**-1234</p>
</div>This attribute is checked by the serializer during the initial snapshot, by the mutation observer during ongoing recording, and by click-tracking and rage/dead click detectors. It provides a comprehensive exclusion mechanism with a single declaration.
Self-Hosting Eliminates Third-Party Risk
When you self-host Traceflair, session recordings never leave your infrastructure. There is no third-party data processor involved. This dramatically simplifies GDPR compliance because you maintain full control over data storage, retention, and deletion. Many of the most difficult privacy questions around session replay disappear when you are both the data controller and the data processor.
Practical Configuration for GDPR Compliance
For a typical European website, here is how you would configure Traceflair for GDPR-compliant session replay:
<!-- 1. Load with opt-in consent -->
<script
src="https://cdn.traceflair.com/tracker.js"
data-site-id="your-site-id"
data-consent="opt-in">
</script>
<!-- 2. Exclude sensitive areas -->
<section data-traceflair-ignore>
<!-- Payment forms, personal data displays, etc. -->
</section>
<!-- 3. Grant consent after user accepts cookie banner -->
<script>
document.getElementById('accept-cookies').addEventListener('click', function() {
// Traceflair starts recording only after this call
window.Traceflair.consent.grant();
});
</script>With this configuration, no data is collected until the user clicks accept. Sensitive page sections are excluded from recording entirely. And if you self-host, the recorded data stays on your servers.
Session Replay Without Compromise
Session replay does not have to be a privacy liability. With the right architecture, it is possible to capture the behavioral insights your product team needs while fully respecting user privacy and regulatory requirements. Traceflair proves this is not just a theoretical possibility but a practical one.
Want to see privacy-first session replay in action? Start your free trial or explore the full feature list. For more on our philosophy, read why we built Traceflair with privacy first.