Make Sentry report errors on Vercel 🤞🏻

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.44.2",
+      "@sentry/tracing": "7.44.2",
       "@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,16 @@
+import { GetServerSideProps } from 'next';
+
+const MyComponent = () => {
+   return <h1>Hello World!</h1>;
+};
+
+export const getServerSideProps: GetServerSideProps = 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.edge.config.ts

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN;
+
+Sentry.init({
+   debug: true,
+   dsn: SENTRY_DSN,
+   sampleRate: 1.0,
+   normalizeDepth: 5,
+   initialScope: {
+      tags: {
+         'next.runtime': 'edge',
+      },
+   },
+});

frontend/sentry.server.config.ts

@@ -7,6 +7,7 @@ import * as Sentry from '@sentry/nextjs';
 const SENTRY_DSN = process.env.SENTRY_DSN;
 
 Sentry.init({
+   debug: true,
    dsn: SENTRY_DSN,
    sampleRate: 1.0,
    normalizeDepth: 5,

packages/sentry/package.json

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