Something went wrong
)
}
```
### Track User & Custom Events
```tsx
// After login
import * as Sentry from '@sentry/nextjs'
Sentry.setUser({ id: user.id, email: user.email, username: user.name })
// Custom event with context
Sentry.captureMessage('User upgraded plan', {
level: 'info',
tags: { plan: 'pro' },
extra: { previousPlan: 'free' },
})
// Performance span
const transaction = Sentry.startSpan({ name: 'process-payment' }, () => {
// your logic
})
```
## 2. Structured Logging with Pino
```bash
pnpm add pino pino-pretty
```
```ts
// lib/logger.ts
import pino from 'pino'
const isDev = process.env.NODE_ENV === 'development'
export const logger = pino({
level: process.env.LOG_LEVEL || (isDev ? 'debug' : 'info'),
...(isDev && {
transport: {
target: 'pino-pretty',
options: { colorize: true, translateTime: 'HH:MM:ss', ignore: 'pid,hostname' },
},
}),
formatters: {
level: (label) => ({ level: label }),
},
base: {
env: process.env.NODE_ENV,
service: 'my-app',
},
})
// Child loggers for modules
export const dbLogger = logger.child({ module: 'database' })
export const authLogger = logger.child({ module: 'auth' })
export const apiLogger = logger.child({ module: 'api' })
```
### Request Logging Middleware
```ts
// middleware.ts (or in API routes)
import { logger } from '@/lib/logger'
import { NextRequest, NextResponse } from 'next/server'
import { nanoid } from 'nanoid'
export function middleware(req: NextRequest) {
const requestId = nanoid(12)
const start = Date.now()
// Add request ID to response headers
const response = NextResponse.next()
response.headers.set('X-Request-Id', requestId)
// Log request
logger.info({
requestId,
method: req.method,
path: req.nextUrl.pathname,
userAgent: req.headers.get('user-agent'),
ip: req.headers.get('x-forwarded-for'),
}, 'Incoming request')
return response
}
```
### Log Shipping to Axiom/Logtail
```bash
pnpm add @axiomhq/pino
```
```ts
// lib/logger.ts (production)
import pino from 'pino'
export const logger = pino({
level: 'info',
transport: process.env.NODE_ENV === 'production'
? {
target: '@axiomhq/pino',
options: {
dataset: process.env.AXIOM_DATASET,
token: process.env.AXIOM_TOKEN,
},
}
: {
target: 'pino-pretty',
options: { colorize: true },
},
})
```
## 3. OpenTelemetry
```bash
pnpm add @vercel/otel @opentelemetry/api
```
```ts
// instrumentation.ts (Next.js 15+ — root of project)
// This file is auto-loaded by Next.js via the instrumentation hook.
// Requires: pnpm add @vercel/otel @opentelemetry/api
import { registerOTel } from '@vercel/otel'
export function register() {
registerOTel({
serviceName: 'my-app',
// Optional: export to Honeycomb, Jaeger, etc.
// traceExporter: new OTLPTraceExporter({ url: '...' }),
})
}
```
```ts
// Custom spans
import { trace } from '@opentelemetry/api'
const tracer = trace.getTracer('my-app')
export async function processOrder(orderId: string) {
return tracer.startActiveSpan('process-order', async (span) => {
span.setAttribute('order.id', orderId)
try {
await validateOrder(orderId)
await chargePayment(orderId)
await sendConfirmation(orderId)
span.setStatus({ code: 1 }) // OK
} catch (error) {
span.setStatus({ code: 2, message: String(error) }) // ERROR
throw error
} finally {
span.end()
}
})
}
```
## 4. Health Checks
```ts
// app/api/health/route.ts (Liveness)
export async function GET() {
return Response.json({
status: 'ok',
timestamp: new Date().toISOString(),
uptime: process.uptime(),
version: process.env.APP_VERSION || 'unknown',
})
}
```
```ts
// app/api/ready/route.ts (Readiness)
export async function GET() {
const checks: Record