feat(examples): Use helper function in with-sentry example _error.js

examples/with-sentry/package.json

@@ -6,8 +6,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@sentry/nextjs": "^6.15.0",
-    "next": "^10.0.8 || 11.x",
+    "@sentry/nextjs": "^7.6.0",
+    "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

examples/with-sentry/pages/_error.js

@@ -1,56 +1,30 @@
-import NextErrorComponent from 'next/error'
+/**
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
 
 import * as Sentry from '@sentry/nextjs'
+import NextErrorComponent from 'next/error'
 
-const MyError = ({ 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)
-    // Flushing is not required in this case as it only happens on the client
-  }
-
-  return <NextErrorComponent statusCode={statusCode} />
-}
-
-MyError.getInitialProps = async ({ res, err }) => {
-  const errorInitialProps = await NextErrorComponent.getInitialProps({
-    res,
-    err,
-  })
-
-  // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
-  // getInitialProps has run
-  errorInitialProps.hasGetInitialPropsRun = true
-
-  // Running on the server, the response object (`res`) is available.
-  //
-  // Next.js will pass an err on the server if a page's data fetching methods
-  // threw or returned a Promise that rejected
-  //
-  // Running on the client (browser), Next.js will provide an err if:
-  //
-  //  - a page's `getInitialProps` threw or returned a Promise that rejected
-  //  - an exception was thrown somewhere in the React lifecycle (render,
-  //    componentDidMount, etc) that was caught by Next.js's React Error
-  //    Boundary. Read more about what types of exceptions are caught by Error
-  //    Boundaries: https://reactjs.org/docs/error-boundaries.html
-
-  if (err) {
-    Sentry.captureException(err)
-
-    // Flushing before returning is necessary if deploying to Vercel, see
-    // https://vercel.com/docs/platform/limits#streaming-responses
-    await Sentry.flush(2000)
+const CustomErrorComponent = (props) => (
+  <NextErrorComponent statusCode={props.statusCode} />
+)
 
-    return errorInitialProps
-  }
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData)
 
-  // If this point is reached, getInitialProps was called without any
-  // information about what the error might be. This can be caused by
-  // a falsy value being thrown e.g. throw undefined
-  return errorInitialProps
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData)
 }
 
-export default MyError
+export default CustomErrorComponent

examples/with-sentry/sentry.client.config.js

@@ -1,4 +1,4 @@
-// This file configures the intialization of Sentry on the browser.
+// This file configures the initialization of Sentry on the browser.
 // The config you add here will be used whenever a page is visited.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/