Error Tracking in SaaS Starters

TL;DR

Sentry for error monitoring — the standard, excellent free tier (5k events/month), integrates with every framework. LogRocket when you need session replay to understand what users were doing when an error occurred. Highlight.io for the all-in-one open source alternative (logs + errors + sessions + distributed tracing). Most boilerplates should add Sentry on day one.

The Cost of Untracked Errors

A real scenario: A SaaS app has a bug where users with special characters in their email fail silently during checkout. No error logging = no alert = 5% of checkout attempts fail silently = 5% revenue loss for weeks before someone reports it.

Error monitoring catches silent failures before users churn.

---

Sentry: The Standard

Sentry is the most widely used error monitoring platform. Free tier: 5,000 errors/month — more than enough for early SaaS.

// instrumentation.ts — Sentry initialization (Next.js App Router)
import * as Sentry from '@sentry/nextjs';

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    Sentry.init({
      dsn: process.env.SENTRY_DSN,
      environment: process.env.NODE_ENV,
      tracesSampleRate: 0.1,  // 10% of transactions for performance monitoring
      integrations: [
        Sentry.prismaIntegration(),  // Track slow DB queries
      ],
    });
  }

  if (process.env.NEXT_RUNTIME === 'edge') {
    Sentry.init({
      dsn: process.env.SENTRY_DSN,
      tracesSampleRate: 0.1,
    });
  }
}

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

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 0.1,
  replaysSessionSampleRate: 0.05,  // 5% of sessions
  replaysOnErrorSampleRate: 1.0,   // 100% of sessions with errors
  integrations: [
    Sentry.replayIntegration(),
  ],
});

User Context for Better Error Tracking

// Set user context after authentication — critical for debugging
import * as Sentry from '@sentry/nextjs';

export function identifyUserInSentry(user: User) {
  Sentry.setUser({
    id: user.id,
    email: user.email,
    username: user.name,
    plan: user.plan,
  });
}

// Manual error capture with context
try {
  await processPayment(paymentData);
} catch (error) {
  Sentry.captureException(error, {
    extra: {
      userId: user.id,
      plan: user.plan,
      paymentAmount: paymentData.amount,
    },
    tags: {
      feature: 'billing',
      errorType: 'payment-failure',
    },
  });

  // Rethrow or handle gracefully
  throw error;
}

Sentry Alerting

// Alert rules in Sentry UI (no code needed):
// - Error rate spike > 10 errors/min → Slack alert
// - New error type not seen before → Email notification
// - Error regression (fixed bug reappearing) → PagerDuty

---

LogRocket: Session Replay + Error Tracking

LogRocket records user sessions — you can replay exactly what a user did when they hit an error. Expensive at scale, but the debugging value is high.

// client-side only
'use client';
import LogRocket from 'logrocket';

export function initLogRocket() {
  if (process.env.NODE_ENV !== 'development') {
    LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET_APP_ID!);
  }
}

// Identify user for session replay
export function identifyUser(user: User) {
  LogRocket.identify(user.id, {
    name: user.name,
    email: user.email,
    plan: user.plan,
  });
}

// Connect LogRocket sessions to Sentry errors
LogRocket.getSessionURL((sessionURL) => {
  Sentry.configureScope((scope) => {
    scope.setExtra('sessionURL', sessionURL);
  });
});

Now when Sentry catches an error, you have a link to watch the user's session leading up to it.

LogRocket pricing: Free: 1k sessions/month. $99/month for 10k sessions. Expensive but valuable for complex UX issues.

---

Highlight.io: Open Source All-In-One

Highlight.io is open source (self-hostable) and combines frontend monitoring, backend logging, session replay, and distributed tracing.

// app/layout.tsx
import { H } from '@highlight-run/next/client';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <H
          projectId={process.env.NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID!}
          serviceName="frontend"
          tracingOrigins
          networkRecording={{ enabled: true }}
        />
        {children}
      </body>
    </html>
  );
}

// Backend tracing
import { H } from '@highlight-run/next/server';

H.init({ projectID: process.env.HIGHLIGHT_PROJECT_ID! });

export async function GET(req: Request) {
  const { span } = H.startWithHeaders('user-fetch', req.headers);

  try {
    const user = await prisma.user.findUnique({ where: { id } });
    span.end();
    return Response.json(user);
  } catch (error) {
    H.consumeError(error);
    span.end();
    throw error;
  }
}

Highlight.io advantages:

• Open source — self-host for full control
• Cloud plan is competitive: $50/month for small teams
• Frontend + backend + sessions in one platform
• Growing fast, active development

---

What Matters Most at Early Stage

Week 1: Add Sentry. That's it.

npm install @sentry/nextjs
npx @sentry/wizard@latest -i nextjs

Five minutes of setup. Sentry will catch your first production bug within days.

Month 3: If you're seeing errors you can't reproduce:

• Add LogRocket or Sentry session replay (Sentry has it on paid plans)

Month 6: If you have complex backend services:

• Consider Highlight.io for distributed tracing

---

Boilerplate Error Tracking

Boilerplate	Error Tracking	Provider
ShipFast	✅	Sentry
Supastarter	✅	Sentry
Makerkit	✅	Sentry
T3 Stack	❌	Add yourself
Epic Stack	✅	Sentry

Epic Stack includes Sentry with proper user context and source maps — it's the best reference implementation.

---

Find boilerplates with error tracking on StarterPick.