This skill should be used when adding error tracking and performance monitoring with Sentry and OpenTelemetry tracing to Next.js applications. Apply when setting up error monitoring, configuring tracing for Server Actions and routes, implementing logging wrappers, adding performance instrumentation, or establishing observability for debugging production issues.
View on GitHubhopeoverture/worldbuilding-app-skills
sentry-and-otel-setup
plugins/sentry-and-otel-setup/skills/sentry-and-otel-setup/SKILL.md
January 21, 2026
Select agents to install to:
npx add-skill https://github.com/hopeoverture/worldbuilding-app-skills/blob/main/plugins/sentry-and-otel-setup/skills/sentry-and-otel-setup/SKILL.md -a claude-code --skill sentry-and-otel-setupInstallation paths:
.claude/skills/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