Error reporting with Rollbar and Next.js



Thank you to Max Schmitt, for the blog post and content for using Rollbar with Next.js

Original Blog Post:


I'm going to assume that you have followed the basic Next.js setup and that you've created an account on Rollbar. Rollbar comes with a pretty generous free tier, so you don't have to spend any money until you get a serious amount of users (or errors).

Client-side and server-side errors

If you're running a universal JavaScript app, you have to be aware that you will need to setup error reporting from 2 places.

  • Client-side errors (and promise rejections) that occur in your user's browser
  • Server-side errors (and promise rejections) that occur on your own server (e.g. during server rendering)

Client-side error reporting with Next.js

The best way to report all client-side errors to Rollbar is by using the snippet from Rollbar's quick start guide.

The snippet is just a few kilobytes of JS and by placing it as high up as possible in your HTML, you can be sure that Rollbar will be able to report all errors that occur in your application client-side.

In Next.js we can use a custom Document to inject scripts into the tag.

import Document, { Html, Head, Main, NextScript } from 'next/document'
import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()
class MyDocument extends Document {
    render() {
        return (
                            __html: `
var _rollbarConfig = {
    accessToken: "${publicRuntimeConfig.rollbarClientToken}",
    captureUncaught: true,
    captureUnhandledRejections: true,
    payload: {
        environment: "production"
// Rollbar Snippet
// End Rollbar Snippet
                    <Main />
                    <NextScript />
export default MyDocument

The Rollbar snippet contains some backticks, so make sure to escape them if you're injecting it via a template string like in the example above.

That's pretty much all it takes to report your client-side errors. If you need to report any errors manually, you can do so via window.Rollbar.error.

As you can see in the script above, we're getting our Rollbar tokens from the publicRuntimeConfig.

Reporting Errors Caught by React

After including the Rollbar snippet from above, you can report errors caught by React by either adding an error boundary or, if your custom Next.js app is a class component, by catching errors in your custom App:

class App extends NextApp {
    // ...
    componentDidCatch(error) {
    // ...

Server-side error reporting with Next.js

To report server-side errors to Rollbar in Next.js, you need to setup a custom error page.

Since this article was written, the Next.js docs no longer mention the pages/_error.js page. It still works though and is necessary if you want to report server-side errors in Next.js. The pages/500.js page is statically generated and therefore cannot access server-side errors.

If an error is thrown during the getInitialProps of a page or while React is rendering, Next.js will show the error page and pass to it the error via ErrorPage.getInitialProps.

Take note that, like the rest of Next.js, the _error page can be loaded on client and server, depending on where the error occurs. So we need to check if we're on the server before we send anything to Rollbar.

If you're only using getServerSideProps and getStaticProps in your pages, getInitialProps of your custom error page always gets called on the client side, as I have observed.

import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()
function Error({ statusCode }) {
    return (
                ? `An error ${statusCode} occurred on server`
                : 'An error occurred on client'}
Error.getInitialProps = ({ req, res, err }) => {
    const statusCode = res ? res.statusCode : err ? err.statusCode : 404
    // Only require Rollbar and report error if we're on the server
    if (!process.browser) {
        console.log('Reporting error to Rollbar...')
        const Rollbar = require('rollbar')
        const rollbar = new Rollbar(serverRuntimeConfig.rollbarServerToken)
        rollbar.error(err, req, (rollbarError) => {
            if (rollbarError) {
                console.error('Rollbar error reporting failed:')
            console.log('Reported error to Rollbar')
    return { statusCode }
export default Error

Be aware that the custom error page only gets loaded in production. You can run Next.js in production mode with yarn start.

Also make sure that you have installed the Rollbar package (yarn add rollbar or npm install rollbar).

Where to put Rollbar access tokens in Next.js

Next.js offers a really handy way to configure variables that are either exposed on only the server (serverRuntimeConfig) or both server and client (publicRuntimeConfig).

This is handy because Rollbar gives us two different access tokens – post_client_item and post_server_item.

You can set these variables in a file called next.config.js:


module.exports = {
    serverRuntimeConfig: {
        // Will only be available on the server side
        rollbarServerToken: process.env.ROLLBAR_SERVER_TOKEN
    publicRuntimeConfig: {
        // Will be available on both server and client
        rollbarClientToken: process.env.ROLLBAR_CLIENT_TOKEN

To learn more about the runtime configs, have a look at the Next.js documentation.