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 Honeybadgernext.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 thandevDependencies
) 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.