Session Replay

Session replay enables you to record users navigating through your website and play back the individual sessions to watch how real users use your product.

Above is a recording of posthog.com… on posthog.com – very meta.

How to enable session replay

Session replay can only be used with our JavaScript library and requires the feature to be enabled in your PostHog Project Settings.

Once enabled, the JS library will start recording sessions by default.

Session Replay does not work if you send data using Segment's SDK as this data is not collected. If you use Segment, you may want to add the PostHog library too (make sure to only send regular event data from one source).

It can be toggled on and off in the JS library by appropriately setting the disable_session_recording flag in the config.

Users who opt out of event capturing will not have their sessions recorded.

How to watch recordings

To watch recordings, you can visit the 'Replay' page. When watching replays, you can change the playback speed, as well as select the option 'skip inactivity' - this will skip parts of the recording where the user was inactive on the page.

You can also watch recordings by clicking on any data point in an insight. This will open the list of persons and display a "watch recording" button if it is available. This is specially useful in funnels, where you can drill down and watch recordings of users who converted or dropped off.

You can also click into the person to view all their recordings.

How to ignore sensitive elements

You may want to hide sensitive text or elements in your replays. See our privacy controls docs for how to do this.

Console logs recording

PostHog can also capture console logs from your application. This is useful for debugging and providing extra context on what is happening in your users' browser environment.

As console logs can contain sensitive information, we do not capture these logs automatically. You can enable this feature globally from your project settings or client-side by setting enable_recording_console_log: true in our JavaScript library config.

Console logs will be recorded if either the project setting or the client-side config is set to true. Console logs will not be recording if session replay is not enabled.

posthog.init('<ph_project_api_key>', {
    api_host: '<ph_instance_address>',
    // This is only needed if you aren't configuring session replay using the project settings toggle.
    enable_recording_console_log: true,
    // ... other options
})

Network recording

PostHog can capture network requests that occur during the browser session so you can see the effect of slow network requests or errors on the user experience.

To remove sensitive information from the URL, these network requests can be modified before being captured like so:

posthog.init('<ph_project_api_key>', {
    session_recording: {
        maskNetworkRequestFn: (request) => {
            // For example: ignoring a request entirely
            if (request.url.includes('example.com')) {
                return null
            }

            // ... or remove the query string from the URL
            request.url = request.url.split('?')[0]
            return request
        }
    }
})

How to control which sessions you record

If you want more granular controls on selecting which sessions to record, first set disable_session_recording: true in your config and then manually start recording by calling posthog.startSessionRecording(). Similarly, you can stop the recording at any point by calling posthog.stopSessionRecording().

You can then achieve even finer control by combining the above methods with feature flags. This enables you to control session recordings based on users with certain user properties, actions, or events. You can also use feature flags to capture a percentage of all sessions.

For example:

posthog.init('<ph_project_api_key>', {
    api_host: '<ph_instance_address>',
    disable_session_recording: true,
    // ... other options
})
window.posthog.onFeatureFlags(function () {
    if (window.posthog.isFeatureEnabled('your-feature-flag')) {
        window.posthog.startSessionRecording()
    }
})

For even more configuration options on which sessions you record, see our tutorial on how to only record the sessions you want.