When developing large, customer-facing applications, it’s paramount to have visibility into real user behavior in order to optimize your UX. Without a direct view into what users are actually doing when navigating your app, it can be difficult to reproduce bugs and understand how aspects of your frontend design are causing user frustration and churn. With Datadog RUM’s Session Replay feature, you can watch individual user sessions using a video-like interface. This allows you to view exactly how your users interact with your website, saving you time and guesswork recreating bugs and helping you understand patterns in your users’ behavior. In this post, we’ll discuss how Session Replay can help you speed up your debugging and find patterns in your users’ behavior.
Reproduce bugs and troubleshoot faster
As a frontend or support engineer, an essential—and often time-consuming—part of the debugging process is reproducing bugs. But it can be difficult to do so without a clear understanding of the actions a user took before your application threw an error. By recording real user journeys, Session Replay effectively reproduces the bug for you, saving time and eliminating any guesswork.
For example, let’s say you’re a frontend engineer monitoring a recent release and notice a new issue pop up in Error Tracking. After viewing key information about the error, such as the error message, stacktrace, and browser info, you can immediately pivot directly from the issue summary to a live reproduction of the most recent session that experienced the error.
When viewing a replay, you can see a video-like reproduction of the entire user journey. Datadog also displays an event timeline that breaks the session down into every page load and DOM change resulting from the user’s actions so you can jump to individual events. The timeline flags any user interaction that results in an error so you can pinpoint when and where issues occurred.
For example, let’s say you notice a rise in timeout errors on a particular page load. With Session Replay, you can easily identify the exact user action that’s causing the timeout, without needing to guess about how users are triggering the error.
Once you’ve found the user action or page load triggering the timeout error, you can see more details to start troubleshooting. For example, you can see a waterfall of the resources loaded—along with key performance metrics. This helps you determine, for example, if there is a particularly slow asset that is causing a bottleneck for users. For further context, you can pivot to relevant traces, logs, and errors to continue investigating whether, for instance, the root cause of the timeouts is a backend problem like a hanging API call.
Understand user behavior
If you’re a UI or UX designer, real user data can be an important source of truth for understanding the efficacy of your designs. Using Session Replay, you can observe how users traverse your website to get insight into how long it takes them to make decisions, what they hover over before clicking on something else, how they respond to broken UI elements and other errors, and more.
Let’s say you’re a designer investigating a drop in click-through rate for a key part of your application, such as a checkout page. You might first want to check if something in a common user flow to this endpoint is causing a bottleneck. By filtering the RUM Sessions view to sessions that include common gateways to the checkout page, such as the shopping cart, and sorting the resulting list by duration, you can surface replays that represent cases where the user spent a particularly long time on the previous page.
Examining Session Replays for these slow cases, you can directly observe users’ behavior to not only understand what is happening, but also form hypotheses about why. For example, you might watch the user unsuccessfully attempt to enter their password several times before churning away. Then, you can use the insight you’ve gathered to create design interventions to try and guide these situations. For example, you could build a new password recovery workflow, or add an option to check out as a guest so users can bypass the sign-in form that is causing them to churn. After deploying your change, you can monitor key RUM metrics like the pageview count for the checkout page to see if it rises, indicating more users are successfully getting through the sign-in page.
Configure privacy options
Having the ability to view real user sessions inherently introduces an amount of customer privacy risk that can create problems for your legal team. For example, a replay may include a user entering a credit card number. Datadog Session Replay includes default privacy options to allow you to automatically obfuscate some or all customer data in your sessions so you can leverage Session Replay while managing the risk of capturing sensitive information.
You can choose between three different levels of obfuscation:
allow, to leave all text uncensoredmask-user-input(the default level), to only obfuscate user input fields, such as credit card information, type forms, and text boxesmask, to obfuscate all UI text and customer input, so no text fields are readable
In the example below, we’ve set the default privacy options to the mask-user-input setting, so the coupon code the customer entered is obfuscated.
Get started with Session Replay
RUM’s Session Replay feature is a powerful tool for providing qualitative context around your frontend performance metrics, helping designers understand user behavior, and automatically reproducing bugs so your frontend developers can iterate fixes faster. Session Replay is generally available—if you’re a Datadog customer, you can follow this guide to get started. Or, you can get started using Datadog with a 14-day free trial.
