What you need to know about session replay tools

[ad_1]

What if stack traces and breadcrumbs weren’t enough to reproduce a bug that was flooding the support team with tickets? could be the solution. In this Q&A, Sentry’s Jasmin Kassas (Product Manager) and Bruno Garcia (Engineering Manager) delve into the most difficult types of errors and performance issues to reproduce, and when session replay tools can help.

Q: What are some errors or performance issues that developers find difficult to reproduce or debug?

Poorly performing code causes many kinds of errors and bad UX experiences. Problems range from syntax and runtime errors to poor database queries due to missing indexes. When conditions are the cause, they are often difficult to reproduce. For example, Next.js developers may be familiar with hydration errors. This usually works fine in development (the famous “works on my machine”), but fails in practice. Another example would be a CSS Bugs caused by subtle changes in behavior by the runtime or environment, such as problems that only occur in Safari due to the way classes are parsed.

Q: What type of debug context should I look into to resolve difficult errors?

This depends on the error category. However, here is the important information needed to troubleshoot the issue:

Version of software used.
A stack trace with lines of code, file paths, and function names all pinpoint where the error occurred.
The browser and version used by the end user.
A breadcrumb detailing the steps leading up to the error.
when the bug is introduced. This helps narrow down the code change, release or ideally commit that caused the bug.

Developers should narrow down the problem, identify the part of the code where the problem occurred, and understand how the app got to that state. Then create a test that reproduces the problem and create a fix.

Q: What do the stack traces and breadcrumbs tell me, and why are they sometimes inadequate?

Error monitoring tools record exception data and help developers troubleshoot issues with stack traces, source maps, breadcrumbs, and more. However, for certain classes of errors and performance issues, it can still be difficult to understand exactly how the issue was triggered and what happened afterwards. A session replay tool that recreates page views, button clicks, and mouse movements from a user session can help you diagnose how problems occurred in your UX and determine their impact on your end users.

Q: What is Session Replay typically used for?

To understand end-user behavior: Identify the pages end users spend the most time on, where they leave your website and why, where they get stuck, and the most common paths.
Debug error: If your session replay tool is integrated with error monitoring, you can see the exact step where the error occurred. This is especially useful when the reason for the error is a series of state changes over time.
Evaluate the severity of the error. Video-like playback lets you see exactly how the error impacted the end user. Did this error occur in the background with no visual clues? Or did this error display a “white screen of death” preventing the user from doing anything else on the site? You can use this information to make informed decisions about how to triage errors.
Troubleshooting support tickets: When a user submits a support ticket, see the relevant replay of that user’s session to add context to the reported feedback or bug. You can skip the back and forth between the user and the support engineer and gather context such as what happened and what device they were using.
User experience research: By showing real users navigating your site, you can uncover areas where your UX could be improved or where your UX was successful in completing important tasks.

Q: When will the session replay tool include functionality?

All session playback tools provide core functionality for video-like playback of user sessions, including rebuilding the Document Object Model (DOM). However, other features that come with the session replay tool depend on your company’s target use case.

For a debug-oriented session replay tool like Sentry’s Session Replay, it’s typically complementary with console logs, network requests, memory sizes, DOM events, the ability to inspect the DOM tree directly, and the ability to emulate the dev tool experience. functions are displayed. browser.

For session replay tools that focus on user behavior, they are typically most commonly manipulated by overlaying aggregated products and user analytics such as funnel optimization, churn, conversion rate optimization, and replay video. You can find a heatmap that highlights the page elements you have.

Q: As a developer, why should I monitor user sessions?

Monitoring user sessions can help you more easily reproduce root causes and resolve front-end errors in your application. Then you can assess the severity of the error simply by watching the replay video and seeing how the error affected the end-user experience. Did the user notice the error?

Q: What’s the best way to assess the severity of an error or performance issue?

Ideally, we want to know exactly how it impacted the end-user experience. Some issues can be easily recovered if the user retries the same action and the UI clearly indicates what is happening. Issues like this are given lower priority than issues that completely block the user from moving forward. Especially this is important in the context of where the error occurred. For example, if an end user is blocked on the checkout page of an e-commerce site or app, this is a serious issue that needs to be addressed immediately as it impacts business revenue. Whether the error was handled, how many users were affected, how many times the error occurred, etc. are all very important. By visually recreating how an error or performance issue occurred in your app, you can better assess the impact of the issue on the user experience.

Q: Will the session replay tool reveal sensitive user information?

Session playback products present a difficult problem. You have to strike the right balance of providing valuable debugging context without accidentally revealing sensitive user data in the recorded HTML. If you strip too much, it will be difficult for the user to decipher the exact method that triggered that tricky bug. Strip too little and you risk exposing sensitive data out of the user’s browser.

Most session replay tools offer privacy controls, but to varying degrees. Developers should dig into how each tool handles user privacy and evaluate what works best. For example, if a company wants to consider all user content unsafe, that means all HTML text, image content, and user input is masked out of the box before leaving the user’s browser. , it’s up to the viewer to opt-in. Known-safe HTML content required during playback, such as static navigation and header links. The trade-off is a slightly lower fidelity recording — more content is masked — but a stronger confidence that only known-safe content leaves the user’s browser.

Sentry offers the same project-level privacy as other offerings, including personally identifiable information (PII) scrubbing and IP redaction to remove sensitive content at the edge ingestion service before data is stored for additional layers of defense Applying settings. .

Q: Where can I get help if I get stuck debugging an error?

You can ask ChatGPT for help. Jokes aside, forums like Stack Overflow, Discord, Slack, and Gitter that are specific to a particular development framework or technology are great places to ask questions and share feedback with other developers. It continues to exist. Some projects on GitHub offer discussions (in addition to Issues). You can use this to ask the developers of that project and the wider community for help.

Sentry recently added Session Replay to its core platform to expand its error and performance monitoring capabilities. For more information on Sentry session replays, please visit our website and documentation. If you’re new to Sentry, you can sign up or request a demo to get started. Also, check out our Discord and GitHub channels.