Server-Side Rendering

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

The most important thing to know when configuring your server-side rendered (SSR) app with Honeybadger is that we currently have separate, non-universal packages for browser JS and Node:

In the future these packages will be replaced by a new universal JavaScript client. Until then, you can still configure Honeybadger for server-side rendering with a little extra setup in most cases.

All Frameworks

All approaches to SSR generally involve the following steps:

  1. Check if currently in the browser or server (Node.js) runtime
  2. Conditionally require and configure the correct package

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 setting up Honeybadger for the browser and Node:

if (typeof(window) === 'undefined') {
  // Node
  // https://docs.honeybadger.io/lib/node.html#configuration
  Honeybadger.configure({
    apiKey: process.env.HONEYBADGER_API_KEY,
    environment: process.env.NODE_ENV
  })
} else {
  // Browser
  // https://docs.honeybadger.io/lib/javascript/reference/configuration.html
  const Honeybadger = require('honeybadger-js')
  Honeybadger.configure({
    apiKey: process.env.HONEYBADGER_API_KEY,
    disabled: process.env.NODE_ENV !== 'production'
  })
}

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 Josh, or msg him on Twitter. 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:

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:

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.