Sentry: Enable autoInstrumentServerFunctions

frontend/next.config.js

@@ -138,7 +138,6 @@ const moduleExports = {
       return config;
    },
    sentry: {
-      autoInstrumentServerFunctions: false,
       // Upload artifacts in dist/framework as well; this includes sourcemaps
       // for react and other next.js code
       widenClientFileUpload: true,

frontend/package.json

@@ -46,8 +46,8 @@
       "@ifixit/shopify-storefront-client": "workspace:*",
       "@ifixit/ui": "workspace:*",
       "@ifixit/menu": "workspace:*",
-      "@sentry/nextjs": "7.42.0",
-      "@sentry/tracing": "7.42.0",
+      "@sentry/nextjs": "7.46.0",
+      "@sentry/tracing": "7.46.0",
       "@tanstack/react-query": "4.14.5",
       "algoliasearch": "4.13.1",
       "cookie": "0.5.0",

frontend/pages/_error.js

@@ -1,65 +1,39 @@
-import NextErrorComponent from 'next/error';
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * 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
-   }
+const CustomErrorComponent = (props) => {
+   // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+   // compensate for https://github.com/vercel/next.js/issues/8592
+   // Sentry.captureUnderscoreErrorException(props);
 
-   return <NextErrorComponent statusCode={statusCode} />;
+   return <NextErrorComponent statusCode={props.statusCode} />;
 };
 
-MyError.getInitialProps = async (context) => {
-   const errorInitialProps = await NextErrorComponent.getInitialProps(context);
-
-   const { res, err, asPath } = context;
-
-   // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
-   // getInitialProps has run
-   errorInitialProps.hasGetInitialPropsRun = true;
-
-   // Returning early because we don't want to log 404 errors to Sentry.
-   if (res?.statusCode === 404) {
-      return errorInitialProps;
-   }
-
-   // 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);
-
-      return errorInitialProps;
-   }
-
-   // If this point is reached, getInitialProps was called without any
-   // 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}`)
-   );
-   await Sentry.flush(2000);
+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);
 
-   return errorInitialProps;
+   // This will contain the status code of the response
+   return NextErrorComponent.getInitialProps(contextData);
 };
 
-export default MyError;
+export default CustomErrorComponent;

frontend/pages/myPage.tsx

@@ -0,0 +1,17 @@
+import { GetServerSideProps } from 'next';
+
+const MyComponent = () => {
+   return <h1>Hello World!</h1>;
+};
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+   if (context.query.myParam === 'unhandled') {
+      Promise.reject(new Error('This is an unhandled rejected promise'));
+   } else if (context.query.myParam === 'handled') {
+      return Promise.reject(new Error('This is a handled rejected promise'));
+   }
+
+   return { props: {} };
+};
+
+export default MyComponent;

frontend/sentry.properties

@@ -1,4 +1,4 @@
 defaults.url=https://sentry.io/
 defaults.org=ifixit
 defaults.project=react-commerce
-cli.executable=../node_modules/@sentry/cli/bin/sentry-cli
+cli.executable=../node_modules/.pnpm/@[email protected]/node_modules/@sentry/cli/bin/sentry-cli

packages/sentry/package.json

@@ -6,7 +6,7 @@
    "license": "MIT",
    "dependencies": {
       "@ifixit/helpers": "workspace:*",
-      "@sentry/nextjs": "^7.42.0"
+      "@sentry/nextjs": "7.46.0"
    },
    "peerDependencies": {
       "next": "12.2.3",