How to Monitor Frontend Errors Like a Backend Pro
#sentry#observability#frontend#javascript
Sachin Kasana

Sachin Kasana @sachinkasana

About: Principal Engineer by day, DevTools builder by night 🌙 | Love working with Node.js, React & AI | Sharing insights on clean code, performance, and web development. https://json-formatter-dev.vercel.ap

Location:
india
Joined:
Jun 30, 2022

How to Monitor Frontend Errors Like a Backend Pro

Publish Date: Apr 27
0 0

Seen this before? 👇

“Everything works on my machine.”

But when your app goes live… suddenly the “Add to Cart” button doesn’t work , or worse — clicking it just does nothing. You open the console, hoping for a clue… but there’s nothing.

No stack trace. No warning. Just silence.

It’s the frontend developer’s version of a horror movie. 👻

Let’s fix that — once and for all.

🧨 The Problem

Backend engineers live in luxury: logs, structured data, alerts, dashboards, and APMs.

Frontend engineers?

We mostly rely on console.log() and vibes.

But here’s the reality:

  • Frontend bugs are often harder to reproduce
  • They vary by browser, device, network, and even country
  • And users never report them  — they just leave your app silently

Which means: if you’re not monitoring frontend errors, you’re basically flying blind. ✈️

🚨 A Real-Life Scenario

Let’s say you build a React checkout page:

try {
  await submitPayment();
} catch (err) {
  console.error(err);
}
Enter fullscreen mode Exit fullscreen mode

That’s fine locally. But what if:

  • A CDN script failed to load?
  • A user’s browser is 3 years old and lacks fetch()?
  • They’re on a flaky connection and the API times out?

👉 You’ll never know. There’s no trace. And no user ever says “hey I got an exception on line 27.”

That’s where Sentry comes in.

🛠️ What is Sentry?

Sentry is like backend-style observability , but for your frontend.

It tracks:

  • Uncaught exceptions
  • Stack traces
  • Network issues
  • Which users were affected
  • Even the exact line of source code (with sourcemaps)

Oh, and it’s free for most use cases. 🙏

⚙️ Let’s Set It Up (It’s Easy)

Install it:

npm install @sentry/react @sentry/tracing

Now in your main.tsx or App.tsx:

import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';

Sentry.init({
  dsn: 'https://your-dsn-id@sentry.io/project-id',
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
  release: 'my-app@1.2.3',
  environment: 'production',
});
Enter fullscreen mode Exit fullscreen mode

That’s it. It’s now watching for any unhandled exceptions.

📬 Let’s Add User Context

Now let’s go pro — add user info so you can trace issues to real sessions:

Sentry.setUser({
  id: 'user-123',
  email: 'dev@example.com',
});
Enter fullscreen mode Exit fullscreen mode

You can also attach metadata:

Sentry.setContext('device', {
  browser: navigator.userAgent,
  connection: navigator.onLine ? 'online' : 'offline',
});
Enter fullscreen mode Exit fullscreen mode

So now, when a bug happens, you know:

  • Which user saw it
  • Their browser + device
  • What action they were doing
  • And… which commit introduced it (if you use release)

🎯 Goldmine for debugging.

⚡ Real-Time Error Logging

Got an async API call?

try {
  await fetchData();
} catch (err) {
  Sentry.captureException(err);
}
Enter fullscreen mode Exit fullscreen mode

Or a manual log for weird behavior?

Sentry.captureMessage('Checkout clicked without items in cart');
Enter fullscreen mode Exit fullscreen mode

You’ll see that message live in your Sentry dashboard — with stack trace and metadata.

🧩 Let’s Build a Simple Logging Helper

Want to log events but fallback to console.log() in dev?

export const logEvent = (message: string, extra = {}) => {
  if (process.env.NODE_ENV === 'production') {
    Sentry.captureMessage(message, {
      level: 'info',
      extra,
    });
  } else {
    console.log('[LOG]', message, extra);
  }
};
Enter fullscreen mode Exit fullscreen mode

Now use:

logEvent('User clicked payment', { cartId: 'xyz', total: 499 });
Enter fullscreen mode Exit fullscreen mode

Clean and centralized 💡

🧠 Bonus: Release Tracking + Sourcemaps

You can link Sentry to your GitHub + CI pipeline.

This way, you’ll get:

  • Which commit broke the build
  • Which deployment caused the error
  • Full readable stack traces (not minified app.js:1321)

Now you debug in seconds , not hours.

📊 Your New Secret Weapon: The Sentry Dashboard

Once deployed, check your dashboard:

  • 🔥 Top 5 errors (and how many users hit them)
  • 🧭 Breadcrumbs (user clicks before the error)
  • 🌍 Environment info (browser, OS, etc.)
  • 🧵 Stack trace with source maps

And yes — you can set alerts in Slack, Discord, or Email.

🤖 Alternative Tools?

alternate options for logging

✅ Conclusion

Most frontend bugs don’t show up in dev.

They show up when:

  • A user’s network drops
  • An edge case API response fails
  • Some 2017 Android phone can’t parse your JS

And your users?

They won’t report it.

So monitor your frontend like a backend pro.

✅ Add Sentry

✅ Add user context

✅ Add custom logs

✅ Sleep better 😴

📣 Want a part 2?

Drop a comment if you’d like me to cover:

  • 🌐 React Native + Sentry
  • 🔁 Setting up Slack alerts
  • 📦 Self-hosted Sentry with Docker

Originally published on Medium, sharing here for the DEV community!

IStay tuned 👇

Follow for more dev blogs with real metrics, real code, and zero fluff.

Comments 0 total

    Add comment