Error Tracking: How to Catch and Fix Bugs in Production in 2027

Quick answer: To track errors in production, use Sentry (most popular), Rollbar, Bugsnag, or Datadog. Setup: install SDK, configure DSN, enable source maps. Key features: error grouping, stack traces, breadcrumbs, session replay, performance monitoring. Alert on new errors and error rate spikes. Triage: prioritize by frequency × impact. Fix: reproduce locally, apply fix, verify with tests, deploy, confirm resolution. Target: < 1% error rate, < 5 min mean time to detection (MTTD), < 1 hour mean time to resolution (MTTR).[1][3][4]

Production errors are inevitable. The difference between good and great engineering teams is how quickly they detect, diagnose, and fix them. In 2027, with AI-assisted debugging and advanced observability, error tracking has evolved significantly.

Error tracking platforms

Comparison

Choosing a platform

• Startups: Sentry (generous free tier, great DX)
• Enterprise: Datadog (if already using) or Sentry (Business plan)
• Self-hosted: GlitchTip (Sentry-compatible, open source)
• Budget: Highlight.io (free tier includes session replay)[3]

Sentry setup

Installation (Next.js)

npx @sentry/wizard@latest -i nextjs

Configuration

// sentry.client.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1, // 10% of transactions
  replaysSessionSampleRate: 0.1, // 10% of sessions
  replaysOnErrorSampleRate: 1.0, // 100% of error sessions
  environment: process.env.NODE_ENV,
  release: process.env.VERCEL_GIT_COMMIT_SHA,
});

Source maps

Upload source maps for readable stack traces:

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true,
  // Or use Sentry's webpack plugin
};

What Sentry captures

• Errors: Unhandled exceptions, promise rejections
• Breadcrumbs: User actions, console logs, network requests
• Context: User info, device, browser, OS
• Stack traces: With source maps (readable code)
• Session replay: Video-like replay of user session
• Performance: Transaction traces, slow queries[3][4]

Error triage

Prioritization matrix

Triage process

1. Review new errors daily (5-10 min)
2. Group similar errors (Sentry does this automatically)
3. Assess impact: How many users affected? What's the severity?
4. Assign owner: Who's responsible for fixing?
5. Set priority: P1/P2/P3 based on frequency × impact
6. Create ticket: Link to error in issue tracker

Error metrics

• Error rate: Errors per 1,000 sessions (target: < 1%)
• Affected users: Unique users experiencing errors
• MTTD (Mean Time to Detection): Time from error to alert (target: < 5 min)
• MTTR (Mean Time to Resolution): Time from alert to fix (target: < 1 hour for P1)
• Regression rate: % of fixed errors that reappear[3][4]

Alerting

Alert rules

• New error: First occurrence of an error → Slack + email
• Error spike: Error rate increases 2x in 5 min → Slack + PagerDuty
• Regression: Fixed error reappears → Slack + email
• Affected users: > 10 users affected by same error → Slack

Alert fatigue prevention

• Don't alert on every error (group and deduplicate)
• Set thresholds (e.g., alert after 10 occurrences)
• Use "ignore" for known non-critical errors
• Review and tune alerts monthly
• Use different channels for different severities[3]

Debugging production errors

Step 1: Reproduce

• Check Sentry for error details (stack trace, breadcrumbs, user context)
• Try to reproduce locally with same inputs
• Use session replay to see what user did
• Check if error is environment-specific (browser, device, location)

Step 2: Diagnose

• Read the stack trace (with source maps)
• Check breadcrumbs (user actions leading to error)
• Check context (user info, request data, feature flags)
• Search codebase for the failing function
• Check recent deployments (did this start after a deploy?)

Step 3: Fix

• Write a test that reproduces the bug
• Implement the fix
• Verify test passes
• Check for similar issues in codebase

Step 4: Deploy and verify

• Deploy fix
• Monitor Sentry for error resolution
• Confirm error count drops to zero
• Check for regressions[3][4]

Source maps

Why source maps matter

• Production code is minified/bundled
• Stack traces show minified code (unreadable)
• Source maps map minified → original code
• Enables readable stack traces in Sentry

Security considerations

