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;
  }
}

@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.