Update Sentry example for use with Sentry/Vercel integration (#15349)

* Update Sentry example for use with Sentry/Vercel integration

* update linting

* Update link in readme

* Update readme, add comment

* Add step about commit SHA

* Updated readme

* Use if

* dont call sentry webpack plugin w/o a commit sha present

* Update examples/with-sentry/README.md
Co-authored-by: NLuis Alvarez D. <luis@vercel.com>

* update release value

* prettier readme

* Updated note
Co-authored-by: NLuis Alvarez <luis@vercel.com>
Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

examples/with-sentry/README.md

@@ -24,27 +24,6 @@ npx create-next-app --example with-sentry with-sentry
 yarn create next-app --example with-sentry with-sentry
 ```
 
-### Download Manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-sentry
-cd with-sentry
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
 ## Configuration
 
 ### Step 1. Enable error tracking
@@ -75,10 +54,19 @@ Your app should be up and running on [http://localhost:3000](http://localhost:30
 
 ### Step 3. Automatic sourcemap upload (optional)
 
+#### Using Vercel
+
+You will need to install and configure the [Sentry Vercel integration](https://docs.sentry.io/workflow/integrations/vercel). After you've completed the project linking step, all the needed environment variables will be set in your Vercel project.
+
+> **Note:** A Vercel project connected to a [Git integration](https://vercel.com/docs/v2/platform/deployments#git-integration) is required before adding the Sentry integration.
+
+#### Without Using Vercel
+
 1. Set up the `NEXT_PUBLIC_SENTRY_DSN` environment variable as described above.
-2. Save your Sentry Organization slug as the `SENTRY_ORG` environment variable and your project slug as the `SENTRY_PROJECT` environment variable in `.env.local`.
-3. Create an auth token in Sentry. The recommended way to do this is by creating a new internal integration for your organization. To do so, go into **Settings > Developer Settings > New internal integration**. After the integration is created, copy the Token.
-4. Save the token inside the `SENTRY_AUTH_TOKEN` environment variable in `.env.local`.
+2. Save your Sentry organization slug as the `SENTRY_ORG` environment variable and your project slug as the `SENTRY_PROJECT` environment variable in `.env.local`.
+3. Save your git provider's commit SHA as either `VERCEL_GITHUB_COMMIT_SHA`, `VERCEL_GITLAB_COMMIT_SHA`, or `VERCEL_BITBUCKET_COMMIT_SHA` environment variable in `.env.local`.
+4. Create an auth token in Sentry. The recommended way to do this is by creating a new internal integration for your organization. To do so, go into **Settings > Developer Settings > New internal integration**. After the integration is created, copy the Token.
+5. Save the token inside the `SENTRY_AUTH_TOKEN` environment variable in `.env.local`.
 
 > **Note:** Sourcemap upload is disabled in development mode using the `NODE_ENV` environment variable. To change this behavior, remove the `NODE_ENV === 'production'` check from your `next.config.js` file.
 

examples/with-sentry/next.config.js

@@ -10,8 +10,16 @@ const {
   SENTRY_PROJECT,
   SENTRY_AUTH_TOKEN,
   NODE_ENV,
+  VERCEL_GITHUB_COMMIT_SHA,
+  VERCEL_GITLAB_COMMIT_SHA,
+  VERCEL_BITBUCKET_COMMIT_SHA,
 } = process.env
 
+const COMMIT_SHA =
+  VERCEL_GITHUB_COMMIT_SHA ||
+  VERCEL_GITLAB_COMMIT_SHA ||
+  VERCEL_BITBUCKET_COMMIT_SHA
+
 process.env.SENTRY_DSN = SENTRY_DSN
 
 module.exports = withSourceMaps({
@@ -44,6 +52,7 @@ module.exports = withSourceMaps({
       SENTRY_ORG &&
       SENTRY_PROJECT &&
       SENTRY_AUTH_TOKEN &&
+      COMMIT_SHA &&
       NODE_ENV === 'production'
     ) {
       config.plugins.push(
@@ -51,7 +60,7 @@ module.exports = withSourceMaps({
           include: '.next',
           ignore: ['node_modules'],
           urlPrefix: '~/_next',
-          release: options.buildId,
+          release: COMMIT_SHA,
         })
       )
     }

examples/with-sentry/pages/_app.js

 import * as Sentry from '@sentry/node'
 
-Sentry.init({
-  enabled: process.env.NODE_ENV === 'production',
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-})
+if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    enabled: process.env.NODE_ENV === 'production',
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  })
+}
 
 export default function App({ Component, pageProps, err }) {
   // Workaround for https://github.com/vercel/next.js/issues/8592

examples/with-sentry/pages/_error.js

 import NextErrorComponent from 'next/error'
 import * as Sentry from '@sentry/node'
 
-const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
+const MyError = async ({ statusCode, hasGetInitialPropsRun, err }) => {
   if (!hasGetInitialPropsRun && err) {
     // getInitialProps is not called in case of
     // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
     // err via _app.js so it can be captured
     Sentry.captureException(err)
+    // flush is needed after calling captureException to send server side errors to Sentry, otherwise the serverless function will exit before it's sent
+    await Sentry.flush(2000)
   }
 
   return <NextErrorComponent statusCode={statusCode} />
@@ -41,6 +43,7 @@ MyError.getInitialProps = async ({ res, err, asPath }) => {
   }
   if (err) {
     Sentry.captureException(err)
+    await Sentry.flush(2000)
     return errorInitialProps
   }
 
@@ -50,6 +53,7 @@ MyError.getInitialProps = async ({ res, err, asPath }) => {
   Sentry.captureException(
     new Error(`_error.js getInitialProps missing data at path: ${asPath}`)
   )
+  await Sentry.flush(2000)
 
   return errorInitialProps
 }