Note: This example app has been moved to @honeybadger-io/js, home to all Honeybadger's JavaScript packages. The app is under packages/nextjs/examples/pages-router. Another example app demoing support of App Router (since Next.js 13) is also available.

Next.js with Honeybadger Error Reporting

This is a simple example showing how to use Honeybadger to catch & report errors on both client + server side in Next.js.

_app.js renders on both the server and client. It initializes Honeybadger to catch any unhandled exceptions
_error.js is rendered by Next.js while handling certain types of exceptions for you. It is overridden so those exceptions can be passed along to Honeybadger
next.config.js enables source maps in production and uploads them to Honeybadger

Getting Started

Execute create-next-app with npm or Yarn to bootstrap the example:

npm init next-app --example https://github.com/honeybadger-io/nextjs-with-honeybadger nextjs-with-honeybadger
# or
yarn create next-app --example https://github.com/honeybadger-io/nextjs-with-honeybadger nextjs-with-honeybadger

Next, copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cd nextjs-with-honeybadger
cp .env.local.example .env.local

Open the .env.local and set your HONEYBADGER_API_KEY from your Honeybadger project settings page.

Note: Errors are not reported in development mode by default. To enable reporting in development, see the reportData option in _app.js.

Finally, install it and run:

NPM

npm install
npm run dev

Yarn

yarn
yarn dev

Your app should be up and running on http://localhost:3000! If it doesn't work, email us at support@honeybadger.io.

Testing error reporting locally

When enabled in development mode, error handling works differently than in production. To test error reporting locally, you should run a production build, i.e.

npm run build
npm start

Deployment

Deploy to Vercel:

You must add the following configuration values when deploying:

HONEYBADGER_API_KEY - The API key from your project settings page in Honeybadger.
HONEYBADGER_ASSETS_URL - Required by honeybadger-webpack to upload source maps to Honeybadger. Replace [host] with your domain name: https://[host]/_next (if using Vercel's domain, the host looks like this: [your app name].vercel.app)

Notes

By default, neither sourcemaps nor error tracking is enabled in development mode (see Configuration).
The build output will contain warning about unhandled Promise rejections. This is caused by the test pages, and is expected.
@honeybadger-io/webpack is added to dependencies (rather than devDependencies) because when used with SSR (ex. heroku), this plugin is used during production for sending the generated sourcemaps to Honeybadger.
See the Honeybadger webpack plugin docs and the Using Source Maps guide for more info about source map upload.
See the honeybadger.js user documentation for usage guides and more.