• Don't serve source maps publicly (exposes source code)
• Upload source maps to Sentry (not to CDN)
• Use Sentry's source map upload during build
• Set hidden-source-map in webpack (generates maps but doesn't reference them)

Next.js configuration

// next.config.js
module.exports = {
  productionBrowserSourceMaps: false, // Don't expose publicly
  // Use Sentry webpack plugin to upload
};

// sentry.client.config.js
Sentry.init({
  // ... other config
  // Source maps are uploaded during build via Sentry CLI
});

Performance monitoring

Transaction tracing

• Track page load times
• Track API call durations
• Identify slow database queries
• Find N+1 query problems
• Measure third-party script impact

Performance budgets

• Page load: < 3s
• API response: < 200ms
• Database query: < 50ms
• Third-party script: < 500ms

Sentry Performance

// Track custom transaction
const transaction = Sentry.startTransaction({ name: 'compress-image' });
const span = transaction.startChild({ op: 'compress', description: 'Image compression' });
// ... compression logic
span.finish();
transaction.finish();

Error prevention

Pre-deployment

• TypeScript (catch type errors at compile time)
• ESLint (catch common bugs)
• Unit tests (catch logic errors)
• Integration tests (catch interaction bugs)
• E2E tests (catch user flow bugs)

Runtime

• Error boundaries (React)
• Try/catch around risky operations
• Input validation
• Feature flags (gradual rollout)
• Canary deployments

Post-deployment

• Monitor error rates after deploy
• Automated rollback on error spike
• Gradual rollout (1% → 10% → 50% → 100%)[3][4]

Frequently Asked Questions (FAQ)

What is error tracking?

Error tracking is the process of detecting, recording, and alerting on errors in production applications. Tools like Sentry capture error details, stack traces, and user context to help developers fix bugs quickly.[3]

How do I set up error tracking?

1. Choose a platform (Sentry recommended)
2. Install SDK (npm install @sentry/nextjs)
3. Configure DSN (error reporting endpoint)
4. Upload source maps (for readable stack traces)
5. Set up alerts (Slack, email)
6. Deploy and monitor[3][4]

What are breadcrumbs in error tracking?

Breadcrumbs are a trail of events leading up to an error: user clicks, page navigations, console logs, network requests. They help reconstruct what the user did before the error occurred.[3]

How do I reduce error noise?

Group similar errors (Sentry does automatically). Ignore known non-critical errors. Set sampling rates (don't capture 100% of errors in high-traffic apps). Use fingerprinting to group related errors.[3]

What is session replay?

Session replay records user interactions (mouse movements, clicks, scrolls) as a video-like replay. When an error occurs, you can watch exactly what the user did. Tools: Sentry, LogRocket, Highlight.io.[3][4]

How do I handle errors gracefully?

Use error boundaries (React) to catch errors and show fallback UI. Use try/catch for async operations. Show user-friendly error messages. Log errors to tracking service. Never show raw error messages to users.[3]

Should I track errors in development?

No. Only track errors in production (and staging). Development errors should be caught by tests and linting. Tracking dev errors creates noise and wastes quota.[3]

What is the difference between error tracking and logging?

Error tracking focuses on unhandled exceptions and crashes (with stack traces, context, and alerts). Logging captures informational/debug messages (application flow, state changes). Use both: error tracking for bugs, logging for observability.[3][4]

Related reading on MintSaaS

• How to Debug JavaScript: Tools and Techniques
• How to Set Up CI/CD for Web Projects
• How to Monitor Website Uptime and Performance

Sources

[1] Sentry — Documentation: https://docs.sentry.io/

[2] Rollbar — Documentation: https://docs.rollbar.com/

[3] MintSaaS Image Compressor: https://www.mintsaas.net/products/image-compressor

[4] Web.dev — Core Web Vitals: https://web.dev/vitals/

[5] MintSaaS PDF Compressor: https://www.mintsaas.net/products/pdf-compressor

Free tools on MintSaaS

Try our free tools to put this guide into practice:

• Image Compressor
• PDF Compressor
• Image Converter
• MintSaaS Home
• MintSaaS Blog
• How to Compress Images