Next.js error monitoring, server and browser.

Q: Does Squasher support the Next.js App Router?

Yes. @squasher-ai/nextjs starts in instrumentation.ts and wraps App Router route handlers and middleware. It supports Next.js 14 and later; Next.js 14 needs the instrumentation hook flag in next.config.

Q: Does it work on the Edge runtime?

No. The Next.js SDK uses Node.js APIs. Load it only when NEXT_RUNTIME is nodejs, as the setup on this page does, and do not import it in Edge code. Middleware can use withSquasher when it runs on the Node.js runtime (Next.js 15.5 and later).

Q: Are Server Component and Server Action errors captured?

Not on their own. Catch the error and call captureError from @squasher-ai/nextjs; this works in Server Components. The browser SDK also records a failed Server Action, with the generic message Next.js shows in production.

Q: Why install two packages?

@squasher-ai/nextjs runs on the server. @squasher-ai/browser runs in the browser: it captures uncaught errors and unhandled rejections, and it records Web Vitals and session replay.

Q: Are stack traces readable in production?

Server stack traces point at the compiled files in .next/server. Browser stack traces are minified. Upload source maps with the CLI for each release, and the issue page shows the original files, lines, and functions.

Q: Can I send Vercel logs too?

Yes. The Vercel integration creates log and trace drains for one Vercel project and a restricted ingest key for them. Vercel drains need a Vercel Pro or Enterprise plan.

Q: Is AI triage included?

Yes, AI triage is on every plan. It reads the issue record and names the likely cause, the impact, and a next step.

Start @squasher-ai/nextjs in instrumentation.ts, wrap your route handlers, and add the browser SDK. Each error arrives as an issue with its release and environment.

Start free

Free plan. No credit card required.

export async function register() {  if (process.env.NEXT_RUNTIME === "nodejs") {    const { init } = await import("@squasher-ai/nextjs");    init({      apiKey: process.env.SQUASHER_API_KEY!,      projectId: process.env.SQUASHER_PROJECT_ID!,      environment: process.env.NODE_ENV,      resourceAttributes: { "service.name": "storefront" },    });  }}

app.squasher.ai/acme/storefront/issues

TypeError: Cannot read properties of undefined (reading 'currency')

TypeError

HighUnresolvedError

Events: 1,339
First seen: 14m ago
Last seen: now
Environment: production
Service: storefront

Example code and the issue it produces.

What gets captured, and where.

Next.js runs your code in three places. Here is what reaches Squasher from each one.

Route handlers

Captured: When wrapped
How: squasherApiHandler sends the error with the URL and method.

Middleware on Node.js

Captured: When wrapped
How: withSquasher, with runtime: "nodejs" (Next.js 15.5 and later).

Middleware on Edge

Captured: No
How: The SDK needs Node.js APIs. Keep it out of Edge code.

Server Components and Server Actions

Captured: Manual
How: Catch the error and call captureError.

Browser errors and rejections

Captured: Automatic
How: @squasher-ai/browser listens once init() runs.

React render errors

Captured: When wrapped
How: SquasherErrorBoundary from @squasher-ai/browser/react.

Where a Next.js app can fail, whether Squasher captures it on its own, and how.
Where it fails	Captured	How
Route handlers	When wrapped	squasherApiHandler sends the error with the URL and method.
Middleware on Node.js	When wrapped	withSquasher, with runtime: "nodejs" (Next.js 15.5 and later).
Middleware on Edge	No	The SDK needs Node.js APIs. Keep it out of Edge code.
Server Components and Server Actions	Manual	Catch the error and call captureError.
Browser errors and rejections	Automatic	@squasher-ai/browser listens once init() runs.
React render errors	When wrapped	SquasherErrorBoundary from @squasher-ai/browser/react.

Tested with @squasher-ai/nextjs 0.4.0, @squasher-ai/browser 0.4.0, and Next.js 15.5 on September 24, 2026.

Live in four steps.

Install, initialize from environment variables, and wrap one route. Or paste one prompt into your coding agent and let it do the setup.

Install both SDKs
One for the server runtime, one for the browser.
```
bun add @squasher-ai/nextjs @squasher-ai/browser
```

Start it in instrumentation.ts

The runtime check loads the SDK only on Node.js, so Edge middleware still builds.

export async function register() {  if (process.env.NEXT_RUNTIME === "nodejs") {    const sdk = await import("@squasher-ai/nextjs");    sdk.init({      apiKey: process.env.SQUASHER_API_KEY!,      projectId: process.env.SQUASHER_PROJECT_ID!,      environment: process.env.NODE_ENV,    });  }}

Wrap your route handlers
Import squasherApiHandler from @squasher-ai/nextjs. It sends the error to Squasher, then throws it again, so Next.js still answers with its error response.
```
export const POST = squasherApiHandler(handler);
```
Send one real error
Throw in a wrapped route, call it, and check Issues. Server events are sent in batches, within about 5 seconds.
Next.js guide

Paste into your coding agent

Install Squasher for this project. If Squasher skills or MCP are not configured in this agent environment, run `bash <(curl -fsSL https://squasher.ai/install.sh) --agents -y`. Then read https://skills.squasher.ai/squasher-onboard/SKILL.md, map every runnable app/service/worker/frontend/agent in the repo, choose the matching Squasher SDK, log drain, OTLP, or Agent SDK path, initialize with SQUASHER_API_KEY and SQUASHER_PROJECT_ID from environment variables, send one real verification event, and report the files changed plus the verification step. Do not hardcode or reveal real API keys.

