What You Need to Know about Session Replay Tools
What do you do when stack traces and breadcrumbs aren’t enough to reproduce a bug that is inundating your support team with tickets? Session replay tools might be the solution every developer didn’t know they needed. In this Q&A, Sentry’s Jasmin Kassas, product manager, and Bruno Garcia, engineering manager, dig into the most difficult types of errors or performance issues to reproduce and when a session replay tool would come in handy.
Q: What are some types of errors or performance issues that developers often find difficult to reproduce and/or debug?
There are many types of errors and bad UX experiences caused by poor-performing code. They range from syntax and runtime errors, to poor database queries due to missing indexes. It’s often harder to reproduce when state is the culprit. For example, Next.js developers are likely familiar with hydration errors. This is usually something that works fine in development (the famous “works on my machine”) but fails out in the wild. That’s when you wish you could see exactly what the user saw with the same series of steps, in the right order, that causes the problem… But more on that later. Another example is when a bug is caused by subtle changes in behavior by the runtime or environment, such as an issue that only happens on Safari due to the way it handles parsing CSS classes that contain colons.
Q: What types of debugging context should I look at to resolve challenging errors?
This will vary depending on the category of the error. But a few key pieces of information you need to troubleshoot a problem are:
- The version of the software being used.
- The stack trace as it contains the line of code, file path and function name, all pinpointing to where the error occurred.
- The browser and version the end user was using.
- Breadcrumbs that detail the steps leading up to the error.
- When the bug was introduced, as this helps narrow down what changed in the code to cause the bug, which release, or ideally, which commit.
The developer needs to narrow down the problem, identify the part of the code where it happened and understand how the app got to that state. They would then write a test that reproduces the problem and create a fix for it.
Q: What can stack traces and breadcrumbs show me, and why are they sometimes not enough?
Error-monitoring tools record exception data to help developers troubleshoot issues including stack traces, source maps and breadcrumbs. However, for certain classes of errors and performance issues, it can still be challenging to understand exactly how an issue was triggered and what happened afterward. A session replay tool that reproduces the page views, button clicks and mouse movements of a user session can help you diagnose how an issue manifested in the UX and pinpoint the impact that it had on the end user.
Q: What is session replay typically used for?
- To understand end-user behavior: Identify which pages your end user is spending the most time on, where they drop off on your website and why, where they get stuck, and the most common paths they took.
- Debugging errors: If your session replay tool is integrated with error monitoring, you can see the exact steps that led to an error being triggered. This is especially useful when the reason why an error occurred is due to a series of state changes over time.
- Assess the severity of an error: With a video-like reproduction, you can see exactly how an error affected the end user. Did this error happen in the background and there was no visual cue of it happening? Or did this error result in a “white screen of death” and prevent the user from doing anything else on your site? With this information, you can make an informed decision on how to triage your errors.
- Troubleshoot support tickets: When a user sends a support ticket, see the associated replay of that user session to add context to the feedback or bug they reported. You can skip the back and forth between the user and support engineer to collect context on what happened, what device they were on, etc.
- User experience research: By viewing real users navigating your site, you can uncover areas where your UX can improve, as well as where your UX was successful in completing an important task.
Q: When features are included in a session replay tool?
All session replay tools will provide the core functionality of a video-like reproduction of a user session such as reconstruction of the Document Object Model (DOM). However, any other features that come with your session replay tool will depend on the company’s target use cases.
For debugging-oriented session replay tools like Sentry’s Session Replay, you will typically see complimentary features such as console logs, network requests, memory sizes, DOM events, ability to inspect the DOM tree directly, emulating the dev tools experience you can find in your browser.
For session replay tools that focus on user behavior, you will typically find aggregate product and user analytics — funnel optimization, churn, conversion rate optimization, etc. — and heatmaps that overlay the replay video to highlight most commonly interacted-with page elements.
Q: Why should I care about watching user sessions as a developer?
Watching user sessions can help you more easily reproduce the root cause and solve frontend errors in your application. Secondly, you can assess the severity of an error by simply viewing a replay video and seeing how it affected the end-user experience: Did it prevent them from continuing their workflow? Did the user notice the error at all?
Q: What’s the best way to assess the severity of an error or performance issue?
Ideally you would know exactly how it affected the end-user experience. Some issues are easily recoverable if the user retried the same action and the UI clearly indicates what’s going on. Such issues would have a lower priority than an issue that completely blocks the user from moving forward. In particular, this is important in the context of where the error happened. For example, if an end user is blocked on the checkout page of an e-commerce site or app, this is a critical issue that should be addressed immediately as it affects the business’s bottom line. Indications like knowing if the error was handled or not, how many different users were affected and how many times the error occurred are all very important. Being able to watch a visual reproduction of how an error or performance issue was triggered in your app allows you to more accurately assess the impact that issue has on your user experience.
Q: Do session replay tools reveal sensitive user information?
Session replay products have a challenging problem: They have to strike the right balance of providing valuable debugging context without accidentally revealing sensitive user data in the recorded HTML. Strip too much, and it’s hard to decipher how exactly the user triggered that tricky bug. Strip too little, and you risk sensitive data leaving the user’s browser.
Most session replay tools offer privacy controls, but to varying degrees. Devs need to dig into how each tool handles user privacy to evaluate what works best for them. For example, if a company wants to deem all user content as unsafe, that would mean that all HTML text, image content and user input are masked out of the box before it leaves the user’s browser, and it’s up to the viewer to opt into any known safe HTML content they want during playback, like static navigation and header links. The tradeoff is slightly lower recording fidelity — more content will be masked — but stronger confidence that only known, safe content leaves the user’s browser.
At Sentry, as an additional layer of defense, we apply the same project-level privacy settings as our other products, including scrubbing of personally identifiable information (PII) and IP redacting, which removes sensitive content at our edge ingestion service before data is stored.
Q: Where can I get help when I get stuck on debugging an error?
You can ask ChatGPT for help. All jokes aside, forums such as Stack Overflow, Discord, Slack and Gitter that are dedicated to a particular development framework or technology continue to be great places to ask questions and share feedback with other developers. Some projects on GitHub offer Discussions (in addition to Issues) that can be used to reach the developers of that project and the wider community for help.
Sentry recently added Session Replay to its core platform, extending its error and performance-monitoring functionalities. To learn more about Sentry’s Session Replay, check out our website and docs. If you’re new to Sentry, you can sign up or request a demo to get started. And make sure to check out our Discord and GitHub channels.
