DEV Community

Cover image for Monitoring Tools for React Apps — Which One Do You Actually Need?
Kushang Tailor
Kushang Tailor

Posted on

Monitoring Tools for React Apps — Which One Do You Actually Need?

#react #javascript #monitoring #nextjs

Read Time: ~14 minutes | A practical guide to the tools that tell you your app is on fire — before your users do

This article is a bonus companion to the React Mastery Series. You don't need to have read the series — it stands on its own.

📌 What You'll Learn

  • ✅ The three categories of monitoring (and why all three matter)
  • ✅ Honest comparison of 7 popular monitoring tools
  • ✅ Full Sentry + Vercel Analytics setup walkthrough
  • ✅ LogRocket, Datadog, New Relic, Bugsnag, and FullStory — when each makes sense
  • ✅ Stack recommendations by team size
  • ✅ A decision framework that actually helps you choose

🔥 The Problem with Shipping Blind

Here's a scenario that's more common than anyone admits.

You ship a new feature on Friday afternoon. Users start hitting it. Somewhere in that flow — a race condition, a missing null check, a third-party API returning an unexpected shape — something breaks. Users see a white screen. Or worse, a silent failure where data just stops saving.

You find out Monday morning. From an email. Sent by your most patient user.

That's what shipping without monitoring looks like. The good news: it's a solved problem. The honest news: there are seven popular tools that claim to solve it, and picking the wrong one wastes setup time and money.

This article cuts through the noise.

🏗️ The Three Categories of Monitoring

Before comparing tools, it's worth understanding that "monitoring" isn't one thing. It covers three distinct problems:

1. Error Monitoring

The question it answers: What broke, where exactly, and for whom?

When a user hits an unhandled exception, an API call crashes, or a component throws during render — error monitoring captures the full context: stack trace, browser, OS, user identity, and the sequence of events that led to the crash.

Without this, you're debugging from a vague user description. With it, you open a dashboard and see the exact file, line, and call stack.

2. Performance Monitoring

The question it answers: How fast is my app, and where is it slow?

This tracks real user experience — how long pages take to load, how quickly API routes respond, and how your Core Web Vitals (LCP, FID, CLS) look across different devices and regions.

A component that renders in 80ms on your MacBook Pro can take 400ms on a mid-range Android device in India. Performance monitoring shows you the real picture, not the one you see on your dev machine.

3. Session Replay

The question it answers: What was the user actually doing when things went wrong?

This records a video-like reconstruction of the user's session — every click, scroll, input, and network request — leading up to the moment something broke. Instead of reproducing a bug through guesswork, you watch it happen.

🛠️ The 7 Tools — Deep Dive

1. Sentry

Category: Error + Performance + Session Replay
Best for: Most React and Next.js apps
Free tier: 5,000 errors/month — generous enough for many side projects

Sentry is the default choice for good reason. One SDK covers all three monitoring categories, the Next.js integration is first-class, and the setup is handled mostly by a wizard in a single command.

What makes it stand out: The concept of breadcrumbs. Before an error lands in your Sentry dashboard, you see the full sequence of what happened — which API calls fired, which buttons the user clicked, which console messages appeared. It's like having a black box recorder in your app.

npm install @sentry/nextjs
npx @sentry/wizard@latest -i nextjs
Enter fullscreen mode Exit fullscreen mode

This generates three config files automatically. Your .env.local needs one variable:

NEXT_PUBLIC_SENTRY_DSN=https://your-key@sentry.io/project-id
Enter fullscreen mode Exit fullscreen mode

Capturing context with errors:

import * as Sentry from '@sentry/nextjs';

// Add user context once — all future errors are attributed to this user
Sentry.setUser({ id: user.id, email: user.email });

// Capture exceptions with tags for filtering
try {
  await processOrder(orderId);
} catch (error) {
  Sentry.captureException(error, {
    tags: { module: 'checkout', action: 'processOrder' },
    extra: { orderId },
  });
  throw error; // Always re-throw — don't swallow errors silently
}
Enter fullscreen mode Exit fullscreen mode

Session Replay config (from sentry.client.config.ts):

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1,           // Sample 10% of requests for performance
  replaysSessionSampleRate: 0.05,  // Record 5% of all sessions
  replaysOnErrorSampleRate: 1.0,   // Always record when an error occurs
  integrations: [Sentry.replayIntegration()],
});
Enter fullscreen mode Exit fullscreen mode

