Update sentry example (#11701)

* Fix the with-sentry-simple example configuration code

This fixes the following issues:
- #8873
- #11642

* Update the README with the info about uploading to sentry configurations

* Fix the typo in SENTRY_DNS -> SENTRY_DSN

examples/with-sentry-simple/README.md

@@ -49,16 +49,16 @@ This is a simple example showing how to use [Sentry](https://sentry.io) to catch
 - `_error.js` is rendered by Next.js while handling certain types of exceptions for you. It is overridden so those exceptions can be passed along to Sentry
 - `next.config.js` enables source maps in production for Sentry and swaps out `@sentry/node` for `@sentry/browser` when building the client bundle
 
-**Note**: Source maps will not be sent to Sentry when running locally (because Sentry cannot access your `localhost`). To accurately test client-side source maps, please deploy to Now.
-
-**Note**: Server-side source maps will not work unless you [manually upload them to Sentry](https://docs.sentry.io/platforms/node/sourcemaps/#making-source-maps-available-to-sentry).
+**Note**: Source maps will not be sent to Sentry when running locally (unless Sentry configuration environment variables are correctly defined during the build step)
 
 **Note**: Error handling [works differently in production](https://nextjs.org/docs#custom-error-handling). Some exceptions will not be sent to Sentry in development mode (i.e. `npm run dev`).
 
 **Note**: The build output will contain warning about unhandled Promise rejections. This caused by the test pages, and is expected.
 
 **Note**: The version of `@zeit/next-source-maps` (`0.0.4-canary.1`) is important and must be specified since it is not yet the default. Otherwise [source maps will not be generated for the server](https://github.com/zeit/next-plugins/issues/377).
 
+**Note**: Both `@zeit/next-source-maps` and `@sentry/webpack-plugin` are added to dependencies (rather than `devDependencies`) is because if used with SSR (ex. heroku), these plugins are used during production for generating the source-maps and sending them to sentry.
+
 ### Configuration
 
 You will need a _Sentry DSN_ for your project. You can get it from the settings of your project in **Client Keys (DSN)**. Then, copy the string labeled **DSN (Public)**.
@@ -71,6 +71,8 @@ Sentry.init({
 })
 ```
 
+More configurations available for [Sentry webpack plugin](https://github.com/getsentry/sentry-webpack-plugin) and using [Sentry Configuration variables](https://docs.sentry.io/cli/configuration/) for defining the releases/verbosity/etc.
+
 ### Disabling Sentry during development
 
 An easy way to disable Sentry while developing is to set its `enabled` flag based off of the `NODE_ENV` environment variable, which is [properly configured by the `next` subcommands](https://nextjs.org/docs#production-deployment).
@@ -82,18 +84,8 @@ Sentry.init({
 })
 ```
 
-### Hosting source maps vs. uploading them to Sentry
-
-This example shows how to generate your own source maps, which are hosted alongside your JavaScript bundles in production. But that has the potential for inaccurate results in Sentry.
-
-Sentry will attempt to [fetch the source map](https://docs.sentry.io/platforms/javascript/sourcemaps/#hosting--uploading) when it is processing an exception, as long as the "Enable JavaScript source fetching" setting is turned on for your Sentry project.
+### Disabling Sentry uploading during local builds
 
-However, there are some disadvantages with this approach. Sentry has written a blog post about them here: https://blog.sentry.io/2018/07/17/source-code-fetching
-
-If you decide that uploading source maps to Sentry would be better, one approach is to define a custom `now-build` script in your `package.json`. Zeit Now's `@now/next` builder will [call this script](https://github.com/zeit/now/blob/canary/packages/now-next/src/index.ts#L270) for you. You can define what to do after a build there:
-
-```
-"now-build": "next build && node ./post-build.js"
-```
+Unless the `SENTRY_DNS`, `SENTRY_ORG` and `SENTRY_PROJECT` environment variables passed to the build command, Sentry webpack plugin won't be added and the source maps won't be uploaded to sentry.
 
-In `./post-build.js` you can `require('@sentry/cli')` and go through the process of creating a Sentry release and [uploading source maps](https://docs.sentry.io/cli/releases/#sentry-cli-sourcemaps), and optionally deleting the `.js.map` files so they are not made public.
+Check [with-dotenv](https://github.com/zeit/next.js/tree/v9.3.4/examples/with-dotenv) example for integrating `.env` file env variables

examples/with-sentry-simple/next.config.js

@@ -1,5 +1,11 @@
+// Use the hidden-source-map option when you don't want the source maps to be
+// publicly available on the servers, only to the error reporting
 const withSourceMaps = require('@zeit/next-source-maps')()
 
+// Use the SentryWebpack plugin to upload the source maps during build step
+const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+const { SENTRY_DSN, SENTRY_ORG, SENTRY_PROJECT } = process.env
+
 module.exports = withSourceMaps({
   webpack: (config, options) => {
     // In `pages/_app.js`, Sentry is imported from @sentry/node. While
@@ -20,6 +26,20 @@ module.exports = withSourceMaps({
       config.resolve.alias['@sentry/node'] = '@sentry/browser'
     }
 
+    // When all the Sentry configuration env variables are available/configured
+    // The Sentry webpack plugin gets pushed to the webpack plugins to build
+    // and upload the source maps to sentry.
+    // This is an alternative to manually uploading the source maps
+    if (SENTRY_DSN && SENTRY_ORG && SENTRY_PROJECT) {
+      config.plugins.push(
+        new SentryWebpackPlugin({
+          include: '.next',
+          ignore: ['node_modules'],
+          urlPrefix: '~/_next',
+        })
+      )
+    }
+
     return config
   },
 })

examples/with-sentry-simple/package.json

@@ -10,11 +10,10 @@
   "dependencies": {
     "@sentry/browser": "^5.1.0",
     "@sentry/node": "^5.6.2",
+    "@sentry/webpack-plugin": "^1.10.0",
+    "@zeit/next-source-maps": "0.0.4-canary.1",
     "next": "latest",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
-  },
-  "devDependencies": {
-    "@zeit/next-source-maps": "0.0.4-canary.1"
   }
 }

examples/with-sentry-simple/pages/_app.js

@@ -3,8 +3,8 @@ import App from 'next/app'
 import * as Sentry from '@sentry/node'
 
 Sentry.init({
-  // Replace with your project's Sentry DSN
-  dsn: 'https://[email protected]/1111111',
+  enabled: process.env.NODE_ENV === 'production',
+  dsn: process.env.SENTRY_DSN,
 })
 
 class MyApp extends App {