This is the message I never want to send but end up sending way too often. And the answer? Well, the answer is usually, “Sorry, this is all we have,” or even worse, “We’ll need to get in touch with the customer and jump on a call”. In either case, I know I need to buckle up for an unreasonable amount of work. Combing through 100s of logs for a back-end issue or rage clicking for hours cannot be the best we can do here.
After today, I’m done wasting time on this. As I look at all of this through the rearview mirror, please take a front row seat with me as I explain one of the most wonderful features ever made: Session Replay.
How to fix this in 5 minutes
While this is a hard problem, the solution is extremely low effort.
I wish somebody told me this, because in my head I was making it way too big.
One day I was struggling to trace an error for hours, and for the life of me, I could not figure out what was going on by looking at the logs. I even had the steps to reproduce, but for the life of me couldn’t find the problem. Instead of zooming out, I was going deeper and deeper and becoming more frustrated (as a dev, this probably sounds familiar).
As a Hail Mary, I decided to add Sentry to my project and see if it did anything at all. I was resistant. Will I spend 1 hour installing a tool that doesn’t get me further?
I had to try. Luckily, adding it to my application was a one-liner thanks to the wizard. A nice CLI always gets the best of me, and I have to admit this was one of the best onboarding DX I’ve seen in a long while.
Installing Sentry using the Next.js SDK Wizard
Long story short, as soon as I pushed the setup and tried to reproduce that particular error, I got all the breadcrumbs that led to it, including the exact line that triggered the issue and managed to fix it in minutes.
It felt like magic to get this without any custom setup. A bit too good to be true, and I wasn’t even experiencing the best part of it.
Unbeknownst to me, this also set up Session Replay. I didn’t think much of it at the time, until one fateful day…
The error, the email and the immediate fix
About one week later, the infamous email chime blasts through my speakers: “Request failed with status code 404”.
As you might expect, I didn’t have a clue what caused this. The product in question was Shipixen and it just so happened that it used this API endpoint in a few dozen places across the desktop app, the web, the documentation site, templates public page and other example pages.
I genuinely had no idea where to look to find the root cause for this.
So, as I saw the entire day slipping through my fingers while debugging, I became intrigued by a particular section of the email. “See a replay of the issue,” it said.
An email from Sentry containing a "Session replay" section
I pressed it, and my eyes couldn’t believe it!
How Session Replay saved the day
As I mentioned, I wasn’t sure I even enabled this and what it does exactly.
If you are like me, here’s the executive summary: Session Replay is a feature of Sentry that records and replays all user interactions on web app and/or website. It captures all user actions, including page visits, mouse movements, clicks, and scrolls, and even network logs during that time. The result is a video-like reproduction of user interactions just before the error happened.
After I open it up, I see a full preview of the entire user interface, console, clicks, mouse movements. Everything! Check this out:
Session Replay showing mouse movements, the error in the UI and in the console.
I can’t explain how valuable this recording was.
☝️ Sentry’s Session Replay feature is also available on mobile SDK, so if you’re developing iOS or Android apps you’ll also get the same in your native apps!
Some of the supported Session Replay platforms, see all here.
Just by glancing at it, I could immediately tell where the error happened. Turns out it was in one of the templates, and the brilliant part about it was I could visually identify which template and in which section the error occurred.
Truthfully, I didn’t even need to watch it. Sentry seems to have done an automatic AI replay summary for me?!
An example of an AI Replay Summary done automatically when opening the Session Replay.
Allow me a second to get sentimental for a second here. I just LOVE it when AI is used to enhance a product and is not twisting a product beyond recognition and simplifying it to a chat box.
So I thought: yet again, Sentry managed to solve what I thought would take hours in just minutes. Obviously, I needed to write the bug fix now.
Or so I thought.
Check out what happened next.
Bugs are not what they used to be
I’ll be honest, I was already satisfied with what I got so far. I knew where the error happened and how, so now I need to look into the code and see what could be a reasonable fix.
But what if I didn’t have to even do that?
To the right an enticing button was staring right at me: “Start Analysis”. Would you not click it if you were me?!
Sentry Seer Start Analysis button as part of Seer to the right-hand side of an issue view
The next part was straight out of a sci-fi movie, so I will try to contain my excitement being the nerd that I am.
Apparently, Session Replays can be used as context to root cause analysis too. Which just blew my mind. Obviously, with all of this how could it not absolutely nail the root cause analysis?
Seer shown including Session Replay, Error, Spans and relevant code as "Evidence"
Without even thinking twice, I press “Write a code fix”. It proposes changes across front-end and back-end which look legitimate, and then I am left with no other choice but to press:
“Draft PR”.
I am struggling not to be over the top here. But just recalling this experience genuinely puts a smile on my face. This has been such a delightful and thoughtful experience, from that mail to the drafter, that I just can’t say it any other way.
Please, you have to try it, you won’t believe it until you do.
Drafting a PR
Viewing PR in Github
The multiple benefits of Session Replay
One of the best parts of Session Replay is you don’t need to go through a plethora of manual steps to get it to work properly.
The effort required to turn this on compared to the benefit is a no-brainer. You only need to add the integration to your config, and you’re good to go. There are also a few options to control sampling rates, privacy settings, etc.
Once this is done, you’ll unlock several benefits for your product:
Easy issue reproduction
Understanding origin of report
Proactive support
Debugging with network traces
Enhanced context for AI / Seer to give you a better root cause analysis
Plus, fantastic user experience insights!
Let’s unpack these.
These combined eliminate the need for the reporter to create a screen recording and attach it to your project management software of choice. Usually time-consuming and, depending on who creates the issue, it will likely miss debug information necessary to pinpoint the issue. So it also eliminates the back and forth with the reporter.
The great thing about it? The more complex the system, the more valuable this is. For some low-level APIs, it could take hours of work to find that a button somewhere in the UI has caused a crash. Since Sentry tracks errors from Front-end to Back-end, the Session Replay will show you exactly what UI interaction caused the exception.
That’s not all, one of the best things about it is the insights on user experience. Don’t sleep on using Session Replay to improve UX!
Here’s why.
The impact of Sentry Session Replay on user experience
Session Replay showing potential UX issues in an app
After spending some more quality time with Session Replay, I’ve realized it comes with a huge bonus: UX insights!
Seeing a customer struggle with a certain part of the UI and proactively reaching out will turn a user into a fan. A Session Replay gives you the opportunity to wow your customers in a way they’ve never thought possible.
We try to put ourselves in the shoes of our customers, but we need to always remind ourselves: “You are not the user.” So what could be better than actually seeing how people interact with your product?
Let me tell you about something that happened that blew me away.
Just a couple of weeks ago, I got a Session Replay of a bug that prevented an update. This was pretty frustrating, as the user would lose their changes too.
I started to look into it immediately and managed to catch the issue. As I was committing the change, I got an email from a less-than-happy customer:
✉️ Support request: Can’t save pricing configuration
Can you even imagine the reaction this customer had when 10 minutes later I replied:
↪️ We have identified the issue and it’s now been fixed. Please let us know if we can help with anything else!
Sending this mail alone & the reaction that followed is a feeling that neither you nor your customer will forget. The fact is, most users won’t spend the time to report an issue. Some of them will even get frustrated and move on to a competitor. And you’ll never know!
I could have had this bug for months and lost quite a few customers just because I was flying blind.
All this put together sounds like magic, because I think it probably is.
On user feedback
One more important thing I’ve learned building products: if you don’t make it easy, people won’t do it.
The best thing you can do for yourself and your product is to have a clear, easy to use Feedback/Report button prominently shown across your website, app, docs and everything in between.
Because of what I mentioned above, you want this to be as easy as possible. Most people won’t go through the trouble otherwise. This type of feedback will be invaluable, especially in the growth stages of your product, but it will also help you prioritize features and bug fixes as soon as you launch.
Of course, with Sentry, that’s just another integration. At this point, they’ve been ticking so many boxes I expect them to also handle my payments.
Feedback widget example
If you already use Sentry, turn that on today.
Never ship to production without Sentry
I’ve said this before, and I mean it with all my heart.
If you go into production without Sentry, you are missing out, and your customers are pulling the short stick. I just can’t imagine maintaining good quality, great support, and performance without it. Especially when your resources are limited.
We often imagine that users who see errors in our application will immediately send a support message. As developers, we’d also find it reasonable for them to include attachments detailing the issue, perhaps a video too?
In reality, most people will shrug and go on with their day, and you won’t hear about the issue for weeks or even months. And when they shrug, they might just check out a competitor to see how stable it is instead.
That’s one of my worst nightmares. The stuff that keeps me up at night.
I’ll be completely honest. The day I got the email with the Session Replay and found out immediately what went wrong in the UI, well, I slept like a baby.
More code is shipping faster than ever, and most of it is no longer written by people. The speed is the story everyone tells. What matters more is what happens after the code ships, where software is starting to notice it is broken, understand why, and write the fix itself.
We trained and deployed a new issue grouping model that prevents 20% more duplicate issues, halves incorrect merges, and makes future model upgrades trivial.
