Server-Side Rendering

Honeybadger supports server-side rendered frameworks such as Next.js and Nuxt.js as well as custom SSR apps.

All Frameworks

All approaches to SSR generally involve the following steps:

  1. Install the universal @honeybadger-io/js package
  2. Conditionally configure the package

Here’s a simple example of setting up Honeybadger for the browser and Node:

js
const Honeybadger = require('@honeybadger-io/js'); Honeybadger.configure({ apiKey: process.env.HONEYBADGER_API_KEY, environment: process.env.NODE_ENV });

(Note that in this example, you would need to make sure your bundler exposes the process.env values correctly.)

Conditional configuration

Most configuration options are universal in honeybadger.js, but there are a few runtime-specific options. If you need to change those (or do other runtime-specific configuration), this section may help.

The best way to check the current runtime is with (typeof(window) === 'undefined'). If window is undefined, you’re in Node.js.

Here’s a basic example of configuring Honeybadger with different options for the browser and Node:

js
const Honeybadger = require('@honeybadger-io/js'); if (typeof(window) === 'undefined') { // Node Honeybadger.configure({ apiKey: process.env.HONEYBADGER_API_KEY, environment: process.env.NODE_ENV }) } else { // Browser Honeybadger.configure({ apiKey: "secret", enableUncaught: false, maxErrors: 5 }) }

Next.js

Check out this example of how to use Honeybadger to catch & report errors on both client + server side in Next.js.

Nuxt.js

Note: server-side error reporting is not yet working in Nuxt.js. If you would like to improve this, email support. Ideally we want a Nuxt module similar to sentry-module.

To set up client-side error reporting in Nuxt.js:

Add the following to ~/plugins/honeybadger.js:

js
import Vue from 'vue' import HoneybadgerVue from '@honeybadger-io/vue' const config = { apiKey: 'your API key', environment: 'production' } Vue.use(HoneybadgerVue, config) // This is handy for testing; remove it in production. window.Honeybadger = Vue.$honeybadger;

…and add the plugin to the plugins entry in ~/nuxt.config.js:

js
module.exports = { // ... plugins: [ { src: '~/plugins/honeybadger', mode: 'client' } ], }

Here’s an example.

React on Rails

React On Rails and React-Rails both support server-side rendering in Rails. The setup for these and other approaches is similar (see all frameworks).

Here’s a complete example of how to integrate Honeybadger with React on Rails.