nextjs-16-sentry-turbopack-integration

What problem does it solve?

This Skill helps engineers resolve Sentry integration problems in Next.js 16 projects using Turbopack, including SSR tracing errors and deprecated options that arise when enabling performance monitoring.

Core Features & Use Cases

• Troubleshooting: Fix Math.random() related SSR errors by disabling tracing in development and enabling in production.
• Configuration Cleanup: Remove deprecated webpack-specific options not supported by Turbopack.
• Monorepo Hygiene: Deduplicate dependencies to avoid duplicate Next.js installations in pnpm workspaces.
• Client Initialization: Enable Sentry via a client-side init flow instead of server-only imports.
• Security & Deployment: Update CSP to allow Sentry endpoints and verify production readiness.

Quick Start

1. Install the Sentry Next.js SDKs and required plugins for Next.js 16 with Turbopack.
2. Add client/server configuration files (sentry.client.config.ts and sentry.server.config.ts) and initialize Sentry with appropriate tracesSampleRate settings.
3. Remove deprecated webpack options (disableLogger, automaticVercelMonitors) from your next.config.ts wrapper.
4. Run pnpm dedupe to resolve potential duplicate Next.js installations in a monorepo.
5. Implement a Client Component that initializes Sentry on the browser and include it in your layout.
6. Update your CSP to permit Sentry endpoints (connect-src to https://.ingest.sentry.io and https://.sentry.io).
7. Build and test in production mode to verify errors are reported.