bash <(curl -fsSL https://squasher.ai/install.sh) --agents -y

Route handlers, middleware, and Server Components.

Next.js does not pass every server error to an SDK. Wrap what you can, and capture the rest yourself.

Route handlers: wrap each one in squasherApiHandler.
Middleware: wrap it in withSquasher and set runtime: "nodejs".
Server Components and Server Actions: catch, call captureError, and throw again.

Next.js SDK docs

import { squasherApiHandler } from "@squasher-ai/nextjs"; export const POST = squasherApiHandler(async (request) => {  const cart = await request.json();  const total = priceCart(cart); // throws: captured, then re-thrown  return Response.json({ total });});

Browser errors and replay.

Add @squasher-ai/browser in a client component. It starts listening when init() runs.

Uncaught errors and unhandled promise rejections, with the page URL.
React render errors, with the component stack, through SquasherErrorBoundary.
Session replay is on by default, with password fields masked. Core Web Vitals too.

How session replay works

app/squasher-provider.tsx

"use client"; import { useEffect, type ReactNode } from "react";import { init } from "@squasher-ai/browser";import { SquasherErrorBoundary } from "@squasher-ai/browser/react"; let started = false; export function SquasherProvider({ children }: { children: ReactNode }) {  useEffect(() => {    if (started) return;    started = true;    init({      apiKey: process.env.NEXT_PUBLIC_SQUASHER_API_KEY!,      projectId: process.env.NEXT_PUBLIC_SQUASHER_PROJECT_ID!,      environment: process.env.NODE_ENV,      release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,    });  }, []);  return (    <SquasherErrorBoundary fallback={<p>Something went wrong.</p>}>      {children}    </SquasherErrorBoundary>  );}

The options you will use.

Every option goes in the init() call. apiKey and projectId come from environment variables.

release
The deploy an event came from. On the server it defaults to VERCEL_GIT_COMMIT_SHA or SQUASHER_RELEASE when you do not set it.
environment
production, preview, or development, so you can filter issues by environment.
beforeSend
Runs before every event leaves your app. Return a changed event, or null to drop it.
resourceAttributes
Adds attributes to every server event. Set "service.name" to name the service on each issue.
sampling
Keep a share of events by outcome, for example every error and a tenth of the rest.
debug
Logs what the SDK sends and why an event was dropped. Use it while you set up.

Source maps, uploaded per release.

Next.js writes browser source maps when you turn them on. Upload them from CI with the release you deploy.

Squasher stores the maps by project, service, and release.
Stack traces are not de-minified with them yet.
Next.js serves the .map files to the public unless you delete them after upload.

Source map docs

import type { NextConfig } from "next"; const nextConfig: NextConfig = {  productionBrowserSourceMaps: true,}; export default nextConfig;

Questions, answered.

Does Squasher support the Next.js App Router?

Yes. @squasher-ai/nextjs starts in instrumentation.ts and wraps App Router route handlers and middleware. It supports Next.js 14 and later; Next.js 14 needs the instrumentation hook flag in next.config.

Does it work on the Edge runtime?

No. The Next.js SDK uses Node.js APIs. Load it only when NEXT_RUNTIME is nodejs, as the setup on this page does, and do not import it in Edge code. Middleware can use withSquasher when it runs on the Node.js runtime (Next.js 15.5 and later).

Are Server Component and Server Action errors captured?

Not on their own. Catch the error and call captureError from @squasher-ai/nextjs; this works in Server Components. The browser SDK also records a failed Server Action, with the generic message Next.js shows in production.

Why install two packages?

@squasher-ai/nextjs runs on the server. @squasher-ai/browser runs in the browser: it captures uncaught errors and unhandled rejections, and it records Web Vitals and session replay.

Are stack traces readable in production?

Server stack traces point at the compiled files in .next/server. Browser stack traces are minified. Upload source maps with the CLI for each release, and the issue page shows the original files, lines, and functions.

Can I send Vercel logs too?

Yes. The Vercel integration creates log and trace drains for one Vercel project and a restricted ingest key for them. Vercel drains need a Vercel Pro or Enterprise plan.

Is AI triage included?

Yes, AI triage is on every plan. It reads the issue record and names the likely cause, the impact, and a next step.

On squasher.ai

In the docs

Priced by volume, never by seat.

Start free. Invite the whole team. AI triage is included on every plan.

Compare every plan

Free

For side projects, evals, and internal tools.

$0/ month

No card needed. No overage charges.

10 GB telemetry
5K replays
500 AI credits

Included

AI triage on new issues
500 AI credits / month (an investigation uses 50)
1 project

Pro

For small production apps that want one tool, not five.

$29/ month

Flat price. No per-seat fees.

100 GB telemetry
10K replays
3K AI credits

Everything in Free, plus

3,000 AI credits / month (an investigation uses 50)
5 projects
30 monitors with 30-second checks

Team

Scale

For high-volume teams with security, procurement, and support needs.

$299/ month

Flat price. No per-seat fees.

1 TB telemetry
150K replays
30K AI credits

Everything in Team, plus

30,000 AI credits / month (an investigation uses 50)
100 status pages
250 monitors with 30-second checks

Need more volume, a security review, or custom terms? Get in touch.

Go squash some bugs.

Connect one service and send one real event. The crew takes it from there.