6 min read

How to Track Session Recording in PostHog

Session recording in PostHog captures every click, scroll, and form interaction your users make. It's invaluable for debugging reported issues or understanding exactly where users get stuck in your funnel. But raw recordings expose sensitive data—you need to enable it, configure what gets recorded, and mask passwords and payment info before PostHog stores anything.

Enable Session Recording in Your PostHog Project

Session recording is off by default. You'll activate it in project settings and ensure your SDK initialization is configured correctly.

Access the Recording settings

In your PostHog app, go to Settings > Recording. This is the control center for what PostHog captures across all sessions. You'll see toggles for enabling recording, network data capture, and console logging.

Enable session recording

Toggle Enable session recording on. PostHog will start capturing new sessions immediately, but won't retroactively record previous sessions. The feature is project-wide—all users will be recorded unless you exclude specific URLs or add sampling rules.

Initialize your PostHog SDK with recording enabled

Ensure your SDK initialization doesn't disable session recording. The disable_session_recording flag defaults to false, but verify it's not set to true in your config. Also set maskAllInputs: true from the start to protect sensitive form data.

javascript
import posthog from 'posthog-js';

posthog.init('phc_YOUR_API_KEY', {
  api_host: 'https://app.posthog.com',
  disable_session_recording: false,
  session_recording: {
    maskAllInputs: true,
    recordCanvas: false,
    maskNetworkData: false,
  },
});

posthog.pageview();
Initialize PostHog with session recording and input masking enabled from the start
Tip: Session recordings consume storage—PostHog retains them for 30 days by default (longer on paid plans). On high-traffic sites, this adds up quickly. Consider using sample rates or segment rules to record only specific user cohorts if cost is a concern.

Configure Privacy and Data Masking

Raw session recordings can expose passwords, credit card numbers, and API keys. You need masking rules in place before any sensitive data reaches PostHog's servers.

Enable input field masking

Set maskAllInputs: true in your session recording config. This hides text in all <input>, <textarea>, and <select> elements. PostHog replaces the actual text with asterisks so you can see the field was filled without exposing the value.

javascript
posthog.init('phc_YOUR_API_KEY', {
  api_host: 'https://app.posthog.com',
  session_recording: {
    maskAllInputs: true,
    maskInputOptions: {
      password: true,
      email: false,
      tel: true,
      number: false,
    },
  },
});
Selectively mask specific input types while leaving others visible for debugging

Add custom masking for app-specific sensitive fields

Use maskInputFn to mask custom input fields or fields with specific data patterns. This is essential if your app has custom fields like SSN, API keys, or medical IDs that PostHog won't recognize automatically.

javascript
posthog.init('phc_YOUR_API_KEY', {
  api_host: 'https://app.posthog.com',
  session_recording: {
    maskAllInputs: true,
    maskInputFn: (text, element) => {
      // Mask credit card patterns (16 digits)
      if (/^\d{13,19}$/.test(text.replace(/\s/g, ''))) {
        return '****' + text.slice(-4);
      }
      // Mask SSN pattern (XXX-XX-XXXX)
      if (/^\d{3}-\d{2}-\d{4}$/.test(text)) {
        return '***-**-****';
      }
      return text;
    },
  },
});
Custom masking function that patterns-match sensitive data before it's recorded

Handle network data and API responses

By default, PostHog captures network requests (XHR and fetch). If your app sends sensitive data in request/response bodies, enable maskNetworkData: true. This hashes the data so you can see that a request happened without exposing the payload.

Mask specific DOM elements

Beyond inputs, you may have sensitive text in divs or spans (like social security numbers or API tokens displayed on screen). Add the CSS class ph-no-capture to those elements to prevent PostHog from recording them in the session.

Watch out: Masking rules run client-side before sending data to PostHog, so test them thoroughly before production. If a rule doesn't match, sensitive data will be recorded. Also check your URL querystrings—sensitive values there aren't masked by default.

Access and Use Session Recordings

With recordings enabled and masking in place, you can now watch sessions to understand user behavior and debug issues in real time.

View the Recordings list

In PostHog, navigate to Analytics > Recordings. You'll see a chronological list of sessions. Each entry shows the user, duration, events captured, and the timestamp. Click any session to play back the recording.

Filter recordings by user, event, or cohort

Use the filter panel to find specific sessions. Filter by User, Browser, Device, Event name, or custom properties. This is powerful for isolating sessions where users hit errors—filter by the error event, then watch what led to it.

Link recordings to your funnel and event data

When you see a drop-off in your funnel or an error spike in your event data, jump to that session's recording. PostHog automatically displays events that occurred during the session on a timeline alongside the video, so you can see what happened right before the error.

javascript
// Capture context-rich events that link to session recordings
posthog.capture('checkout_error', {
  error_code: 'PAYMENT_DECLINED',
  cart_value: 129.99,
  payment_method: 'card',
  user_segment: 'trial',
});

// PostHog automatically associates this event with the current session
// When you filter by this event, you'll see the recording of that session
Capture detailed events that PostHog links to session recordings for context

Export or share recordings for team review

Use the Share button to get a URL you can send to teammates. They can watch the session without needing PostHog access. This is useful for sharing bug reproductions with your engineering team or getting product feedback from stakeholders.

Tip: Use recordings to validate user feedback before filing bugs. When a user reports 'checkout is broken,' find their session and watch it. Often you'll discover the user made an error, had a network issue, or misunderstood the flow—this saves engineering time and clarifies the real problem.

Common Pitfalls

  • Not enabling input masking and exposing passwords or payment card numbers in recordings because you thought they'd be masked by default
  • Recording network data without masking, which exposes API responses containing user PII or authentication tokens
  • Ignoring GDPR and privacy regulations—session recordings contain personal data and typically require explicit user consent in the EU and UK
  • Burning through storage quota by recording all traffic on high-volume sites without sample rates or segment rules to limit recording

Wrapping Up

Session recording in PostHog gives you unfiltered visibility into how users move through your product. By enabling it correctly, masking sensitive data from the start, and linking recordings to your event data, you'll spot friction points and debug issues in hours instead of days. If you want to track session recordings and other behavioral signals automatically across all your analytics tools, Product Analyst can help.

Track these metrics automatically

Product Analyst connects to your stack and surfaces the insights that matter.

Try Product Analyst — Free