Sentry for Next.js: A Developer's Best Friend

npx @sentry/wizard@latest -i nextjs

// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
	dsn: 'https://78d54274aa18a551e149fb0f3d95@o4506194538240.ingest.us.sentry.io/45064180480',
 
	// Adjust this value in production, or use tracesSampler for greater control
	tracesSampleRate: 1,
 
	// Setting this option to true will print useful information to the console while you're setting up Sentry.
	debug: false,
 
	replaysOnErrorSampleRate: 1.0,
 
	// This sets the sample rate to be 10%. You may want this to be 100% while
	// in development and sample at a lower rate in production
	replaysSessionSampleRate: 0.1,
 
	// You can remove this option if you're not planning to use the Sentry Session Replay feature:
	integrations: [
		Sentry.replayIntegration({
			// Additional Replay configuration goes in here, for example:
			maskAllText: true,
			blockAllMedia: true,
		}),
	],
})

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
	dsn: 'https://78d54274aa18a551e149fb0f3d95@o4506194538240.ingest.us.sentry.io/45064180480',
 
	// Adjust this value in production, or use tracesSampler for greater control
	tracesSampleRate: 1,
 
	// Setting this option to true will print useful information to the console while you're setting up Sentry.
	debug: false,
 
	// uncomment the line below to enable Spotlight (https://spotlightjs.com)
	// spotlight: process.env.NODE_ENV === 'development',
})

// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
// The config you add here will be used whenever one of the edge features is loaded.
// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
	dsn: 'https://78d54274aa18a551e149fb0f3d95@o4506194538240.ingest.us.sentry.io/45064180480',
 
	// Adjust this value in production, or use tracesSampler for greater control
	tracesSampleRate: 1,
 
	// Setting this option to true will print useful information to the console while you're setting up Sentry.
	debug: false,
})

export default withSentryConfig(
	nextConfig,
	{
		// For all available options, see:
		// https://github.com/getsentry/sentry-webpack-plugin#options
 
		// Suppresses source map uploading logs during build
		silent: true,
		org: 'shubhdeep-chhabra',
		project: 'shubhdeepchhabra',
	},
	{
		// For all available options, see:
		// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
		// Upload a larger set of source maps for prettier stack traces (increases build time)
		widenClientFileUpload: true,
 
		// Transpiles SDK to be compatible with IE11 (increases bundle size)
		transpileClientSDK: true,
 
		// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. (increases server load)
		// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
		// side errors will fail.
		tunnelRoute: '/monitoring',
 
		// Hides source maps from generated client bundles
		hideSourceMaps: true,
 
		// Automatically tree-shake Sentry logger statements to reduce bundle size
		disableLogger: true,
 
		// Enables automatic instrumentation of Vercel Cron Monitors.
		// See the following for more information:
		// https://docs.sentry.io/product/crons/
		// https://vercel.com/docs/cron-jobs
		automaticVercelMonitors: true,
	}
)

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || process.env.SENTRY_DSN, // To store dsn value in env variables and it is stored in 2 variables as on client side Nextjs needs env with prefix NEXT_PUBLIC
 
	tracesSampleRate: 1, // To trace every event in production.
 
	debug: process.env.NODE_ENV === 'development', // To have logs but in development environments.
 
	replaysOnErrorSampleRate: 1.0, // To trace every session with error.
 
	replaysSessionSampleRate: 0.1, // To trace 10% of sessions(without any error).
 
	integrations: [
		// Sentry repaly integration configs to mask all text and block media in replays captured.
		Sentry.replayIntegration({
			maskAllText: true,
			blockAllMedia: true,
		}),
	],
})
 
// sentry.server.config.ts
import * as Sentry from '@sentry/nextjs'
import { prisma } from './utils/prisma'
 
Sentry.init({
	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || process.env.SENTRY_DSN, // same reason mentioned in client config.
 
	tracesSampleRate: 1, // same reason to track every event in server side.
 
	debug: process.env.NODE_ENV === 'development', // logs only for development env.
 
	integrations: [new Sentry.Integrations.Prisma({ client: prisma })], // Added integration for prisma to track every db query done by prisma.
})
 
// sentry.edge.config.ts
// This was optional for my case, as i am not using edge middlewares or edge runtime but i diddnt removed this for later purpose
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || process.env.SENTRY_DSN,
 
	tracesSampleRate: 1,
 
	debug: process.env.NODE_ENV === 'development',
})

// uncomment the line below to enable Spotlight (https://spotlightjs.com)
// spotlight: process.env.NODE_ENV === 'development',