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 [email protected].

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.