Using @sentry/browser with Next.js for client and server-side rendering

_error.js

import * as Sentry from '@sentry/browser';
import getConfig from 'next/config';
import React from 'react';

const { SENTRY_DSN } = getConfig().publicRuntimeConfig;

Sentry.init({ dsn: SENTRY_DSN });

/**
 * Send an error event to Sentry.
 *
 * Server-side:
 * Next.js captures SSR errors and never passes them to the Sentry
 * middleware. It does, however, render the _error.js component, so
 * we can manually fire Sentry events here.
 *
 * Client-side:
 * Unhandled client exceptions will always bubble up to the _error.js
 * component, so we can manually fire events here.
 */
const notifySentry = (err, req, statusCode) => {
  Sentry.configureScope((scope) => {
    if (!req) {
      scope.setTag(`ssr`, false);
    } else {
      scope.setTag(`ssr`, true);
      scope.setExtra(`url`, req.url);
      scope.setExtra(`params`, req.params);
      scope.setExtra(`query`, req.query);
      scope.setExtra(`statusCode`, statusCode);
      scope.setExtra(`headers`, req.headers);

      if (req.user) {
        scope.setUser({ id: req.user.id, email: req.user.email });
      }
    }
  });

  Sentry.captureException(err);
};

export default class Error extends React.Component {
  static async getInitialProps({ req, res, err }) {
    let statusCode;

    if (res) {
      ({ statusCode } = res);
    } else if (err) {
      ({ statusCode } = err);
    } else {
      statusCode = null;
    }

    notifySentry(err, req, statusCode);

    return { statusCode };
  }

  render() {
    const { statusCode } = this.props;
    return statusCode;
  }
}

Thank you so much for posting this. It is critical to have sentry logging all the errors client and server side and this seems like the best way to do it for now.

thanks for sharing. how can node use the @sentry/browser module ?

Thanks for sharing! ❤️

Not working. Error Sentry Logger [Error]: Error while sending event: ReferenceError: XMLHttpRequest is not defined. What server.js looks like?

I've been doing a bit of digging to get Sentry configured correctly before shipping some of our apps to production. I wrote down what it takes to get a simple Sentry setup going here. Hope this helps!

import * as Sentry from '@sentry/browser' imports client-side version of Sentry. But when I try to call captureException on the server side, I get the error I wrote about above. This is due to the fact that NodeJS does not have an XMLHTTPRequest. How does it work for you?

@leerob

There are still a few issues with it, so I wouldn't recommend using it as a base for now. You might be able to extract pieces of the complex example and apply them as you see fit.

Thanks for sharing, but please put that at the top of your doc.

For everyone else here trying to get this working, check out https://github.com/zeit/next.js/blob/canary/examples/with-sentry <-- official example.

@corysimmons That quote is talking about the with-sentry example - not the code I provided.

That was the primary reason for me researching an easier way to set up Sentry. The "official" example was a little too complex. Hopefully that helps clarify 👍

Oh! I misunderstood what it was referring to in There are still a few issues with it. In that case your simple example will be really helpful (the complex one didn't even work in the end.. rip).

@leerob, could you explain more the part with uploading the source map to sentry (and not providing them publicly)...
I've followed the examples but cannot find a way to properly show the error stack in sentry
(full reference: https://stackoverflow.com/questions/61011281/next-js-source-maps-with-typescript-on-sentry)

@leerob, I've tried your example, but still doesn't seem to report errors on time.