sentry-and-otel-setup

# Sentry and OpenTelemetry Setup

## Overview

Configure comprehensive error tracking and performance monitoring using Sentry with OpenTelemetry (OTel) instrumentation for Next.js applications, including automatic error capture, distributed tracing, and custom logging.

## Installation and Configuration

### 1. Install Sentry

Install Sentry Next.js SDK:

```bash
npm install @sentry/nextjs
```

Run Sentry wizard for automatic configuration:

```bash
npx @sentry/wizard@latest -i nextjs
```

This creates:
- `sentry.client.config.ts` - Client-side configuration
- `sentry.server.config.ts` - Server-side configuration
- `sentry.edge.config.ts` - Edge runtime configuration
- `instrumentation.ts` - OpenTelemetry setup
- Updates `next.config.js` with Sentry webpack plugin

### 2. Configure Environment Variables

Add Sentry credentials to `.env.local`:

```env
SENTRY_DSN=https://your-dsn@sentry.io/project-id
SENTRY_ORG=your-org
SENTRY_PROJECT=your-project
NEXT_PUBLIC_SENTRY_DSN=https://your-dsn@sentry.io/project-id
```

Get DSN from Sentry dashboard: Settings > Projects > [Your Project] > Client Keys (DSN)

**For production**, add these to deployment environment variables.

### 3. Update Sentry Configurations

Customize `sentry.server.config.ts` using the template from `assets/sentry-server-config.ts`:

- Set environment (development, staging, production)
- Configure sample rates for performance monitoring
- Enable tracing for Server Actions and API routes
- Set up error filtering and breadcrumbs

Customize `sentry.client.config.ts` using the template from `assets/sentry-client-config.ts`:

- Configure replay sessions for debugging
- Set error boundaries
- Enable performance monitoring for user interactions

### 4. Add Instrumentation Hook

Create or update `instrumentation.ts` in project root using the template from `assets/instrumentation.ts`. This:

- Initializes OpenTelemetry before app starts
- Registers Sentry as trace provider
- Enables distributed tracing across serv