pnpm add @sentry/nextjs
# or for plain React:
pnpm add @sentry/react

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 
  // Only enable in production — avoids noise during development
  enabled: process.env.NODE_ENV === 'production',
 
  // Tag every event with the deployed version for release tracking
  release: process.env.NEXT_PUBLIC_APP_VERSION,
  environment: process.env.NEXT_PUBLIC_ENVIRONMENT ?? 'production',
 
  // Sample rate: 1.0 = capture 100% of errors (recommended to start)
  sampleRate: 1.0,
 
  // Performance monitoring — sample 10% of transactions
  tracesSampleRate: 0.1,
 
  // Session replays — capture 10% of sessions, 100% of errored sessions
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
 
  integrations: [
    Sentry.replayIntegration({
      // Mask all text and inputs to comply with privacy requirements
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
 
  beforeSend(event, hint) {
    // Strip PII from error events before they leave the browser
    if (event.user?.email) {
      event.user.email = '[Filtered]'
    }
    return event
  },
})

// sentry.server.config.ts
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  enabled: process.env.NODE_ENV === 'production',
  release: process.env.APP_VERSION,
  environment: process.env.ENVIRONMENT ?? 'production',
  sampleRate: 1.0,
  tracesSampleRate: 0.05,
})

// After successful login
import * as Sentry from '@sentry/nextjs'
 
function onUserLogin(user: { id: string; plan: string }) {
  Sentry.setUser({
    id: user.id,          // Use an opaque ID, never email/name
    plan: user.plan,      // Non-PII attributes are useful for triage
  })
}
 
function onUserLogout() {
  Sentry.setUser(null)
}

// components/error-boundary.tsx
import { Component, type ErrorInfo, type ReactNode } from 'react'
import * as Sentry from '@sentry/react'
 
interface Props {
  children: ReactNode
  fallback?: ReactNode
}
 
interface State {
  hasError: boolean
  eventId: string | null
}
 
export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, eventId: null }
 
  static getDerivedStateFromError(): Partial<State> {
    return { hasError: true }
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    const eventId = Sentry.captureException(error, {
      contexts: { react: { componentStack: info.componentStack ?? '' } },
    })
    this.setState({ eventId })
  }
 
  render() {
    if (this.state.hasError) {
      return (
        this.props.fallback ?? (
          <div role="alert">
            <h2>Something went wrong.</h2>
            <button
              onClick={() =>
                Sentry.showReportDialog({ eventId: this.state.eventId ?? '' })
              }
            >
              Report feedback
            </button>
          </div>
        )
      )
    }
    return this.props.children
  }
}

import * as Sentry from '@sentry/nextjs'
 
// Capture a specific error with extra context
async function processPayment(orderId: string, amount: number) {
  try {
    await paymentGateway.charge({ orderId, amount })
  } catch (error) {
    Sentry.withScope((scope) => {
      scope.setTag('feature', 'checkout')
      scope.setContext('order', { orderId, amount })
      scope.setLevel('error')
      Sentry.captureException(error)
    })
    throw error  // Re-throw — never swallow errors silently
  }
}
 
// Log a message (non-exception) for important events
Sentry.captureMessage('Payment gateway returned unexpected status code 202', 'warning')

import { onCLS, onINP, onLCP } from 'web-vitals'
 
function reportWebVital(name: string, value: number) {
  monitoring.captureMessage(`web-vital:${name}`, 'info', {
    tags: { source: 'rum' },
    extra: { value },
  })
}
 
onLCP((metric) => reportWebVital('LCP', metric.value))
onCLS((metric) => reportWebVital('CLS', metric.value))
onINP((metric) => reportWebVital('INP', metric.value))
 
async function monitoredFetch(input: RequestInfo | URL, init?: RequestInit) {
  const response = await fetch(input, init)
  if (!response.ok) {
    monitoring.captureMessage('frontend-network-failure', 'warning', {
      tags: { status: String(response.status) },
      extra: { url: String(input) },
    })
  }
  return response
}

// Unhandled exceptions
window.addEventListener('error', (event) => {
  sendToMonitoring({
    type: 'exception',
    message: event.message,
    source: event.filename,
    line: event.lineno,
    column: event.colno,
    stack: event.error?.stack,
  })
})
 
// Unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
  sendToMonitoring({
    type: 'unhandledRejection',
    reason: String(event.reason),
    stack: event.reason instanceof Error ? event.reason.stack : undefined,
  })
})