test(nextjs): Add NextJS client-side E2E tests

Author: onurtemizkan

packages/e2e-tests/README.md

@@ -66,7 +66,7 @@ fields:
 
 - The `buildCommand` command runs only once before any of the tests and is supposed to build the test application. If
   this command returns a non-zero exit code, it counts as a failed test and the test application's tests are not run. In
-  the example above, we use the `--pure-lockfile` flag to install depencies without modifiying the lockfile so that
+  the example above, we use the `--pure-lockfile` flag to install dependencies without modifiying the lockfile so that
   there aren't any changes in the git worktree after running the tests.
 - The `testCommand` command is supposed to run tests on the test application. If the configured command returns a
   non-zero exit code, it counts as a failed test.
@@ -107,7 +107,7 @@ A standardized frontend test application has the following features:
   `standard-frontend-nextjs`.
 - A page at path `/`
   - Having a `<input type="button" id="exception-button">` that captures an Exception when clicked. The returned
-    `eventId` from the `Sentry.captureException()` call must be written to `window.capturedExceptionId`. It doesn not
+    `eventId` from the `Sentry.captureException()` call must be written to `window.capturedExceptionId`. It does not
     matter what the captured error looks like.
   - Having an link with `id="navigation"` that navigates to `/user/5`. It doesn't have to be an `<a>` tag, for example
     if a framework has another way of doing routing, the important part is that the element to click for navigation has

packages/e2e-tests/package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@types/glob": "8.0.0",
     "@types/node": "^14.6.4",
+    "dotenv": "16.0.3",
     "glob": "8.0.3",
     "ts-node": "10.9.1",
     "typescript": "3.8.3",

packages/e2e-tests/run.ts

@@ -1,10 +1,14 @@
 /* eslint-disable max-lines */
 /* eslint-disable no-console */
 import * as childProcess from 'child_process';
+import * as dotenv from 'dotenv';
 import * as fs from 'fs';
 import * as glob from 'glob';
 import * as path from 'path';
 
+// Load environment variables from .env file locally
+dotenv.config();
+
 const repositoryRoot = path.resolve(__dirname, '../..');
 
 const TEST_REGISTRY_CONTAINER_NAME = 'verdaccio-e2e-test-registry';
@@ -51,6 +55,7 @@ if (missingEnvVar) {
 
 const envVarsToInject = {
   REACT_APP_E2E_TEST_DSN: process.env.E2E_TEST_DSN,
+  NEXT_PUBLIC_E2E_TEST_DSN: process.env.E2E_TEST_DSN,
 };
 
 // https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#grouping-log-lines

packages/e2e-tests/test-applications/create-next-app/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+!*.d.ts
+
+# Sentry
+.sentryclirc

packages/e2e-tests/test-applications/create-next-app/.npmrc

@@ -0,0 +1,2 @@
+@sentry:registry=http://localhost:4873
+@sentry-internal:registry=http://localhost:4873

packages/e2e-tests/test-applications/create-next-app/globals.d.ts

@@ -0,0 +1,4 @@
+interface Window {
+  recordedTransactions?: string[];
+  capturedExceptionId?: string;
+}

packages/e2e-tests/test-applications/create-next-app/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/e2e-tests/test-applications/create-next-app/next.config.js

@@ -0,0 +1,36 @@
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+const { withSentryConfig } = require('@sentry/nextjs');
+
+const moduleExports = {
+  // Your existing module.exports
+
+  sentry: {
+    // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
+    // for client-side builds. (This will be the default starting in
+    // `@sentry/nextjs` version 8.0.0.) See
+    // https://webpack.js.org/configuration/devtool/ and
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
+    // for more information.
+    hideSourceMaps: true,
+  },
+};
+
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  silent: true, // Suppresses all logs
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+// Make sure adding Sentry options is the last code to run before exporting, to
+// ensure that your source maps include changes from all other Webpack plugins
+module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

packages/e2e-tests/test-applications/create-next-app/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "TEST_MODE=build playwright test",
+    "test:dev": "TEST_MODE=dev playwright test"
+  },
+  "dependencies": {
+    "@next/font": "13.0.7",
+    "@sentry/nextjs": "*",
+    "@types/node": "18.11.17",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "next": "13.0.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.27.1"
+  }
+}

packages/e2e-tests/test-applications/create-next-app/pages/_app.tsx

@@ -0,0 +1,6 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

packages/e2e-tests/test-applications/create-next-app/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

packages/e2e-tests/test-applications/create-next-app/pages/_error.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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';
+import { NextPageContext } from 'next';
+
+const CustomErrorComponent = (props: { statusCode: any }) => {
+  // 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: NextPageContext) => {
+  // 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/e2e-tests/test-applications/create-next-app/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

packages/e2e-tests/test-applications/create-next-app/pages/client.tsx

@@ -0,0 +1,21 @@
+import Link from 'next/link';
+import * as Sentry from '@sentry/nextjs';
+
+const ClientError = (): JSX.Element => (
+  <>
+    <input
+      type="button"
+      value="Capture Exception"
+      id="exception-button"
+      onClick={() => {
+        const eventId = Sentry.captureException(new Error('I am an error!'));
+        window.capturedExceptionId = eventId;
+      }}
+    />
+    <Link href="/user/5" id="navigation">
+      navigate
+    </Link>
+  </>
+);
+
+export default ClientError;

packages/e2e-tests/test-applications/create-next-app/pages/index.tsx

@@ -0,0 +1,101 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import { Inter } from '@next/font/google';
+import styles from '../styles/Home.module.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className={styles.main}>
+        <div className={styles.description}>
+          <p>
+            Get started by editing&nbsp;
+            <code className={styles.code}>pages/index.tsx</code>
+          </p>
+          <div>
+            <a
+              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              By{' '}
+              <Image
+                src="/vercel.svg"
+                alt="Vercel Logo"
+                className={styles.vercelLogo}
+                width={100}
+                height={24}
+                priority
+              />
+            </a>
+          </div>
+        </div>
+
+        <div className={styles.center}>
+          <Image className={styles.logo} src="/next.svg" alt="Next.js Logo" width={180} height={37} priority />
+          <div className={styles.thirteen}>
+            <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
+          </div>
+        </div>
+
+        <div className={styles.grid}>
+          <a
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Docs <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>Find in-depth information about Next.js features and&nbsp;API.</p>
+          </a>
+
+          <a
+            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Learn <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
+          </a>
+
+          <a
+            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Templates <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>Discover and deploy boilerplate example Next.js&nbsp;projects.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Deploy <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>Instantly deploy your Next.js site to a shareable URL with&nbsp;Vercel.</p>
+          </a>
+        </div>
+      </main>
+    </>
+  );
+}

packages/e2e-tests/test-applications/create-next-app/pages/user/[id].tsx

@@ -0,0 +1,5 @@
+const User = () => {
+  return <p>I am a blank page :)</p>;
+};
+
+export default User;