Integrations/Next.js

Set Up Bugsly for Next.js

Full-stack error tracking for Next.js with App Router support, server action monitoring, and automatic instrumentation for both client and server.

1. Install the SDK

npx @bugsly/wizard@latest -i nextjs

2. Configure Bugsly

Add the following to your application entry point. Replace the DSN with your project DSN from the Bugsly dashboard.

// bugsly.client.config.ts
import * as Bugsly from "@bugsly/nextjs";

Bugsly.init({
  dsn: "https://your-dsn@bugsly.dev/1",
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

// bugsly.server.config.ts
import * as Bugsly from "@bugsly/nextjs";

Bugsly.init({
  dsn: "https://your-dsn@bugsly.dev/1",
  tracesSampleRate: 1.0,
});

// next.config.js
const { withBugsly } = require("@bugsly/nextjs");
module.exports = withBugsly({ /* your config */ });

3. Verify It Works

Trigger a test error in your application and check your Bugsly dashboard. You should see the error appear within seconds, complete with stack trace, breadcrumbs, and AI-powered analysis.

What You Get with Next.js

  • App Router and Pages Router support
  • Automatic server action and API route monitoring
  • Server-side and client-side error tracking in one SDK
  • Automatic source map uploads during build
  • Edge runtime support
  • AI analysis for hydration mismatches and SSR errors

Frequently Asked Questions

Does Bugsly support the Next.js App Router?

Yes. @bugsly/nextjs fully supports the App Router, including Server Components, Server Actions, Route Handlers, and Middleware. The SDK automatically instruments both client and server.

How does the setup wizard work?

Running npx @bugsly/wizard@latest -i nextjs automatically creates the config files, wraps your next.config.js, and sets up source map uploads. The entire process takes about 2 minutes.

Can I track API route errors in Next.js?

Yes. Both Pages API routes and App Router Route Handlers are automatically instrumented. Errors are captured with the full request context including headers, body, and query parameters.

Start tracking errors in Next.js for free

Get AI-powered error analysis, session replay, and performance monitoring — included free on every plan.

Start Free