feat(nextjs/vercel-edge/cloudflare): Switch to OTEL for performance monitoring (#13889)

Co-authored-by: Charly Gomez <[email protected]>

Author: Luca Forstner

.github/workflows/build.yml

@@ -1037,6 +1037,7 @@ jobs:
           retention-days: 7
 
       - name: Pre-process E2E Test Dumps
+        if: always()
         run: |
           node ./scripts/normalize-e2e-test-dump-transaction-events.js
 
@@ -1193,6 +1194,7 @@ jobs:
         run: pnpm ${{ matrix.assert-command || 'test:assert' }}
 
       - name: Pre-process E2E Test Dumps
+        if: always()
         run: |
           node ./scripts/normalize-e2e-test-dump-transaction-events.js
 

.size-limit.js

@@ -224,7 +224,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '39 KB',
+    limit: '39.1 KB',
   },
   // SvelteKit SDK (ESM)
   {

dev-packages/e2e-tests/publish-packages.ts

@@ -12,21 +12,19 @@ const packageTarballPaths = glob.sync('packages/*/sentry-*.tgz', {
 
 // Publish built packages to the fake registry
 packageTarballPaths.forEach(tarballPath => {
+  // eslint-disable-next-line no-console
+  console.log(`Publishing tarball ${tarballPath} ...`);
   // `--userconfig` flag needs to be before `publish`
   childProcess.exec(
     `npm --userconfig ${__dirname}/test-registry.npmrc publish ${tarballPath}`,
     {
       cwd: repositoryRoot, // Can't use __dirname here because npm would try to publish `@sentry-internal/e2e-tests`
       encoding: 'utf8',
     },
-    (err, stdout, stderr) => {
-      // eslint-disable-next-line no-console
-      console.log(stdout);
-      // eslint-disable-next-line no-console
-      console.log(stderr);
+    err => {
       if (err) {
         // eslint-disable-next-line no-console
-        console.error(err);
+        console.error(`Error publishing tarball ${tarballPath}`, err);
         process.exit(1);
       }
     },

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

@@ -17,7 +17,7 @@
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
-    "next": "13.2.0",
+    "next": "13.5.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5"

dev-packages/e2e-tests/test-applications/nextjs-13/pages/customPageExtension.page.tsx renamed to dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/customPageExtension.page.tsx

@@ -46,3 +46,38 @@ test('should create a pageload transaction when the `pages` directory is used',
     type: 'transaction',
   });
 });
+
+test('should create a pageload transaction with correct name when an error occurs in getServerSideProps', async ({
+  page,
+}) => {
+  const transactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {
+    return (
+      transactionEvent.transaction === '/[param]/error-getServerSideProps' &&
+      transactionEvent.contexts?.trace?.op === 'pageload'
+    );
+  });
+
+  await page.goto(`/something/error-getServerSideProps`, { waitUntil: 'networkidle' });
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toMatchObject({
+    contexts: {
+      trace: {
+        data: {
+          'sentry.op': 'pageload',
+          'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
+          'sentry.source': 'route',
+        },
+        op: 'pageload',
+        origin: 'auto.pageload.nextjs.pages_router_instrumentation',
+      },
+    },
+    transaction: '/[param]/error-getServerSideProps',
+    transaction_info: { source: 'route' },
+    type: 'transaction',
+  });
+
+  // Ensure the transaction name is not '/_error'
+  expect(transaction.transaction).not.toBe('/_error');
+});

dev-packages/e2e-tests/test-applications/nextjs-13/pages/error-getServerSideProps.tsx renamed to dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/error-getServerSideProps.tsx

@@ -11,7 +11,7 @@ test('should propagate serverside `getInitialProps` trace to client', async ({ p
 
   const serverTransactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {
     return (
-      transactionEvent.transaction === '/[param]/withInitialProps' &&
+      transactionEvent.transaction === 'GET /[param]/withInitialProps' &&
       transactionEvent.contexts?.trace?.op === 'http.server'
     );
   });
@@ -47,7 +47,7 @@ test('should propagate serverside `getInitialProps` trace to client', async ({ p
           status: 'ok',
         },
       },
-      transaction: '/[param]/withInitialProps',
+      transaction: 'GET /[param]/withInitialProps',
       transaction_info: {
         source: 'route',
       },

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

@@ -11,7 +11,7 @@ test('Should record performance for getServerSideProps', async ({ page }) => {
 
   const serverTransactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {
     return (
-      transactionEvent.transaction === '/[param]/withServerSideProps' &&
+      transactionEvent.transaction === 'GET /[param]/withServerSideProps' &&
       transactionEvent.contexts?.trace?.op === 'http.server'
     );
   });
@@ -47,7 +47,7 @@ test('Should record performance for getServerSideProps', async ({ page }) => {
           status: 'ok',
         },
       },
-      transaction: '/[param]/withServerSideProps',
+      transaction: 'GET /[param]/withServerSideProps',
       transaction_info: {
         source: 'route',
       },

dev-packages/e2e-tests/test-applications/nextjs-13/tests/isomorphic/getInitialProps.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
-test('should not automatically create transactions for routes that were excluded from auto wrapping (string)', async ({
+test('should not apply build-time instrumentation for routes that were excluded from auto wrapping (string)', async ({
   request,
 }) => {
   const transactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {
@@ -13,17 +13,13 @@ test('should not automatically create transactions for routes that were excluded
 
   expect(await (await request.get(`/api/endpoint-excluded-with-string`)).text()).toBe('{"success":true}');
 
-  let transactionPromiseReceived = false;
-  transactionPromise.then(() => {
-    transactionPromiseReceived = true;
-  });
-
-  await new Promise(resolve => setTimeout(resolve, 5_000));
+  const transaction = await transactionPromise;
 
-  expect(transactionPromiseReceived).toBe(false);
+  expect(transaction.contexts?.trace?.data?.['sentry.origin']).toBeDefined();
+  expect(transaction.contexts?.trace?.data?.['sentry.origin']).not.toBe('auto.http.nextjs'); // This is the origin set by the build time instrumentation
 });
 
-test('should not automatically create transactions for routes that were excluded from auto wrapping (regex)', async ({
+test('should not apply build-time instrumentation for routes that were excluded from auto wrapping (regex)', async ({
   request,
 }) => {
   const transactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {
@@ -35,12 +31,8 @@ test('should not automatically create transactions for routes that were excluded
 
   expect(await (await request.get(`/api/endpoint-excluded-with-regex`)).text()).toBe('{"success":true}');
 
-  let transactionPromiseReceived = false;
-  transactionPromise.then(() => {
-    transactionPromiseReceived = true;
-  });
-
-  await new Promise(resolve => setTimeout(resolve, 5_000));
+  const transaction = await transactionPromise;
 
-  expect(transactionPromiseReceived).toBe(false);
+  expect(transaction.contexts?.trace?.data?.['sentry.origin']).toBeDefined();
+  expect(transaction.contexts?.trace?.data?.['sentry.origin']).not.toBe('auto.http.nextjs'); // This is the origin set by the build time instrumentation
 });