YourSaaS

Add Sentry error monitoring in ~5 minutes using the official wizard. Captures client errors, server errors, edge runtime errors, performance traces, and session replay.

Setup

Install and run the Sentry wizard

pnpm add @sentry/nextjs
npx @sentry/wizard@latest -i nextjs

The wizard creates the Sentry config files and updates next.config.ts with the Sentry build plugin.

With Next.js 16+ and @sentry/nextjs v10+, the wizard may create instrumentation.ts and instrumentation-client.ts instead of the traditional sentry.client.config.ts files. Both patterns work.

Verify environment variables

The wizard adds these automatically — confirm they're in .env.local:

NEXT_PUBLIC_SENTRY_DSN="https://examplePublicKey@o0.ingest.sentry.io/0"
SENTRY_DSN="https://examplePublicKey@o0.ingest.sentry.io/0"
SENTRY_ORG="your-org"
SENTRY_PROJECT="your-project"
SENTRY_AUTH_TOKEN="your-auth-token"   # Required for source map uploads

Configure the client SDK

Edit sentry.client.config.ts (or instrumentation-client.ts if wizard used that):

import * as Sentry from "@sentry/nextjs"

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.replayIntegration({ maskAllText: true, blockAllMedia: true }),
  ],
  enabled: process.env.NODE_ENV === "production",
})

Configure server and edge SDKs

// sentry.server.config.ts
import * as Sentry from "@sentry/nextjs"
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 0.2,
  enabled: process.env.NODE_ENV === "production",
})

// sentry.edge.config.ts
import * as Sentry from "@sentry/nextjs"
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 0.2,
  enabled: process.env.NODE_ENV === "production",
})

Add the global error boundary

Create app/global-error.tsx:

"use client"
import * as Sentry from "@sentry/nextjs"
import { useEffect } from "react"

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => { Sentry.captureException(error) }, [error])

  return (
    <html lang="en">
      <body>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "100vh", gap: "1rem" }}>
          <h2>Something went wrong</h2>
          <p>Our team has been notified.</p>
          <button onClick={reset}>Try again</button>
        </div>
      </body>
    </html>
  )
}

Environment Variables

Variable	Required	Description
`NEXT_PUBLIC_SENTRY_DSN`	Yes	Public DSN for client-side SDK
`SENTRY_DSN`	Yes	DSN for server-side and edge SDKs
`SENTRY_ORG`	Yes	Sentry organization slug
`SENTRY_PROJECT`	Yes	Sentry project slug
`SENTRY_AUTH_TOKEN`	Yes	Token for source map uploads at build time

Verification

Deploy to staging (Sentry is disabled in development by default via enabled: process.env.NODE_ENV === "production")
Temporarily add throw new Error("Sentry test") to any page
Check Sentry dashboard — error should appear within 30 seconds with source-mapped stack trace
Remove the test error