Explicitly capture getServerSideProps exceptions

frontend/helpers/next-helpers.ts

@@ -50,3 +50,5 @@ export const withNoindexDevDomains: GetServerSidePropsMiddleware = (next) => {
       return result;
    };
 };
+
+export const withSentry: GetServerSidePropsMiddleware = (next) => next;

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.45.0",
+      "@sentry/tracing": "7.45.0",
       "@tanstack/react-query": "4.14.5",
       "algoliasearch": "4.13.1",
       "cookie": "0.5.0",

frontend/pages/_error.tsx

@@ -0,0 +1,38 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * 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 type { NextPage } from 'next';
+import type { ErrorProps } from 'next/error';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent: NextPage<ErrorProps> = (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={props.statusCode} />;
+};
+
+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);
+
+   // This will contain the status code of the response
+   return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;

frontend/pages/myPage.tsx

@@ -0,0 +1,19 @@
+import { withSentry } from '@helpers/next-helpers';
+import { GetServerSideProps } from 'next';
+
+const MyComponent = () => {
+   return <h1>Hello World!</h1>;
+};
+
+export const getServerSideProps: GetServerSideProps = withSentry(
+   async (context) => {
+      if (context.query.myParam === 'two') {
+         // only throw conditionally so that this page actually builds
+         Promise.reject(new Error("We don't like page two"));
+      }
+
+      return { props: {} };
+   }
+);
+
+export default MyComponent;

frontend/sentry.server.config.ts

@@ -30,3 +30,9 @@ Sentry.init({
       return event;
    },
 });
+
+process.on('unhandledRejection', (reason) => {
+   console.log('[Debug] Reporting exception to sentry', reason);
+   Sentry.captureException(reason);
+   console.log('[Debug] Reported to Sentry');
+});

frontend/templates/page/server.tsx

@@ -1,41 +1,43 @@
 import { DEFAULT_STORE_CODE } from '@config/env';
 import { flags } from '@config/flags';
+import { withSentry } from '@helpers/next-helpers';
 import { ifixitOriginFromHost } from '@helpers/path-helpers';
 import { getLayoutServerSideProps } from '@layouts/default/server';
 import { findPage } from '@models/page/server';
 import { GetServerSideProps } from 'next';
 import { PageTemplateProps } from './hooks/usePageTemplateProps';
 
-export const getServerSideProps: GetServerSideProps<PageTemplateProps> = async (
-   context
-) => {
-   if (!flags.STORE_HOME_PAGE_ENABLED) {
-      return {
-         notFound: true,
-      };
-   }
+const withMiddleware = withSentry<PageTemplateProps>;
 
-   const layoutProps = await getLayoutServerSideProps({
-      storeCode: DEFAULT_STORE_CODE,
-   });
-   const page = await findPage({
-      path: '/Store',
-   });
+export const getServerSideProps: GetServerSideProps<PageTemplateProps> =
+   withMiddleware(async (context) => {
+      if (!flags.STORE_HOME_PAGE_ENABLED) {
+         return {
+            notFound: true,
+         };
+      }
+
+      const layoutProps = await getLayoutServerSideProps({
+         storeCode: DEFAULT_STORE_CODE,
+      });
+      const page = await findPage({
+         path: '/Store',
+      });
 
-   if (page == null) {
+      if (page == null) {
+         return {
+            notFound: true,
+         };
+      }
+
+      const pageProps: PageTemplateProps = {
+         layoutProps,
+         appProps: {
+            ifixitOrigin: ifixitOriginFromHost(context),
+         },
+         page,
+      };
       return {
-         notFound: true,
+         props: pageProps,
       };
-   }
-
-   const pageProps: PageTemplateProps = {
-      layoutProps,
-      appProps: {
-         ifixitOrigin: ifixitOriginFromHost(context),
-      },
-      page,
-   };
-   return {
-      props: pageProps,
-   };
-};
+   });

frontend/templates/product-list/server.tsx

@@ -1,7 +1,11 @@
 import { AppProviders, AppProvidersProps } from '@components/common';
 import { ALGOLIA_PRODUCT_INDEX_NAME, DEFAULT_STORE_CODE } from '@config/env';
 import { withCacheLong } from '@helpers/cache-control-helpers';
