Workflow: full Sentry setup for a Next.js app

# Workflow: full Sentry setup for a Next.js app

A Next.js app has three runtimes, so setup has three configs plus build wiring. Do all of it or one runtime goes dark.

## 1. The three config files

The wizard creates them, but know what each covers:

- `instrumentation-client.ts`: browser errors, replay, tracing in the client
- `sentry.server.config.ts`: Node runtime (API routes, server components)
- `sentry.edge.config.ts`: middleware and edge routes

Each calls `Sentry.init` with its own DSN and options. Shared options go in a common module imported by all three so rates and environment stay consistent.

## 2. instrumentation.ts

```ts
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    await import("./sentry.server.config");
  }
  if (process.env.NEXT_RUNTIME === "edge") {
    await import("./sentry.edge.config");
  }
}
export const onRequestError = Sentry.captureRequestError;
```

Without `onRequestError`, nested request errors never reach Sentry. Without the runtime branches, server or edge init never runs.

## 3. Wrap the Next config

```ts
// next.config.ts
import { withSentryConfig } from "@sentry/nextjs";
export default withSentryConfig(nextConfig, {
  org: "[your-org]",
  project: "[your-project]",
  tunnelRoute: "/monitoring",
});
```

`withSentryConfig` handles source-map upload at build time and `tunnelRoute` routes browser events through your own domain, dodging adblockers.

## 4. global-error.tsx

Add `app/global-error.tsx` so App Router render crashes surface. It must be a client component that captures the error it receives.

## 5. Release wiring

Set the release from the same version string in all three configs and pass it to the CLI upload in CI, or source maps will not link.

## Verify

Throw a test error in a page, an API route, and middleware. Three issues (or three events in one issue with runtime tags) confirm all three runtimes report.