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:

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:

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:

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.