Optimize user experience monitoring by recording and replaying user sessions with Session Replay.
Overview
Creating exceptional user experiences is paramount in the fast-paced software development world. To achieve this, developers must understand their users’ interactions, identify pain points, and ensure seamless functionality.
Session Replay enhances your user experience monitoring by enabling you to record and visually replay the web browsing activities of your users. When combined with Real User Monitoring (RUM) performance data, Session Replay is invaluable for pinpointing, tracking, and resolving errors. It also provides insights into your web application’s usage patterns and design flaws.
How It Works
The Session Replay recorder is part of the RUM Browser SDK, whether NPM or CDN.
The recording tool captures a snapshot of the browser’s DOM by actively monitoring and logging events occurring on a web page, including but not limited to DOM modifications, mouse movements, clicks, input events, and their respective timestamps.
Coralogix then reconstructs the web page and re-implements the recorded events at the appropriate moments in the replay view.
Configuration
Configure Session Replay as follows:
CoralogixRum.init({
// ...
sessionRecordingConfig: {
enable: true, // Must declare.
/**
* If autoStartSessionRecording is false, you can manually start & stop your session recording.
* Refer to Recording Manually Section.
**/
autoStartSessionRecording: true, // Automatically records your session when SDK is up.
recordConsoleEvents: true, // Will record all console events from dev tools. Levels: log, debug, warn, error, info, table etc..
sessionRecordingSampleRate: 100, // Percentage of overall sessions recording being tracked, defaults to 100% and applied after the overall sessionSampleRate.
},
});
Privacy & Security
To protect your users’ privacy and sensitive information, elements containing specific class names are blocked or masked in recordings, as follows:
CoralogixRum.init({
// ...
sessionRecordingConfig: {
// ..
blockClass: 'rr-block', // Use a string or RegExp to redact all elements that contain this class, defaults to rr-block.
ignoreClass: 'rr-ignore', // Use a string or RegExp to Ignore all events that contain this class, defaults to rr-ignore.
maskTextClass: 'rr-mask', // Use a string or RegExp to mask all elements that contain this class, defaults to rr-mask.
maskAllInputs: false, // Mask all input content as * (Default false), refer to Input types.
maskInputOptions: { password:true } // Mask some kinds of input as *, By Default the SDK masking password inputs.
},
});
For example:
<div class="rr-block">Dont record me</div>
Element
Action
.rr-block
The element will not be recorded. It will replay as a placeholder with the same dimension.
.rr-ignore
The element will not record input events.
.rr-mask
All text of elements will be masked.
Manage Session Recordings
Start & Stop Recordings
To manually start and stop recordings, use the following code snippet:
// To start manually the Session Recording
CoralogixRum.startSessionRecording();
// To stop the Session Recording
CoralogixRum.stopSessionRecording();
Avoid Performance Impact
Session Replay works by recording incremental DOM changes in your web application. To avoid performance issues, the feature will stop recording if it detects an excessive number of mutations. The default is set to 5,000.
CoralogixRum.init({
// ...
sessionRecordingConfig: {
// ...
// According to MutationObserver API, A large number of DOM mutations can negatively impact performance
maxMutations: 5000
},
});
STEP 2. You will be redirected to the SESSION REPLAY tab.
Replay Screen
The Replay Screen offers users a dynamic interface to relive recorded sessions with advanced control options, ensuring a seamless and insightful playback experience.
Play & Pause: Users can effortlessly control the playback by pausing and resuming the video at their convenience
Speed Control: The replay speed can be adjusted to suit user preferences
Interaction Focus: Skipping directly to stages with user interactions enhances efficiency.
0-Second Skip: The ability to skip forward and backward by 10 seconds offers precise navigation.
Console
The Console presents users with an immersive environment to explore recorded sessions comprehensively, combining various elements for an enriched understanding of user interactions and application behavior. Observe Console output – your application’s internal logs and messages – in sync with user actions.
Data Usage
To reduce costs and lessen the network load caused by Session Replay, Coralogix compresses the data before sending it. Coralogix eases the strain on a browser’s user interface thread by assigning CPU-heavy tasks, like compression, to a separate web worker.
We apply the following logging pipeline to Session Replay data:
Oh no!We didn’t find anything for “”,
