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

• _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

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].

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 the [your app name] with the name of your Vercel project: https://[your app name].vercel.app/_next

• By default, neither sourcemaps nor error tracking is enabled in development mode (see Configuration).

• When enabled in development mode, error handling works differently than in production as _error.js is never actually called.

• The build output will contain warning about unhandled Promise rejections. This caused by the test pages, and is expected.

• The version of @zeit/next-source-maps (0.0.4-canary.1) is important and must be specified since it is not yet the default. Otherwise source maps will not be generated for the server.

• Both @zeit/next-source-maps and @honeybadger-io/webpack are added to dependencies (rather than devDependencies) is because if used with SSR (ex. heroku), these plugins are used during production for generating the source-maps and sending them 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.