honeybadger-io/nextjs-with-honeybadger

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

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.

nextjs-with-honeybadger's Issues

Server-side source maps

We currently support client-side source maps, but not server-side. Since honeybadger.js is now universal, I'd like to be able to support server-side source maps. Adding this issue here since Next.js is where this feature is most requested.

Nextjs server side rendering deployed on custom server

We deploy the app not in Vercel but in our own custom server. I tried your project and i saw that server side source maps still don't work. I checked the issue and the solutions suggested there, but it seems that it doesn't work

Also it seems that for client error handling to work properly NEXT_PUBLIC_HONEYBADGER_API_KEY should be set instead of HONEYBADGER_API_KEY. Otherwise [Honeybadger] Unable to send error report: no API key has been configured is being displayed in console

Use `@honeybadger-io/react` instead of `@honeybadger-io/js`

The js package may create confusion with users that come to see an example setup, as they are expecting to see the react package.

Update example app to use @honeybadger-io/nextjs

Update repo to use the new Next.js dedicated package.

App directory support

A few days ago, nextJS set app directory as stable version. Currently honeybadger is not working properly with this. Will you update it?

Server-side exceptions are not recorded when deployed to Vercel

When I deploy to Vercel, I can't get server-side errors to show up in Honeybadger. All the server pages give me a 404. The Vercel log looks like this:

So it appears that the function is getting called and erroring as I'd expect (500) but then displaying a 404. I don't yet understand why the "Edge Status" differs from the "Function Status".

I did confirm that there's nothing wrong with the routing, by adding another page within the /server folder that does not throw an error. That page loads fine on Vercel, so it's definitely related to error handling and not a true 404.

_error.js is getting called, however it's getting called for the 404, not the 500. The err object is null.

Based on comments from @subzero10 I do not think these Vercel issues are new.

[nextjs-with-honeybadger/production] Error: Server Test 1

Backtrace

View full backtrace and more info at honeybadger.io

Unexpected unhandled promise rejections

This issue relates to the universal branch of nextjs-with-honeybadger and the current 3.0.0-alpha release of honeybadger-js.

Steps to reproduce:

You will need to sign up for a free Honeybadger.io account to get an API key: https://www.honeybadger.io/plans/

1. git clone [email protected]:honeybadger-io/nextjs-with-honeybadger.git
2. cd nextjs-with-honeybadger && git checkout universal
3. npm install
4. HONEYBADGER_API_KEY=key npm run build
5. npm run start
6. Visit http://localhost:3000/
7. Click the first "Perform client side navigation" under "Client exceptions" to generate the error "Client Test 1". (other errors have this issue too, however)

Expected result: a single "Client Test 1" error is reported to Honeybadger.

Actual result: the first expected error is reported, but an "UnhandledPromiseRejectionWarning" error is also reported.

I want to understand why these duplicate reports are happening and what the idiomatic Next.js solution is. Happy to answer any questions you may have. If this is something that you can debug, email me with your hourly rate and anything else I should know about your work (josh at honeybadger.io). Thanks!

Add API/serverless routes examples

See here:

https://vercel.com/docs/serverless-functions/introduction#deploying-serverless-functions