-import { withLogging, withNoindexDevDomains } from '@helpers/next-helpers';
+import {
+   withLogging,
+   withNoindexDevDomains,
+   withSentry,
+} from '@helpers/next-helpers';
 import { ifixitOriginFromHost } from '@helpers/path-helpers';
 import {
    destylizeDeviceItemType,
@@ -24,6 +28,7 @@ import { ProductListTemplateProps } from './hooks/useProductListTemplateProps';
 import { ProductListView } from './ProductListView';
 
 const withMiddleware = compose(
+   withSentry<ProductListTemplateProps>,
    withLogging<ProductListTemplateProps>,
    withCacheLong<ProductListTemplateProps>,
    withNoindexDevDomains<ProductListTemplateProps>

frontend/templates/product/server.tsx

@@ -1,6 +1,10 @@
 import { DEFAULT_STORE_CODE } from '@config/env';
 import { withCacheLong } from '@helpers/cache-control-helpers';
-import { withLogging, withNoindexDevDomains } from '@helpers/next-helpers';
+import {
+   withLogging,
+   withNoindexDevDomains,
+   withSentry,
+} from '@helpers/next-helpers';
 import { ifixitOriginFromHost } from '@helpers/path-helpers';
 import { invariant } from '@ifixit/helpers';
 import { urlFromContext } from '@ifixit/helpers/nextjs';
@@ -11,6 +15,7 @@ import { GetServerSideProps } from 'next';
 import { ProductTemplateProps } from './hooks/useProductTemplateProps';
 
 const withMiddleware = compose(
+   withSentry<ProductTemplateProps>,
    withLogging<ProductTemplateProps>,
    withCacheLong<ProductTemplateProps>,
    withNoindexDevDomains<ProductTemplateProps>

frontend/templates/troubleshooting/server.tsx

@@ -1,4 +1,5 @@
 import { DEFAULT_STORE_CODE } from '@config/env';
+import { withSentry } from '@helpers/next-helpers';
 import { ifixitOriginFromHost } from '@helpers/path-helpers';
 import { IFixitAPIClient } from '@ifixit/ifixit-api-client';
 import { getLayoutServerSideProps } from '@layouts/default/server';
@@ -8,39 +9,40 @@ import {
    TroubleshootingData,
 } from './hooks/useTroubleshootingProps';
 
-export const getServerSideProps: GetServerSideProps<
-   TroubleshootingProps
-> = async (context) => {
-   const layoutProps = await getLayoutServerSideProps({
-      storeCode: DEFAULT_STORE_CODE,
-   });
+const withMiddleware = withSentry<TroubleshootingProps>;
 
-   const ifixitOrigin = ifixitOriginFromHost(context);
-   const client = new IFixitAPIClient({ origin: ifixitOrigin });
+export const getServerSideProps: GetServerSideProps<TroubleshootingProps> =
+   withMiddleware(async (context) => {
+      const layoutProps = await getLayoutServerSideProps({
+         storeCode: DEFAULT_STORE_CODE,
+      });
 
-   const wikiname = context.params?.wikiname;
+      const ifixitOrigin = ifixitOriginFromHost(context);
+      const client = new IFixitAPIClient({ origin: ifixitOrigin });
 
-   if (!wikiname) {
-      return {
-         notFound: true,
-      };
-   }
+      const wikiname = context.params?.wikiname;
 
-   const wikiData = await client.get<TroubleshootingData>(
-      `Troubleshooting/${wikiname}`,
-      {
-         credentials: 'include',
+      if (!wikiname) {
+         return {
+            notFound: true,
+         };
       }
-   );
 
-   const pageProps: TroubleshootingProps = {
-      wikiData,
-      layoutProps,
-      appProps: {
-         ifixitOrigin,
-      },
-   };
-   return {
-      props: pageProps,
-   };
-};
+      const wikiData = await client.get<TroubleshootingData>(
+         `Troubleshooting/${wikiname}`,
+         {
+            credentials: 'include',
+         }
+      );
+
+      const pageProps: TroubleshootingProps = {
+         wikiData,
+         layoutProps,
+         appProps: {
+            ifixitOrigin,
+         },
+      };
+      return {
+         props: pageProps,
+      };
+   });

packages/sentry/package.json

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