@bugpilot/plugin-nextjs
TypeScript icon, indicating that this package has built-in type declarations

0.19.1 • Public • Published

Bugpilot for Next.js (App Router)

NPM Version

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.

Package Sidebar

Install

npm i @bugpilot/plugin-nextjs

Weekly Downloads

19

Version

0.19.1

License

MIT

Unpacked Size

85.1 kB

Total Files

45

Last publish

Collaborators

  • bugpilot-simone