Skip to content

Latest commit

 

History

History
73 lines (46 loc) · 3.72 KB

README.md

File metadata and controls

73 lines (46 loc) · 3.72 KB
Raw

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.

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

Deployment

Deploy to Vercel:

Deploy with 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).

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