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:

Install the universal @honeybadger-io/js package
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 our comprehensive guide here for setting up 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.