The replaysOnErrorSampleRate: 1.0 line is the most valuable one. Every single error comes with a replay. You watch the bug happen, you fix it, you close the ticket.

Verdict: Start here. It's not glamorous advice, but it's the right one.

2. Vercel Analytics

Category: Performance Monitoring
Best for: Any app deployed on Vercel
Free tier: ✅ Completely free on hobby plans

If you deploy on Vercel, this is the easiest performance win you'll ever get. No SDK to install, no configuration file, no API key. Enable it in the Vercel dashboard and it starts tracking Core Web Vitals for real users immediately.

npm install @vercel/analytics
Enter fullscreen mode Exit fullscreen mode 
// app/layout.tsx — that's literally the entire setup
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}
Enter fullscreen mode Exit fullscreen mode

What you get:

  • Real user LCP, FID, and CLS scores per page
  • Breakdown by country, device type, and browser
  • Score over time (did your last deploy make things faster or slower?)
  • No sampling — every page view is counted

What you don't get: Error monitoring, session replay, or backend performance data. It's a performance-only tool.

Verdict: Add this in 5 minutes if you're on Vercel. It pairs perfectly with Sentry.

3. LogRocket

Category: Session Replay (primary) + Error Monitoring
Best for: Teams who want the deepest possible understanding of user behaviour
Free tier: 1,000 sessions/month

LogRocket is what you reach for when Sentry's session replay isn't quite enough context. Where Sentry replays the visual session, LogRocket records everything:

  • Every Redux/Zustand action dispatched
  • Every network request and response (with payloads)
  • Every console log, warning, and error
  • Every DOM mutation
  • Mouse movements, rage clicks, and dead clicks

The replay experience in LogRocket is closer to watching a movie than a wireframe reconstruction. You see pixel-perfect what the user saw.

npm install logrocket logrocket-react
Enter fullscreen mode Exit fullscreen mode 
// app/providers.tsx
'use client';
import LogRocket from 'logrocket';
import setupLogRocketReact from 'logrocket-react';
import { useEffect } from 'react';

export function LogRocketProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    LogRocket.init('your-app-id/project-name');
    setupLogRocketReact(LogRocket);
  }, []);

  return <>{children}</>;
}

// Identify users after login
LogRocket.identify(user.id, {
  name: user.name,
  email: user.email,
  plan: user.subscriptionTier,
});
Enter fullscreen mode Exit fullscreen mode

Where LogRocket earns its keep: You have a bug that users report but you can't reproduce. You pull up their specific session in LogRocket and watch exactly what they did, what the API returned, and what state looked like when it broke. The reproduction step disappears entirely.

Where it's overkill: Small teams, early-stage apps, internal tools. The free tier is limited and the paid plans can add up.

Verdict: Use it when Sentry replay gives you the what but you still need the why.

4. Datadog

Category: Error + Performance + Infrastructure + Logs
Best for: Larger teams, microservices, or when you need one dashboard for everything
Free tier: ❌ No meaningful free tier — starts at ~$15/host/month

Datadog is where monitoring goes when your app grows into infrastructure. It's not primarily a React tool — it monitors servers, databases, containers, queues, and services alongside your frontend. When a slow API route is caused by a slow database query on an overloaded server, Datadog connects all of those dots in one place.

// Instrumenting custom metrics from Next.js API routes
import tracer from 'dd-trace';
tracer.init({ service: 'my-nextjs-app', env: process.env.NODE_ENV });

// app/api/orders/route.ts
export async function POST(request: NextRequest) {
  const span = tracer.startSpan('create.order');

  try {
    const order = await db.orders.create({ data: await request.json() });
    span.finish();
    return NextResponse.json(order, { status: 201 });
  } catch (error) {
    span.setTag('error', true);
    span.finish();
    throw error;
  }
}
Enter fullscreen mode Exit fullscreen mode

The real power is distributed tracing — a single user action that touches three microservices shows up as one connected trace, so you can see which service introduced the latency.

Where Datadog earns its place: You have a dedicated DevOps or platform team. You're running on Kubernetes. You need compliance-grade log retention. Your on-call rotation needs a single pane of glass.

