feat(nextjs): Add exception handler for _error.js

[lobsterkatie]

In order to have Sentry capture certain kinds of errors in nextjs, users need to add a custom _error.js file to their projects. We do this automatically when users go through the wizard setup, but the file we've been adding is just a clone of the one in vercel's with-sentry nextjs example app, and is simultaneously quite verbose and pretty bare-bones in terms of what it does. (This is not a knock on the folks who wrote it, who don't have the context we do, but the fact remains that it could stand to be improved.)

This does so, by creating a utility function, captureUnderscoreErrorException, for users to use in place of the manual edge-case handling and captureException calls in the original. In addition to cleaning things up, this allows us to modify behavior, fix bugs, and add features without users having to update their code. (Existing users will have to update to use the function, of course, but after that they should never have to touch it again. And for new users, it'll be a set-it-and-forget-it.)

With this change, the _error.js we add with the wizard becomes just

import * as Sentry from '@sentry/nextjs';
import NextErrorComponent from 'next/error';

const CustomErrorComponent = props => {
  Sentry.captureUnderscoreErrorException(props);
  return <NextErrorComponent statusCode={props.statusCode} />;
};

CustomErrorComponent.getInitialProps = async contextData => {
  await Sentry.captureUnderscoreErrorException(contextData);
  return NextErrorComponent.getInitialProps(contextData);
};

export default CustomErrorComponent;

(The real copy has helpful comments, but they've been removed here for the sake of brevity.)

And speaking of adding features... why not start now? This new function improves on the existing code by:

• filtering out all 400-type errors, not just 404s,
• annotating errors with a mechanism value,
• adding request data to the event when available, and
• capturing a message when falsy errors are thrown.

(See below for screenshots of the difference adding this data makes.)

The file injected by the wizard is updated in getsentry/sentry-wizard#170, and the file used in the with-sentry example app is updated in vercel/next.js#37866.

Ref: WEB-928

---

Screenshots

Before:

After:

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	19.35 KB (added)
@sentry/browser - ES5 CDN Bundle (minified)	59.85 KB (added)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	18.15 KB (added)
@sentry/browser - ES6 CDN Bundle (minified)	53.49 KB (added)
@sentry/browser - Webpack (gzipped + minified)	19.92 KB (added)
@sentry/browser - Webpack (minified)	64.85 KB (added)
@sentry/react - Webpack (gzipped + minified)	19.95 KB (added)
@sentry/nextjs Client - Webpack (gzipped + minified)	43.91 KB (added)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	25.52 KB (added)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	24.04 KB (added)

[vladanpaunovic]

Fixes #5131