test(e2e): Decode gzipped envelopes in E2E tests (#8926)

Author: Luca Forstner

packages/e2e-tests/test-applications/nextjs-app-dir/.gitignore

@@ -41,3 +41,5 @@ next-env.d.ts
 .sentryclirc
 
 .vscode
+
+test-results

packages/e2e-tests/test-applications/nextjs-app-dir/event-proxy-server.ts

@@ -7,6 +7,7 @@ import type { AddressInfo } from 'net';
 import * as os from 'os';
 import * as path from 'path';
 import * as util from 'util';
+import * as zlib from 'zlib';
 
 const readFile = util.promisify(fs.readFile);
 const writeFile = util.promisify(fs.writeFile);
@@ -44,8 +45,12 @@ export async function startEventProxyServer(options: EventProxyServerOptions): P
     });
 
     proxyRequest.addListener('end', () => {
-      const proxyRequestBody = Buffer.concat(proxyRequestChunks).toString();
-      const envelopeHeader: { dsn?: string } = JSON.parse(proxyRequestBody.split('\n')[0]);
+      const proxyRequestBody =
+        proxyRequest.headers['content-encoding'] === 'gzip'
+          ? zlib.gunzipSync(Buffer.concat(proxyRequestChunks)).toString()
+          : Buffer.concat(proxyRequestChunks).toString();
+
+      let envelopeHeader = JSON.parse(proxyRequestBody.split('\n')[0]);
 
       if (!envelopeHeader.dsn) {
         throw new Error('[event-proxy-server] No dsn on envelope header. Please set tunnel option.');
@@ -71,12 +76,11 @@ export async function startEventProxyServer(options: EventProxyServerOptions): P
 
           sentryResponse.addListener('end', () => {
             eventCallbackListeners.forEach(listener => {
-              const rawProxyRequestBody = Buffer.concat(proxyRequestChunks).toString();
               const rawSentryResponseBody = Buffer.concat(sentryResponseChunks).toString();
 
               const data: SentryRequestCallbackData = {
-                envelope: parseEnvelope(rawProxyRequestBody, new TextEncoder(), new TextDecoder()),
-                rawProxyRequestBody,
+                envelope: parseEnvelope(proxyRequestBody, new TextEncoder(), new TextDecoder()),
+                rawProxyRequestBody: proxyRequestBody,
                 rawSentryResponseBody,
                 sentryResponseStatusCode: sentryResponse.statusCode,
               };

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

@@ -19,7 +19,7 @@
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
-    "next": "13.2.4",
+    "next": "13.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5",

packages/e2e-tests/test-applications/nextjs-app-dir/tests/edge-route.test.ts

@@ -2,8 +2,6 @@ import { test, expect } from '@playwright/test';
 import { waitForTransaction, waitForError } from '../event-proxy-server';
 
 test('Should create a transaction for edge routes', async ({ request }) => {
-  test.skip(process.env.TEST_ENV === 'development', "Doesn't work in dev mode.");
-
   const edgerouteTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'GET /api/edge-endpoint' && transactionEvent?.contexts?.trace?.status === 'ok'
@@ -21,8 +19,6 @@ test('Should create a transaction for edge routes', async ({ request }) => {
 });
 
 test('Should create a transaction with error status for faulty edge routes', async ({ request }) => {
-  test.skip(process.env.TEST_ENV === 'development', "Doesn't work in dev mode.");
-
   const edgerouteTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'GET /api/error-edge-endpoint' &&
@@ -42,8 +38,6 @@ test('Should create a transaction with error status for faulty edge routes', asy
 });
 
 test('Should record exceptions for faulty edge routes', async ({ request }) => {
-  test.skip(process.env.TEST_ENV === 'development', "Doesn't work in dev mode.");
-
   const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Edge Route Error';
   });

packages/e2e-tests/test-applications/nextjs-app-dir/tests/middleware.test.ts

@@ -2,8 +2,6 @@ import { test, expect } from '@playwright/test';
 import { waitForTransaction, waitForError } from '../event-proxy-server';
 
 test('Should create a transaction for middleware', async ({ request }) => {
-  test.skip(process.env.TEST_ENV === 'development', "Doesn't work in dev mode.");
-
   const middlewareTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'middleware' && transactionEvent?.contexts?.trace?.status === 'ok';
   });
@@ -19,8 +17,6 @@ test('Should create a transaction for middleware', async ({ request }) => {
 });
 
 test('Should create a transaction with error status for faulty middleware', async ({ request }) => {
-  test.skip(process.env.TEST_ENV === 'development', "Doesn't work in dev mode.");
-
   const middlewareTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'middleware' && transactionEvent?.contexts?.trace?.status === 'internal_error'
@@ -39,8 +35,6 @@ test('Should create a transaction with error status for faulty middleware', asyn
 });
 
 test('Records exceptions happening in middleware', async ({ request }) => {
-  test.skip(process.env.TEST_ENV === 'development', "Doesn't work in dev mode.");
-
   const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Middleware Error';
   });

packages/e2e-tests/test-applications/sveltekit/event-proxy-server.ts

@@ -7,6 +7,7 @@ import type { AddressInfo } from 'net';
 import * as os from 'os';
 import * as path from 'path';
 import * as util from 'util';
+import * as zlib from 'zlib';
 
 const readFile = util.promisify(fs.readFile);
 const writeFile = util.promisify(fs.writeFile);
@@ -44,8 +45,12 @@ export async function startEventProxyServer(options: EventProxyServerOptions): P
     });
 
     proxyRequest.addListener('end', () => {
-      const proxyRequestBody = Buffer.concat(proxyRequestChunks).toString();
-      const envelopeHeader: { dsn?: string } = JSON.parse(proxyRequestBody.split('\n')[0]);
+      const proxyRequestBody =
+        proxyRequest.headers['content-encoding'] === 'gzip'
+          ? zlib.gunzipSync(Buffer.concat(proxyRequestChunks)).toString()
+          : Buffer.concat(proxyRequestChunks).toString();
+
+      let envelopeHeader = JSON.parse(proxyRequestBody.split('\n')[0]);
 
       if (!envelopeHeader.dsn) {
         throw new Error('[event-proxy-server] No dsn on envelope header. Please set tunnel option.');
@@ -71,12 +76,11 @@ export async function startEventProxyServer(options: EventProxyServerOptions): P
 
           sentryResponse.addListener('end', () => {
             eventCallbackListeners.forEach(listener => {
-              const rawProxyRequestBody = Buffer.concat(proxyRequestChunks).toString();
               const rawSentryResponseBody = Buffer.concat(sentryResponseChunks).toString();
 
               const data: SentryRequestCallbackData = {
-                envelope: parseEnvelope(rawProxyRequestBody, new TextEncoder(), new TextDecoder()),
-                rawProxyRequestBody,
+                envelope: parseEnvelope(proxyRequestBody, new TextEncoder(), new TextDecoder()),
+                rawProxyRequestBody: proxyRequestBody,
                 rawSentryResponseBody,
                 sentryResponseStatusCode: sentryResponse.statusCode,
               };