DEV Community

Alex Spinov
Alex Spinov

Posted on

Sentry Has a Free Error Tracking Platform With Features Most Developers Never Use

#sentry #errortracking #monitoring #webdev

Most developers use Sentry for error alerts. But Sentry also does performance monitoring, session replay, profiling, and cron monitoring — all in the free tier.

Free Tier

  • 5K errors/month
  • 10K performance transactions/month
  • 500 session replays/month
  • 1 cron monitor
  • Unlimited team members

Setup (React) 

npm install @sentry/react
Enter fullscreen mode Exit fullscreen mode 
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "https://your-dsn@sentry.io/project",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 0.1,      // 10% of transactions
  replaysSessionSampleRate: 0.1, // 10% of sessions
  replaysOnErrorSampleRate: 1.0, // 100% of error sessions
});
Enter fullscreen mode Exit fullscreen mode

Beyond Basic Error Tracking

1. Performance Monitoring 

// Automatic — tracks page loads, API calls, DB queries
// Custom spans
const transaction = Sentry.startTransaction({ name: "processOrder" });
const span = transaction.startChild({ op: "db.query", description: "SELECT users" });
await db.query("SELECT * FROM users");
span.finish();
transaction.finish();
Enter fullscreen mode Exit fullscreen mode

See which API endpoints are slow, which DB queries take too long.

2. Session Replay

Watch what users did before the error:

  • Mouse movements
  • Clicks
  • Page navigations
  • Network requests
  • Console logs

All with privacy masking for sensitive inputs.

3. Cron Monitoring 

// Monitor your scheduled jobs
const checkInId = Sentry.captureCheckIn({
  monitorSlug: "daily-cleanup",
  status: "in_progress",
});

try {
  await runCleanup();
  Sentry.captureCheckIn({ checkInId, monitorSlug: "daily-cleanup", status: "ok" });
} catch (e) {
  Sentry.captureCheckIn({ checkInId, monitorSlug: "daily-cleanup", status: "error" });
}
Enter fullscreen mode Exit fullscreen mode

Get alerted when cron jobs fail or miss their schedule.

4. Profiling 

Sentry.init({
  dsn: "...",
  profilesSampleRate: 0.1, // Profile 10% of transactions
});
Enter fullscreen mode Exit fullscreen mode

See flamegraphs of your production code — find exactly which function is slow.

5. User Feedback 

Sentry.showReportDialog({
  eventId: Sentry.lastEventId(),
  title: "Something went wrong",
  subtitle: "Help us fix this by telling us what happened.",
});
Enter fullscreen mode Exit fullscreen mode

Context Enrichment 

// Add user context
Sentry.setUser({ id: "123", email: "alice@test.com", plan: "premium" });

// Add custom tags
Sentry.setTag("feature", "checkout");
Sentry.setTag("api_version", "v2");

// Add breadcrumbs (trail of events before error)
Sentry.addBreadcrumb({
  category: "ui",
  message: "User clicked checkout button",
  level: "info",
});

// Extra context
Sentry.setContext("order", {
  orderId: "456",
  items: 3,
  total: 99.99,
});
Enter fullscreen mode Exit fullscreen mode

Error Boundary (React) 

import * as Sentry from "@sentry/react";

function App() {
  return (
    <Sentry.ErrorBoundary
      fallback={({ error, resetError }) => (
        <div>
          <h2>Something went wrong</h2>
          <p>{error.message}</p>
          <button onClick={resetError}>Try again</button>
        </div>
      )}
    >
      <MyApp />
    </Sentry.ErrorBoundary>
  );
}
Enter fullscreen mode Exit fullscreen mode

Need error tracking or monitoring tools? I build developer solutions and data pipelines. Email spinov001@gmail.com or check my Apify tools.

Top comments (0)