Bugpilot for Next.js (App Router)

Bugpilot is a platform to catch production errors in your React applications. You can learn more and signup for free at https://app.bugpilot.com.

This Bugpilot plugin for Next.js (App Router) automatically captures errors in your Next.js application and sends them to your Bugpilot workspace. Bugpilot has a near-zero performance impact, see our Performance page for more details.

Usage

The easiest way to get started is to use our CLI Wizard. It will automatically install the plugin and configure your Next.js application:

pnpm dlx @bugpilot/wizard@latest install

Key Features

Bugpilot is specifically designed for Next.js applications using App Router and provides the following features:

• Built-in error boundaries
• Automated error detection in client and server components
• Zero configuration or code changes
• Zero dependencies
• Automated source maps (when using Vercel)
• Near-zero runtime overhead
• (optional) Bug reporting widget

Supported Error Types

This table shows which error types are supported by the Bugpilot plugin for Next.js (App Router), and for which error types an error page is rendered to the users

| Type | Catches Errors | Renders Error Page | |---------------------------|----------------|--------------------------| | Server page | Yes | Yes | | Server component | Yes | Yes | | Client component / page | Yes | Yes | | Server form | Yes | Yes | | Layout | Yes | Yes | | Root Layout | Yes | Yes | | Server action | Yes | No () | | Inline server action | Yes | No () | | Browser exceptions | Yes | No () | | Errors in event handlers | Yes | No () | | Middleware | Yes | Default Next.js Application Error | | API Routes | No | No |

(*) Work in progress. For supported scenarios, you can customize the error pages by updating the code in app/error.tsx and app/global-error.tsx (for root layout errors).

Customizations

Customizing the Bug Reporting Widget

You can replace the default Report Bug label with your own React component:

import { WidgetTrigger } from '@bugpilot/plugin-nextjs';

const MyComponent = () => {
  // Wrap a button/anchor/div/span with the WidgetTrigger component.
  // The component will automatically render the Bugpilot Bug Reporting widget when clicked.
  // (WidgetTrigger is a client component because it needs to use event handlers)

  return (
    <WidgetTrigger>
      <button>Report Bug</button>
    </WidgetTrigger>
  );
};

Customizing the Error Pages

Coming soon

Manual Installation

If you can't use our CLI Wizard or prefer to go through manual installation steps, please refer to this Manual Installation Guide.

Supported Versions

• Next.js 14.x
• React 18+

Issues

Report any issues or feedback on GitHub.

License

MIT

Bugpilot npm packages are published with provenance so you can verify they are built from this repository.