Create simple Sentry example for exception reporting.

[leerob]

Overview

For many teams using Next.js, setting up exception monitoring is a critical requirement before going to production. The current with-sentry example, while thorough, is very complicated for beginners.

This PR adds a simple example showing how to use Sentry to catch & report errors on both client and server-side.

• _document.js is server-side only and is used to change the initial server-side rendered document markup. We listen at the node process level to capture exceptions.
• _app.js is client-side only and is used to initialize pages. We use the componentDidCatch lifecycle method to catch uncaught exceptions.

Note: Source maps will not be sent to Sentry when running locally. It's also possible you will see duplicate errors sent when testing locally due to hot reloading. For a more accurate simulation, please deploy to Now.

Testing

With the example deployed the Now, I can click the links to simulate errors.

Then, I'm able to see the errors flow into Sentry.

The errors are properly source mapped.

@lfades

[github-actions]

Stats from current PR

Click to expand stats

	zeit/next.js canary	leerob/next.js with-sentry-simple	Change
Build Duration	15.2s	14.7s	-441ms
node_modules Size	40 MB	40 MB	⚠️ +8 B
Total Bundle (main, webpack, commons) Size	209 kB	209 kB	✓
Total Bundle (main, webpack, commons) gzip Size	68.3 kB	68.3 kB	⚠️ +1 B
Client _app Size	2.54 kB	2.54 kB	✓
Client _app gzip Size	1.05 kB	1.05 kB	✓
Client _error Size	8.19 kB	8.19 kB	✓
Client _error gzip Size	3.11 kB	3.12 kB	⚠️ +1 B
Client pages/index Size	288 B	288 B	✓
Client pages/index gzip Size	222 B	222 B	✓
Client pages/link Size	4.83 kB	4.83 kB	✓
Client pages/link gzip Size	2.11 kB	2.11 kB	✓
Client pages/routerDirect Size	411 B	411 B	✓
Client pages/routerDirect gzip Size	296 B	296 B	✓
Client pages/withRouter Size	393 B	393 B	✓
Client pages/withRouter gzip Size	280 B	280 B	✓
Client main Size	23.3 kB	23.3 kB	✓
Client main gzip Size	7.63 kB	7.63 kB	⚠️ +1 B
Client commons Size	183 kB	183 kB	✓
Client commons gzip Size	59.4 kB	59.4 kB	✓
Client webpack Size	1.49 kB	1.49 kB	✓
Client webpack gzip Size	769 B	769 B	✓
Base Rendered Size	1.34 kB	1.34 kB	✓
Build Dir Size	801 kB	801 kB	✓

Click to expand serverless stats

	zeit/next.js canary	leerob/next.js with-sentry-simple	Change
Build Duration	16.3s	16.2s	-51ms
node_modules Size	40 MB	40 MB	⚠️ +8 B
Total Bundle (main, webpack, commons) Size	209 kB	209 kB	✓
Total Bundle (main, webpack, commons) gzip Size	68.3 kB	68.3 kB	✓
Client _app Size	2.54 kB	2.54 kB	✓
Client _app gzip Size	1.05 kB	1.05 kB	✓
Client _error Size	8.19 kB	8.19 kB	✓
Client _error gzip Size	3.12 kB	3.12 kB	✓
Client pages/index Size	288 B	288 B	✓
Client pages/index gzip Size	222 B	222 B	✓
Client pages/link Size	4.83 kB	4.83 kB	✓
Client pages/link gzip Size	2.11 kB	2.11 kB	✓
Client pages/routerDirect Size	411 B	411 B	✓
Client pages/routerDirect gzip Size	296 B	296 B	✓
Client pages/withRouter Size	393 B	393 B	✓
Client pages/withRouter gzip Size	280 B	280 B	✓
Client main Size	23.3 kB	23.3 kB	✓
Client main gzip Size	7.63 kB	7.63 kB	✓
Client commons Size	183 kB	183 kB	✓
Client commons gzip Size	59.4 kB	59.4 kB	✓
Client webpack Size	1.49 kB	1.49 kB	✓
Client webpack gzip Size	769 B	769 B	✓
Serverless pages/link Size	342 kB	342 kB	✓
Serverless pages/link gzip Size	88.7 kB	88.7 kB	⚠️ +3 B
Serverless pages/index Size	333 kB	333 kB	✓
Serverless pages/index gzip Size	86.3 kB	86.3 kB	⚠️ +2 B
Serverless pages/_error Size	334 kB	334 kB	✓
Serverless pages/_error gzip Size	86.1 kB	86.1 kB	⚠️ +2 B
Serverless pages/routerDirect Size	333 kB	333 kB	✓
Serverless pages/routerDirect gzip Size	86.3 kB	86.3 kB	-1 B
Serverless pages/withRouter Size	333 kB	333 kB	✓
Serverless pages/withRouter gzip Size	86.4 kB	86.4 kB	⚠️ +2 B
Build Dir Size	2.37 MB	2.37 MB	✓

[lfades]

@leerob Thank you 💯

[raphaelpc]

Hello!
First of all, thanks for the very helpful example!
Second, i tried to execute the example on Next 9.0.2, and have 2 observations:

1. Executing the example as is, i get the following error:
   ""Index.getInitialProps()" should resolve to an object. But found "undefined" instead."
   To resolve it, i had to return an empty object ({ }) from getInitialProps.
   [Edit: that, actually, happened because, before, i removed getInitialProps from _app, as is now recommended]

2. When i try to access index with query param "initialError", i get an error on my application ("Error: Error in getInitialProps") but no error is captured by Sentry. Is that really the way it's supposed to work? I checked that on another thread you said the example is really supposed to work like that:
   Create simple Sentry example for exception reporting. #7119 (comment)
   So, there really isn't a simple way to capture errors on getInitialProps? My application access the back-end api at that point, and would be very usefull for me to be able to capture any errors that might happen at that point.

Thanks in advance for any tips!

[lfades]

@raphaelpc any updates to the example are welcome 🙏