Sentry: Turn on auto instrument server funcs

frontend/lib/shopify-storefront-sdk/index.ts

@@ -45,9 +45,8 @@ export function getServerShopifyStorefrontSdk(shop: ShopCredentials) {
             scope.setExtra('query', doc);
             scope.setExtra('variables', variables);
             scope.setExtra('errors', result.errors);
-            Sentry.captureException(new Error(errorMessage));
+            throw new Error(errorMessage);
          });
-         throw new Error(errorMessage);
       }
       return result.data;
    };

frontend/lib/strapi-sdk/index.ts

@@ -39,9 +39,7 @@ const requester: Requester = async <R, V>(
          scope.setExtra('query', doc);
          scope.setExtra('variables', variables);
          scope.setExtra('errors', result.errors);
-         Sentry.captureException(
-            new Error('Strapi SDK GraphQL query failed with errors')
-         );
+         throw new Error('Strapi SDK GraphQL query failed with errors');
       });
    }
    throw new Error(`GraphQL query failed to execute: ${response.statusText}`);

frontend/next.config.js

@@ -149,7 +149,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/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;

packages/sentry/index.tsx

@@ -36,13 +36,6 @@ export const applySentryFetchMiddleware = () => {
    }
 };
 
-export const reportException: CaptureWithContextFn = (e, context) => {
-   Sentry.captureException(e, (scope) => {
-      scope.setContext('request', context);
-      return scope;
-   });
-};
-
 const withSentry: FetchMiddleware =
    (fetcher, shouldSkipRequest) => async (input, init) => {
       if (shouldSkipRequest?.(input, init)) {

packages/shopify-storefront-client/index.tsx

@@ -1,4 +1,3 @@
-import { reportException } from '@ifixit/sentry';
 import * as React from 'react';
 
 interface ShopifyStorefrontClientOptions {

packages/shopify-storefront-client/package.json

@@ -4,9 +4,6 @@
    "main": "./index.tsx",
    "types": "./index.tsx",
    "license": "MIT",
-   "dependencies": {
-      "@ifixit/sentry": "workspace:*"
-   },
    "devDependencies": {
       "@types/react": "18.0.24",
       "@types/react-dom": "18.0.8",