Where it's wrong: Solo developers, early-stage products, anything on Vercel that Vercel Analytics already covers. The learning curve and cost are both real.

Verdict: Right tool, wrong time — until your infrastructure complexity demands it.

5. New Relic

Category: Performance + Error + Infrastructure
Best for: Full-stack performance monitoring across backend and frontend
Free tier: ✅ 100GB/month data ingest — surprisingly generous

New Relic sits between Sentry and Datadog in the complexity spectrum. It does frontend error monitoring, backend performance tracing, and infrastructure monitoring — but with a gentler learning curve than Datadog and a real free tier.

npm install newrelic @newrelic/next
Enter fullscreen mode Exit fullscreen mode 
// next.config.js
const withNewRelic = require('@newrelic/next');

module.exports = withNewRelic({
  // your existing Next.js config
});
Enter fullscreen mode Exit fullscreen mode

New Relic's strongest feature is browser agent performance monitoring — it captures real user timing data (not just Lighthouse scores) and shows you where time is actually spent: DNS lookup, connection, first byte, DOM processing, and so on. For apps with complex rendering pipelines, that level of detail is invaluable.

Verdict: Worth evaluating if you need backend performance tracing but find Datadog's pricing hard to justify. The free tier is real and usable.

6. Bugsnag

Category: Error Monitoring
Best for: Teams who want Sentry's core feature set with a simpler interface
Free tier: 7,500 errors/month

Bugsnag does one thing and does it well: error monitoring. No session replay, no performance dashboards, no infrastructure metrics. Just clean, well-organised error tracking with good grouping, filtering, and alerting.

npm install @bugsnag/js @bugsnag/plugin-react
Enter fullscreen mode Exit fullscreen mode 
// app/providers.tsx
'use client';
import Bugsnag from '@bugsnag/js';
import BugsnagPluginReact from '@bugsnag/plugin-react';
import { useEffect } from 'react';

Bugsnag.start({
  apiKey: process.env.NEXT_PUBLIC_BUGSNAG_API_KEY!,
  plugins: [new BugsnagPluginReact()],
});

const ErrorBoundary = Bugsnag.getPlugin('react')!.createErrorBoundary(React);

export function BugsnagProvider({ children }: { children: React.ReactNode }) {
  return <ErrorBoundary>{children}</ErrorBoundary>;
}
Enter fullscreen mode Exit fullscreen mode

Where Bugsnag wins: Some developers genuinely find Sentry's dashboard overwhelming — too many features, too many options. Bugsnag is focused and clean. If your team's goal is simply "know when errors happen and who's affected", Bugsnag delivers that without distraction.

Verdict: A genuine Sentry alternative — pick whichever dashboard your team actually opens.

7. FullStory

Category: Session Replay + UX Analytics
Best for: Product and UX teams at scale
Free tier: ❌ Paid only (free trial available)

FullStory is the enterprise session replay tool. Where LogRocket focuses on the developer experience (stack traces, network calls, console logs), FullStory focuses on the product experience — funnel analysis, rage click heatmaps, frustration signals, and quantitative UX insights.

It answers questions like: "What percentage of users who reach step 3 of our checkout abandon it, and what are they doing right before they leave?" That's a product analytics question, not a debugging question. FullStory is built for it.

For most development teams, it's outside the scope of what monitoring means. But for product-focused companies where user behaviour data directly drives roadmap decisions, it's the right tool.

Verdict: Powerful, but it's a product analytics tool more than a developer monitoring tool. Worth knowing about — not where you start.

📊 Side-by-Side Comparison

Tool Errors Performance Session Replay Free Tier Best Starting Point
Sentry ✅ ✅ ✅ ✅ Generous Solo to mid-size teams
Vercel Analytics ❌ ✅ ❌ ✅ Free Any Vercel deployment
LogRocket ✅ ✅ ✅ Deep ✅ Limited Teams debugging UX issues
Datadog ✅ ✅ ❌ ❌ Paid Multi-service / enterprise
New Relic ✅ ✅ ❌ ✅ 100GB Full-stack perf focus
Bugsnag ✅ ❌ ❌ ✅ 7.5k errors Teams wanting simplicity
FullStory ❌ ❌ ✅ Deep ❌ Trial Product/UX teams at scale

🗺️ The Decision Framework

Stop reading comparison tables and ask yourself two questions:

