Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay

Rate this content
Bookmark

You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.


Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).

Ryan Albrecht
Ryan Albrecht
44 min
30 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This workshop introduces Replay, a tool for solving bugs faster by providing context through session replays. It demonstrates the importance of context in bug solving and showcases the features of session replay, such as viewing HTML, console logs, network requests, and linking backend errors. The workshop also covers the use of virtual DOM and mutation observer for efficient page changes. Privacy concerns are addressed by replacing sensitive information in replays, and the power of session replay in identifying and understanding the sequence of errors is highlighted.

Available in Español

1. Introduction to Replay and Bug Solving

Short description:

This talk is an introduction to a new tool called Replay. It is a developer-focused tool that helps you solve problems faster. The problem is bugs, and the workshop will describe what a replay is and demonstrate how it works. There will be a live demo and documentation available for setting it up on your website. The bug example shown is a real bug that is difficult to solve without additional tools. The stack trace provides valuable information about the error.

But anyway, my name is Ryan Albrecht. I work at Century as a lead front-end engineer on our session replay product. And so this talk or workshop is about how to solve 100% of your errors and root cause your issues faster. Basically it's an introduction. But if there's one thing you learn today, it's that there's a new tool available called Replay. There's a bunch of companies that make the same kind of tool, but ours is one of the only ones that is sort of developer focused and something that you can add to your toolbox in order to actually solve problems faster. So that's the whole gist of the talk. If you get anything out of this, it's that this thing exists and I hope you look into it more.

What I want to do is tell you about it and get you excited. So what we're going to talk about is the problem, which is just bugs, and then describe what is a replay. And then I want to show you actually how it works for real. So there will be a live demo. Not going to be so much code, but because there was a question, I want to show you guys the documentation. So we'll just put that up here. If you want to set this up on your website, you can go to the docs and there are links in the discord, I believe. And all you have to do is copy-paste this kind of a thing. So this is probably the only code that we need to see. And the rest is just using the tool and getting some value out of it. So the docs are there, links are there, you guys can ask more questions later. But I just want to show this so you have some context.

Okay, so what is the problem? The problem is bugs. You will never solve all of your bugs, but they do exist and we have to solve the most important ones. So this is a bug, it's a real bug that I think I solved. I probably solved it. But just looking at it the way it is, it's pretty impossible to actually do anything with this. We can see at the top it says S printf expecting number but found array. So this is and this is the only useful part in this full page here. It's a minified JavaScript stack trace. Which means it's a snapshot in time where something happened, something unexpected happened. And the JavaScript threw an error.

2. Introduction to Bug Solving

Short description:

This is the basics of bugs in JavaScript. We often have a stack trace, but it's still difficult to solve the bug. We expect a number but found an array inside message formatter. We don't know the array's origin or the user experience. It's not great.

And this is sort of like where we're starting from when we when we think about bugs in JavaScript and think about what do we need to do to solve them? This is this is the basics, and it's basically impossible. Sometimes you say okay, that's great, we have a stack trace, wouldn't it be great if it was a ticket? Somebody could put it into our our JIRA or something like that. If they do that, you might get like an unobfuscated stack trace. So here's one that's a little bit more readable. We can see that there's like error boundary.tsx is here, message formatter.tsx. So that makes this stack trace a little bit easier to read. But it's actually still very, very difficult to solve this bug. We're expecting a number, we found an array, it's happening inside message formatter. It happened once anyway. It could have happened many times. I don't know what the array was. I don't know where it came from. I could put an if statement in there and just be like, if is array, stop doing what you're doing. That'll prevent this bug from happening. But I don't know what the user experience is going to be. It's not great. This is where we're coming from.

Watch more workshops on topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Monitoring 101 for React Developers
React Advanced Conference 2023React Advanced Conference 2023
112 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Live Coding Workshop to Setup Rollbar Error Monitoring
TypeScript Congress 2023TypeScript Congress 2023
48 min
Live Coding Workshop to Setup Rollbar Error Monitoring
WorkshopFree
Nico Krüger
Nico Krüger
During this session you will learn how to create a new Rollbar account and integrate the Rollbar SDK with your application to monitor errors in real-time and respond and fix those errors. We will also cover how to customize payload data sent to Rollbar to extend your monitoring capabilities.

Agenda:- Create a Rollbar Account (Free Account)- Integrate your application with the Rollbar SDK- Send handled and unhandled errors to Rollbar- Add Custom payload data to your configuration.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Rome, a Modern Toolchain!
JSNation 2023JSNation 2023
31 min
Rome, a Modern Toolchain!
Top Content
Modern JavaScript projects come in many shapes: websites, web applications, desktop apps, mobile apps, and more. For most of them, the common denominator is the technical debt that comes from settings up tools: bundlers, testing suite, code analysis, documentation, etc. I want to present you Rome, a toolchain that aims to be a all-in-one toolchain for the web, with one single tool you can maintain the health of all your projects!
Mastering Error Handling Node.js
Node Congress 2022Node Congress 2022
21 min
Mastering Error Handling Node.js
Errors happen to every programmer. Devs have different choices: suppress it, notify the user, report to the team, ignore it or write code to handle the error.
In this talk, you will learn all the important aspects of the Node.js error system, the types of errors, different ways to deliver an error, and patterns to improve error handling - with examples!
Debugging with Chrome DevTools
JSNation Live 2021JSNation Live 2021
11 min
Debugging with Chrome DevTools
Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools.