Sentry captures unhandled exceptions, groups identical errors from different users into a single issue, and provides the breadcrumbs, context, and session replay you need to reproduce and fix bugs without asking users what they did. It is the most widely used error tracking tool for production web applications, and it works.
What Sentry Captures That Plain Logging Does Not
The problem with console.log and log aggregators (Datadog Logs, Papertrail, Logtail) is that they give you raw text. When an error happens 1,000 times from 1,000 different users, you get 1,000 log lines. Finding the unique errors, understanding which users are affected, and reproducing the conditions requires manual work.
Sentry solves this with automatic error grouping. When the same exception (same stack trace, same error message) occurs 1,000 times, Sentry shows you one issue with a count of 1,000 occurrences. You see the error once, fix it once, and mark it resolved.
Beyond grouping, Sentry captures:
Breadcrumbs: automatic log of what happened before the error. Sentry automatically captures console logs, HTTP requests, navigation events, user interactions, and database queries that occurred in the 30 seconds before the error. When you look at an issue, you see a timeline of exactly what the user did and what your app called before it crashed.
Context: browser, OS, screen resolution, user identity, and any custom context you set. Knowing that an error only happens on Safari 17 on iOS 16 changes your debugging approach entirely.
Session replay (Sentry Replay): optional video-like recording of the user's screen session before the error. Watch exactly what the user did, including clicks, scrolls, and input events, in a privacy-respecting way (sensitive data is masked by default). This is the most powerful debugging tool Sentry offers: often you can watch a 30-second replay and immediately understand what caused the error.
Setting Up Sentry in Next.js
Install the Sentry Next.js SDK:
pnpm add @sentry/nextjs
Run the Sentry wizard for automatic setup:
npx @sentry/wizard@latest -i nextjs
The wizard creates sentry.client.config.ts, sentry.server.config.ts, and sentry.edge.config.ts, and updates next.config.ts to enable source map upload during builds.
Minimal configuration:
// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
tracesSampleRate: 0.1, // capture 10% of transactions for performance monitoring
replaysSessionSampleRate: 0.01, // capture 1% of sessions
replaysOnErrorSampleRate: 1.0, // always capture replay when an error occurs
integrations: [Sentry.replayIntegration()],
})
Set the DSN in your environment:
NEXT_PUBLIC_SENTRY_DSN=https://...@sentry.io/...
SENTRY_AUTH_TOKEN=... # for source map upload during build
