test(nextjs): Extract pages routes tests from nextjs-app-dir e2e tests (#17175)

Author: chargome

dev-packages/e2e-tests/test-applications/nextjs-app-dir/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "create-next-app",
+  "name": "nextjs-app-dir",
   "version": "0.1.0",
   "private": true,
   "scripts": {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/.gitignore

@@ -0,0 +1,46 @@
+# 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
+
+.vscode
+
+test-results
+event-dumps

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/.npmrc

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

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/app/index.tsx

@@ -0,0 +1 @@
+// Without this file (or better said without the app directory), we run into a otel dependency issue on the edge runtime

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/assert-build.ts

@@ -0,0 +1,44 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as assert from 'assert/strict';
+
+const packageJson = require('./package.json');
+const nextjsVersion = packageJson.dependencies.next;
+
+const buildStdout = fs.readFileSync('.tmp_build_stdout', 'utf-8');
+const buildStderr = fs.readFileSync('.tmp_build_stderr', 'utf-8');
+
+const getLatestNextVersion = async () => {
+  try {
+    const response = await fetch('https://registry.npmjs.org/next/latest');
+    const data = await response.json();
+    return data.version as string;
+  } catch {
+    return '0.0.0';
+  }
+};
+
+(async () => {
+  // Assert that there was no funky build time warning when we are on a stable (pinned) version
+  if (
+    !nextjsVersion.includes('-canary') &&
+    !nextjsVersion.includes('-rc') &&
+    // If we install latest we cannot assert on "latest" because the package json will contain the actual version number
+    nextjsVersion !== (await getLatestNextVersion())
+  ) {
+    assert.doesNotMatch(
+      buildStderr,
+      /Import trace for requested module/, // This is Next.js/Webpack speech for "something is off"
+      `The E2E tests detected a build warning in the Next.js build output:\n\n--------------\n\n${buildStderr}\n\n--------------\n\n`,
+    );
+  }
+
+  // Read the contents of the directory
+  const files = fs.readdirSync(path.join(process.cwd(), '.next', 'static'));
+  const mapFiles = files.filter(file => path.extname(file) === '.map');
+  if (mapFiles.length > 0) {
+    throw new Error(
+      'Client bundle .map files found even though `sourcemaps.deleteSourcemapsAfterUpload` option is set!',
+    );
+  }
+})();

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/components/client-error-debug-tools.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { captureException } from '@sentry/nextjs';
+import { useContext, useState } from 'react';
+import { SpanContext } from './span-context';
+
+export function ClientErrorDebugTools() {
+  const spanContextValue = useContext(SpanContext);
+  const [spanName, setSpanName] = useState<string>('');
+
+  const [isFetchingAPIRoute, setIsFetchingAPIRoute] = useState<boolean>();
+  const [isFetchingEdgeAPIRoute, setIsFetchingEdgeAPIRoute] = useState<boolean>();
+  const [isFetchingExternalAPIRoute, setIsFetchingExternalAPIRoute] = useState<boolean>();
+  const [renderError, setRenderError] = useState<boolean>();
+
+  if (renderError) {
+    throw new Error('Render Error');
+  }
+
+  return (
+    <div>
+      {spanContextValue.spanActive ? (
+        <button
+          onClick={() => {
+            spanContextValue.stop();
+            setSpanName('');
+          }}
+        >
+          Stop span
+        </button>
+      ) : (
+        <>
+          <input
+            type="text"
+            placeholder="Span name"
+            value={spanName}
+            onChange={e => {
+              setSpanName(e.target.value);
+            }}
+          />
+          <button
+            onClick={() => {
+              spanContextValue.start(spanName);
+            }}
+          >
+            Start span
+          </button>
+        </>
+      )}
+      <br />
+      <br />
+      <button
+        onClick={() => {
+          throw new Error('Click Error');
+        }}
+      >
+        Throw error
+      </button>
+      <br />
+      <button
+        onClick={() => {
+          return Promise.reject('Promise Click Error');
+        }}
+      >
+        Throw promise rejection
+      </button>
+      <br />
+      <button
+        onClick={() => {
+          setRenderError(true);
+        }}
+      >
+        Cause render error
+      </button>
+      <br />
+      <br />
+      <button
+        onClick={async () => {
+          setIsFetchingAPIRoute(true);
+          try {
+            await fetch('/api/endpoint');
+          } catch (e) {
+            captureException(e);
+          }
+          setIsFetchingAPIRoute(false);
+        }}
+        disabled={isFetchingAPIRoute}
+      >
+        Send request to Next.js API route
+      </button>
+      <br />
+      <button
+        onClick={async () => {
+          setIsFetchingEdgeAPIRoute(true);
+          try {
+            await fetch('/api/edge-endpoint');
+          } catch (e) {
+            captureException(e);
+          }
+          setIsFetchingEdgeAPIRoute(false);
+        }}
+        disabled={isFetchingEdgeAPIRoute}
+      >
+        Send request to Next.js Edge API route
+      </button>
+      <br />
+      <button
+        onClick={async () => {
+          setIsFetchingExternalAPIRoute(true);
+          try {
+            await fetch('https://example.com/', { mode: 'no-cors' });
+          } catch (e) {
+            captureException(e);
+          }
+          setIsFetchingExternalAPIRoute(false);
+        }}
+        disabled={isFetchingExternalAPIRoute}
+      >
+        Send request to external API route
+      </button>
+      <br />
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/components/span-context.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { startInactiveSpan, Span } from '@sentry/nextjs';
+import { PropsWithChildren, createContext, useState } from 'react';
+
+export const SpanContext = createContext<
+  { spanActive: false; start: (spanName: string) => void } | { spanActive: true; stop: () => void }
+>({
+  spanActive: false,
+  start: () => undefined,
+});
+
+export function SpanContextProvider({ children }: PropsWithChildren) {
+  const [span, setSpan] = useState<Span | undefined>(undefined);
+
+  return (
+    <SpanContext.Provider
+      value={
+        span
+          ? {
+              spanActive: true,
+              stop: () => {
+                span.end();
+                setSpan(undefined);
+              },
+            }
+          : {
+              spanActive: false,
+              start: (spanName: string) => {
+                const span = startInactiveSpan({ name: spanName });
+                setSpan(span);
+              },
+            }
+      }
+    >
+      {children}
+    </SpanContext.Provider>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/globals.d.ts

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

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/instrumentation-client.ts

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1.0,
+  sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/instrumentation.ts

@@ -0,0 +1,19 @@
+import * as Sentry from '@sentry/nextjs';
+
+export function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs' || process.env.NEXT_RUNTIME === 'edge') {
+    Sentry.init({
+      environment: 'qa', // dynamic sampling bias to keep transactions
+      dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+      tunnel: `http://localhost:3031/`, // proxy server
+      tracesSampleRate: 1.0,
+      sendDefaultPii: true,
+      transportOptions: {
+        // We are doing a lot of events at once in this test
+        bufferSize: 1000,
+      },
+    });
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;