Question 1: What's your app's biggest risk right now?

"I need to know when errors happen"
└─→ Sentry or Bugsnag

"I need to know if my app is slow for real users"
└─→ Vercel Analytics + Sentry Performance

"I need to watch what users do when things break"
└─→ Sentry (Session Replay) or LogRocket

"I need to monitor servers, queues, and services together"
└─→ Datadog or New Relic
Enter fullscreen mode Exit fullscreen mode

Question 2: What's your team size?

Solo developer or side project
└─→ Sentry free tier + Vercel Analytics. Done.

Small team (2–10 engineers)
└─→ Sentry + Vercel Analytics. Add LogRocket if UX debugging is painful.

Mid-size team (10–50 engineers)
└─→ Sentry + Vercel Analytics + LogRocket or New Relic depending on backend complexity.

Large team / enterprise
└─→ Datadog (or Datadog + Sentry). Add FullStory if product analytics is a priority.
Enter fullscreen mode Exit fullscreen mode

🏆 Recommended Stacks by Scenario

The Indie Developer / Side Project Stack 

Sentry (free tier) — errors, perf, session replay
Vercel Analytics (free) — Core Web Vitals

Total cost: $0
Setup time: ~30 minutes
Coverage: everything you actually need at this stage
Enter fullscreen mode Exit fullscreen mode

The Early-Stage Startup Stack 

Sentry Team plan — error monitoring + performance + replay
Vercel Analytics — real user page speed
LogRocket Startup plan — deep session replay for support and UX

Total cost: ~$100–200/month depending on traffic
Setup time: ~2 hours
Coverage: full observability stack
Enter fullscreen mode Exit fullscreen mode

The Scaled Production Stack 

Datadog — infrastructure, APM, logs, dashboards, alerting
Sentry — error monitoring (Datadog's error experience isn't as polished)
FullStory — user behaviour analytics for product team

Total cost: varies by scale
Setup time: 1–2 days for full integration
Coverage: enterprise-grade observability
Enter fullscreen mode Exit fullscreen mode

⚡ The 30-Minute Setup (Sentry + Vercel Analytics)

If you want to go from zero monitoring to production-ready coverage right now, here's exactly what to do.

Step 1 — Sentry setup (15 minutes)

npm install @sentry/nextjs
npx @sentry/wizard@latest -i nextjs
Enter fullscreen mode Exit fullscreen mode

Add your DSN to .env.local:

NEXT_PUBLIC_SENTRY_DSN=your-dsn-from-sentry-dashboard
Enter fullscreen mode Exit fullscreen mode

Update sentry.client.config.ts to enable replay:

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1,
  replaysSessionSampleRate: 0.05,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.replayIntegration()],
});
Enter fullscreen mode Exit fullscreen mode

Step 2 — Identify users after login (5 minutes)

// Call this once after successful authentication
import * as Sentry from '@sentry/nextjs';

function onAuthSuccess(user: User) {
  Sentry.setUser({
    id: user.id,
    email: user.email,
  });
}
Enter fullscreen mode Exit fullscreen mode

Step 3 — Vercel Analytics (5 minutes)

npm install @vercel/analytics
Enter fullscreen mode Exit fullscreen mode 
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Enable it in the Vercel dashboard: Project → Analytics → Enable.

Step 4 — Set up one alert (5 minutes)

In Sentry: Alerts → Create Alert → Issue Alert → "First seen" trigger → send to your email or Slack. Now you get notified the moment a new error type appears in production.

That's it. You're monitored.

💡 Final Thoughts: Start Simple, Evolve With Your App

The most common monitoring mistake isn't choosing the wrong tool — it's not having any monitoring at all because the choice felt overwhelming.

Pick Sentry. Add Vercel Analytics. Configure one alert. You now know more about what's happening in your production app than 60% of teams shipping React today.

When your scale demands more, you'll know — because Sentry will show you exactly where your current setup is falling short.

Observability isn't a destination. It's a habit you build incrementally.

🔗 Quick Links

💬 What's Your Stack?

Which monitoring tool does your team use in production — and is there one that surprised you with how good (or painful) it was? Drop it in the comments. Real team experiences are always more useful than comparison tables.

This article is a bonus companion to the React Mastery Series — a complete six-part guide from React fundamentals to production engineering. Read the full series here.

Top comments (0)