fix: await Sentry. flush() on Vercel (#2)

Author: natterstefan

.npmrc

@@ -0,0 +1 @@
+save-exact=true

next.config.js

@@ -1,7 +1,7 @@
 /**
  * This file sets a custom webpack configuration to use your Next.js app
  * with Sentry.
- * 
+ *
  * @see https://nextjs.org/docs/api-reference/next.config.js/introduction
  * @see https://docs.sentry.io/platforms/javascript/guides/nextjs/
  * @see https://blog.sentry.io/2020/08/04/enable-suspect-commits-unminify-js-and-track-releases-with-vercel-and-sentry
@@ -12,10 +12,9 @@ const withPlugins = require('next-compose-plugins')
 const withGraphql = require('next-plugin-graphql')
 
 const moduleExports = {
-  future: { webpack5: true },
   publicRuntimeConfig: {
-    dns: process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
-  }
+    dns: process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN,
+  },
 }
 
 const SentryWebpackPluginOptions = {

package.json

@@ -5,17 +5,19 @@
   "private": true,
   "scripts": {
     "dev": "next",
+    "format": "prettier pages -w",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@sentry/nextjs": "^6.8.0",
-    "next": "^10.2.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@sentry/nextjs": "6.13.2",
+    "next": "11.1.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "next-compose-plugins": "^2.2.1",
-    "next-plugin-graphql": "^0.0.2"
+    "next-compose-plugins": "2.2.1",
+    "next-plugin-graphql": "0.0.2",
+    "prettier": "2.4.1"
   }
 }

pages/_app.js

@@ -11,4 +11,4 @@ MyApp.getInitialProps = async (appContext) => {
   return { ...appProps }
 }
 
-export default MyApp
+export default MyApp

pages/_error.js

@@ -51,7 +51,7 @@ MyError.getInitialProps = async ({ res, err, asPath }) => {
   // information about what the error might be. This is unexpected and may
   // indicate a bug introduced in Next.js, so record it in Sentry
   Sentry.captureException(
-    new Error(`_error.js getInitialProps missing data at path: ${asPath}`)
+    new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
   )
   await Sentry.flush(2000)
 

pages/api/test4.js

@@ -10,6 +10,7 @@ async function handler(req, res) {
   // Flushing before returning is necessary if deploying to Vercel, see
   // https://vercel.com/docs/platform/limits#streaming-responses
   await Sentry.flush(2000)
+
   res.status(200).json({ name: 'John Doe' })
 }
 

pages/index.js

@@ -4,8 +4,20 @@ import Image from 'next/image'
 const Index = () => (
   <div style={{ maxWidth: 700, margin: '0 auto' }}>
     <h2>Sentry Simple Example 🚨</h2>
-    <Image src="/pexels-polina-zimmerman-3747139.jpg" width="200" height="200"/>
-    <p><a href="https://www.pexels.com/photo/black-smartphone-displaying-error-3747139/" target="_blank" rel="noopener noreferrer">Image Source</a></p>
+    <Image
+      src="/pexels-polina-zimmerman-3747139.jpg"
+      width="200"
+      height="200"
+    />
+    <p>
+      <a
+        href="https://www.pexels.com/photo/black-smartphone-displaying-error-3747139/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Image Source
+      </a>
+    </p>
     <p>
       This example demonstrates how to record unhandled exceptions in your code
       with Sentry. There are several test pages below that result in various

pages/ssr/test4.js

@@ -7,12 +7,12 @@ export async function getServerSideProps() {
     throw new Error('SSR Test 4')
   } catch (error) {
     Sentry.captureException(error)
-
-    // Flushing before returning is necessary if deploying to Vercel, see
-    // https://vercel.com/docs/platform/limits#streaming-responses
-    await Sentry.flush(2000)
   }
 
+  // Flushing before returning is necessary if deploying to Vercel, see
+  // https://vercel.com/docs/platform/limits#streaming-responses
+  await Sentry.flush(2000)
+
   return { props: {} }
 }
 

prettier.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  arrowParens: 'always',
+  bracketSpacing: true,
+  endOfLine: 'auto',
+  printWidth: 80,
+  proseWrap: 'always',
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  tabWidth: 2,
+  useTabs: false,
+}