Next.js

v11.9.0

@sentry/nextjs

Use the official Sentry SDK with the DSN shown in your AllStak project setup. No AllStak-specific SDK is required.

Install

These official Sentry commands come from the AllStak-managed SDK catalog.

npm

npm install @sentry/nextjs

pnpm

pnpm add @sentry/nextjs

yarn

yarn add @sentry/nextjs

Quick start

// Next.js needs several files, one per runtime. Create them in the project
// root (or src/). Full guide: https://docs.sentry.io/platforms/javascript/guides/nextjs/

// ── instrumentation-client.ts ────────────────────────────────────────────
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "{{DSN}}",
  environment: "production",
  release: "[email protected]",
  tracesSampleRate: 1.0,
  integrations: [Sentry.replayIntegration()],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  // Off by default. Enable only if you accept sending usernames, emails and
  // IP addresses to your telemetry backend.
  sendDefaultPii: false,
});

export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

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

Sentry.init({
  dsn: "{{DSN}}",
  environment: "production",
  release: "[email protected]",
  tracesSampleRate: 1.0,
  sendDefaultPii: false,
});

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

Sentry.init({
  dsn: "{{DSN}}",
  environment: "production",
  release: "[email protected]",
  tracesSampleRate: 1.0,
  sendDefaultPii: false,
});

// ── instrumentation.ts ───────────────────────────────────────────────────
import * as Sentry from "@sentry/nextjs";

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;

// ── app/global-error.tsx ─────────────────────────────────────────────────
"use client";
import * as Sentry from "@sentry/nextjs";
import NextError from "next/error";
import { useEffect } from "react";

export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
  useEffect(() => { Sentry.captureException(error); }, [error]);
  return (<html><body><NextError statusCode={0} /></body></html>);
}

// ── next.config.ts ───────────────────────────────────────────────────────
// withSentryConfig also uploads source maps. Its org/project options target
// sentry.io; for AllStak use the source-map upload flow in Settings instead
// and keep the wrapper for the build-time instrumentation only.
import { withSentryConfig } from "@sentry/nextjs";

export default withSentryConfig(nextConfig, { silent: !process.env.CI });

Back to docs