Session replay

Session replay allows you to play back user interactions on your web app and map other telemetry data to help you understand your user's journeys. Session replay can be used for troubleshooting and improving the end-user experience, such as:

• Troubleshooting JavaScript errors: Troubleshoot the cause of an error by seeing what the user was doing when the error occurred. For example, if an end user receives an error while trying to complete an ecommerce transaction, you can use session replay to see which steps they took and what data they entered before the error occurred. This can help you quickly identify and fix the root cause of the problem.
• Improving the user experience: Discover areas of your web app that are causing users frustration. For example, you might see that users are getting lost in your navigation or clicking on buttons that don't do anything.
• Identifying issues in key user journeys: Identify areas of your web app that are causing performance problems. For example, if session replay reveals the /cart/checkout page is experiencing excessive page load time, you'd prioritize fixing this critical user journey.

Here's an example of how a session replay looks:

How session replay works

Session replay works by taking a snapshot of the end-user's DOM (Document Object Model) when the web page loads. The DOM is a hierarchical representation of all the elements on a web page, such as the text, images, and buttons. The browser agent uses a library to record DOM changes as the user interacts with the page. This data is then stored in New Relic's database and can be replayed up to 8 days after the session occurred. The replay is pixel perfect, and you can see exactly what the user's screen looks like when an error occurs.

Impact of session replay

User data and security concerns

We take data privacy seriously, so we built session replay with:

• Minimal data storage: Session replay does not store screenshots or videos. It only records the essential DOM state changes required to recreate the user's experience. This results in a much smaller amount of data being stored.
• Robust default privacy settings: Session replay includes default privacy settings designed to limit the potential sharing of sensitive customer information. These settings can be further customized to meet specific privacy requirements.

App performance

Session replay minimizes impact on your app's performance with:

• Minimal initial impact: Session replay loads asynchronously after full page load, ensuring no interference with early page load performance metrics.
• DOM mutation tracking: Once loaded, session replay monitors DOM changes and reports them as compressed payloads. The size of these payloads correlates with the complexity of the DOM tree.
• Performance optimization techniques: Payload size can also increase if the DOM is large. However, session replay uses a number of techniques to reduce payload size, such as:
  • GZIP compression
  • Duplication reduction
  • Strategic payload harvesting: It only sends a large (compressed) payload when the full DOM is captured, which typically only happens when the replay feature is first imported. After that, it will only send small payloads that relate to the user's actions.

Get started

Enable and configure session replay

1. Go to one.newrelic.com > All Capabilities > Browser.
2. Select your browser app.
3. In the left-hand menu, click Application settings.
4. On the Application settings page, make sure Pro or Pro + SPA browser agent is selected. Session replay is not available for the Lite browser agent.
5. Toggle ON Session tracking and Session replay settings.

Configure sampling rates

Set a sampling rate (0%-100%) for the following samples:

• Session sampling rate records a random sample of all user sessions.

• Errored session sample rate records a random sample of all errored sessions. The agent buffers for up to 30 seconds on the client-side, and if errors occur, the session will be recorded. If an error does not occur, the replay is not harvested.

For example, if you set the session sampling rate to 50% and the error sampling rate to 100%, it means that:

• Half of all user sessions will be recorded.
• All errored sessions will be recorded, even if they're not part of the 50% sample.

Configure privacy settings

New Relic takes your data privacy seriously. The default setting masks everything by replacing all text with asterisks.

Here's an example of how a replay looks with the default privacy settings:

If you need to change the default privacy settings, you can choose specific classes and attributes to mask, block, or ignore:

• Mask means specific text will be replaced with asterisks (*). For example, you could mask sensitive user input such as login information.

How to mask user data

If you want to customize exactly what is masked with asterisks, you have a few options:

• On the Application settings page, add your own CSS selectors or check the masking boxes.

  

• Add our CSS class nr-mask or attribute data-nr-mask to your webpage HTML. For example, if you want to mask user-entered email address, add nr-mask to your email class attribute in <div>:

  <div class="email-input nr-mask">
    <input type="email" name="email" placeholder="Enter your email address" />
  </div>

  Copy

  These options use an asterisk (*) to mask all text in that element, hiding the actual text but revealing the number of characters entered. However, asterisks are not valid numbers, so masking number type-specific fields such as telephone or credit card numbers will result in a blank field in a replay.

• Block means content will be replaced with an empty placeholder. For example, if you have a video playing on your About Us webpage and don’t want it captured, you could block the class that contains that video.

How to block user data

If you want to block specific classes or attributes, you have a few options:

• On the Application settings page, add your CSS selectors in the *Block selectors field.

  

• Manually add our CSS class nr-block or attribute data-nr-block to your webpage HTML. For example, if you wanted to block irrelevant text and images from session replay, add nr-block to <div class>:

  <html>
    <head>
      <title>Sample image and text</title>
    </head>
    <body>
      <div class="image-text-container nr-block">
        <img src="https://example.com/image.png" alt="Image description" />
      </div>
    </body>
  </html>

  Copy

• Ignore means user input will be ignored entirely. For example, if you want to ignore sensitive information like a user's email address and password, you could ignore the element that contains those fields.

How to ignore user data

Add the CSS class nr-ignore to the input field’s class name. For example, if you want to ignore sensitive information on a billing page, add class="nr-ignore" to <input type>:

<div class="sensitive-information">
  <h2>Sensitive Information</h2>
  <p>
    Credit card number:
    <input type="number" class="nr-ignore" id="creditCardNumber" />
  </p>
  <p>
    Expiration date:
    <input type="number" class="nr-ignore" id="expirationDate" />
  </p>
  <p>CVV code: <input type="number" class="nr-ignore" id="cvvCode" /></p>
</div>

Copy

Tip

Always check with your privacy teams if you decide to customize settings. Exposing user input can expose sensitive data.

(For copy/paste deployed agents) Manually update the JavaScript snippet

If you deployed the browser agent using the copy/paste method, you'll need to copy/paste from the UI again. This is because when you enable session replay, the JavaScript snippet updates to include the new feature flag.

To update your agent code:

1. Go to the Application Settings page and copy the JavaScript snippet.

   

2. Paste it in your code where the old snippet was.

3. Deploy your app.

View session replays in New Relic

In the UI, you can find session replays in two places:

• On the Session replay page:

  1. Go to one.newrelic.com > All Capabilities > Browser.

  2. Select your browser app.

  3. In the left-hand menu, scroll down and click Session replay.

  4. Click into each replay to view session details.

     

• On the Errors inbox page:

  1. In the left-hand browser menu, click Errors.

  2. Click on the Triage and Group errors pages to see replays attached to errors.

     

Troubleshooting

<link rel="stylesheet" href="assets.yoursite.com/styles.css" crossorigin="anonymous">