How do you debug random browser crashes/glitches in production (Next.js)?
Unanswered
Bobolink posted this in #help-forum
BobolinkOP
Hey everyone,
I'm running a Next.js app on Vercel, and I'm facing an urgent issue. Everything works perfectly in local testing, but some users (mostly on Mac browsers) report that certain pages suddenly start glitching badly, and sometimes the browser tab crashes completely.
The strange part is:
I can't reproduce it locally
Vercel logs show no server errors
After reopening the app, it sometimes works again
So it seems like the issue is happening entirely on the client/browser side.
I'm trying to understand:
How do teams usually monitor frontend errors in production?
Are there any simple or open-source tools that capture browser crashes, JS runtime errors, or user sessions?
What's the best way to debug issues that only happen on real users' machines?
Any suggestions or tools people commonly use would really help. I'm trying to find a reliable way to track down the root cause.
I'm running a Next.js app on Vercel, and I'm facing an urgent issue. Everything works perfectly in local testing, but some users (mostly on Mac browsers) report that certain pages suddenly start glitching badly, and sometimes the browser tab crashes completely.
The strange part is:
I can't reproduce it locally
Vercel logs show no server errors
After reopening the app, it sometimes works again
So it seems like the issue is happening entirely on the client/browser side.
I'm trying to understand:
How do teams usually monitor frontend errors in production?
Are there any simple or open-source tools that capture browser crashes, JS runtime errors, or user sessions?
What's the best way to debug issues that only happen on real users' machines?
Any suggestions or tools people commonly use would really help. I'm trying to find a reliable way to track down the root cause.
18 Replies
Dwarf Hotot
Can you share a live link
BobolinkOP
Yes, this is a common situation. When something works locally but fails for real users, it usually means the issue is happening only in the browser. Since Vercel logs only show server errors, they won’t show client-side crashes.
In production, most teams use frontend error monitoring tools to capture these problems.
In production, most teams use frontend error monitoring tools to capture these problems.
A few popular options are:
Very common for Next.js apps. It captures JavaScript errors, stack traces, browser info, and the exact page where the crash happened. It also records performance issues.
This one records user sessions. You can literally replay what the user did before the crash, which makes debugging much easier.
Open-source analytics with error tracking and session recording. Good if you want a self-hosted option.
Add an error tracking tool like Sentry.
Capture client-side exceptions and browser info.
Record user sessions so you can see what the user clicked before the crash.
Track browser type, OS, and device, which helps find Mac/Safari specific bugs.
Yellow-billed Magpie
Its time to add some otel and some product analytics
You could definitely add posthog with session replay and error tracking and you'd be good to go
this is called RUM, real user monitoring, and its done specifically for the challeneges you are facing.
Its a bit of a rabbithole but its really important to get that setup early to start fixing issues.
If i were you i'd go for posthog
Whooping Crane
Hey Sabaresh, I've faced this issue before, those sporadic client-side crashes that can't be reproduced locally are the hardest to debug .
The above options (Sentry, PostHog, New Relic) are all good ones. I've worked on numerous Next.js apps where we put in:
- Sentry for error tracking and source maps
- PostHog for session replay so we can see exactly what the user did before crashing
- RUM (Real User Monitoring) to catch any Mac/Safari-specific crashes
If you're pressed for time trying to debug the root cause and don't want to deal with getting the monitoring setup for yourself, I'd be happy to help you add one of these. I can take care of the setup so you don't have to.
No pressure, thought I'd offer since I've been there before! Hit me up if you want help.
The above options (Sentry, PostHog, New Relic) are all good ones. I've worked on numerous Next.js apps where we put in:
- Sentry for error tracking and source maps
- PostHog for session replay so we can see exactly what the user did before crashing
- RUM (Real User Monitoring) to catch any Mac/Safari-specific crashes
If you're pressed for time trying to debug the root cause and don't want to deal with getting the monitoring setup for yourself, I'd be happy to help you add one of these. I can take care of the setup so you don't have to.
No pressure, thought I'd offer since I've been there before! Hit me up if you want help.