Skip to main content
Shipr uses Sentry for error tracking and performance monitoring across server, edge, and client environments.

​
Quick Start

1

Create Sentry Account

Sign up at sentry.io and create a new Next.js project. Copy your DSN from the project settings.
2

Add Environment Variable

Add your Sentry DSN to .env.local:
NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/...
3

Configure Organization & Project

Update next.config.ts with your Sentry organization and project:
next.config.ts
export default withSentryConfig(nextConfig, {
  org: "your-org-slug",
  project: "your-project-name",
  // ... rest of config
});

​
Configuration Files

Sentry is configured in three files for different Next.js runtime environments:
FileEnvironmentPurpose
sentry.server.config.tsServerNode.js server-side errors
sentry.edge.config.tsEdgeMiddleware and edge routes
next.config.tsBuildWebpack integration and source maps

​
Server Configuration

sentry.server.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

  // Lower sample rate in production to reduce costs and noise
  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,

  // Enable logs to be sent to Sentry
  enableLogs: true,

  // Disable sending user PII by default: opt-in only where needed
  sendDefaultPii: false,
});

​
Edge Configuration

sentry.edge.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

  // Lower sample rate in production to reduce costs and noise
  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,

  // Enable logs to be sent to Sentry
  enableLogs: true,

  // Disable sending user PII by default: opt-in only
  sendDefaultPii: false,
});
Both server and edge configurations use the same settings. The files are separate because they run in different runtime environments.

​
Next.js Integration

Sentry is integrated via withSentryConfig in next.config.ts:
next.config.ts
import { withSentryConfig } from "@sentry/nextjs";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // ... your Next.js config
};

export default withSentryConfig(nextConfig, {
  // For all available options, see:
  // https://www.npmjs.com/package/@sentry/webpack-plugin#options

  org: "ege-uysal",
  project: "shipr",

  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,

  // Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers
  tunnelRoute: "/monitoring",

  webpack: {
    // Enables automatic instrumentation of Vercel Cron Monitors
    automaticVercelMonitors: true,

    // Tree-shaking options for reducing bundle size
    treeshake: {
      // Automatically tree-shake Sentry logger statements to reduce bundle size
      removeDebugLogging: true,
    },
  },
});

​
Tunnel Route

Sentry uses a tunnel route (/monitoring) to bypass ad-blockers. This routes browser requests to Sentry through Next.js: 
tunnelRoute: "/monitoring"
The tunnel route increases server load. Ensure your hosting plan can handle the additional traffic.

​
Sample Rates

Sentry uses different sample rates for development and production: 
tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0
  • Development: 1.0 (100% of traces)
  • Production: 0.2 (20% of traces)
Lower sample rates in production reduce Sentry costs while still capturing enough data for debugging.

​
Privacy & PII

By default, Sentry does not send personally identifiable information (PII): 
sendDefaultPii: false
To capture user context for specific errors, manually set user data: 
import * as Sentry from "@sentry/nextjs";

Sentry.setUser({
  id: user.id,
  email: user.email,
});
Clear user data on logout: 
Sentry.setUser(null);

​
Capturing Errors

Sentry automatically captures unhandled errors. You can also manually capture errors:

​
Manual Error Capture

import * as Sentry from "@sentry/nextjs";

try {
  // Your code
} catch (error) {
  Sentry.captureException(error);
}

​
Custom Messages

Sentry.captureMessage("Something went wrong", "error");

​
Adding Context

Sentry.setContext("payment", {
  plan: "pro",
  amount: 12,
});

Sentry.setTag("feature", "checkout");

​
Source Maps

Sentry automatically uploads source maps in production for readable stack traces: 
widenClientFileUpload: true
Source maps are only uploaded in CI environments where process.env.CI is set.

​
Vercel Cron Monitors

Sentry automatically instruments Vercel Cron jobs: 
automaticVercelMonitors: true
This tracks cron job execution and alerts you when jobs fail.

​
Performance Monitoring

Sentry tracks performance metrics automatically. View transaction traces in the Sentry dashboard to identify slow routes and API calls. To add custom performance tracking: 
import * as Sentry from "@sentry/nextjs";

const transaction = Sentry.startTransaction({
  name: "Custom Operation",
  op: "custom",
});

try {
  // Your code
} finally {
  transaction.finish();
}

​
Environment Variables Reference

VariableRequiredDescription
NEXT_PUBLIC_SENTRY_DSNYesYour Sentry project DSN (from Sentry project settings)
SENTRY_AUTH_TOKENNoAuth token for uploading source maps (set in CI only)

​
Best Practices

Use a lower tracesSampleRate (0.1-0.3) in production to reduce costs while maintaining visibility into critical errors.
Keep sendDefaultPii: false and only send user data when necessary for debugging specific issues.
The tunnel route (/monitoring) bypasses ad-blockers but increases server load. Monitor your hosting costs.
Configure Sentry alerts to notify your team when error rates spike or critical issues occur.

Build docs developers (and LLMs) love

Get started for freeTalk to us