Skip to content

Commit 780875f

Browse files
authored
test(remix): Update Remix E2E tests (#11077)
This does two things: 1. Remove an unused remix integration test 2. Add a test that ensures we send correct server & browser transactions that are correctly linked I extracted these out from #11031, to ensure this is/remains stable before we migrate and after. (Side note: Once v8 is somewhat settled, we should really find a way to extract these event proxy things into a util 😅 )
1 parent 7879791 commit 780875f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1005
-182
lines changed

.github/workflows/build.yml

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,6 @@ jobs:
140140
- 'packages/profiling-node/**'
141141
- 'dev-packages/e2e-tests/test-applications/node-profiling/**'
142142
profiling_node_bindings:
143-
- *workflow
144143
- 'packages/profiling-node/**'
145144
- 'dev-packages/e2e-tests/test-applications/node-profiling/**'
146145
deno:
@@ -888,8 +887,6 @@ jobs:
888887
remix: 1
889888
- node: 16
890889
remix: 1
891-
- tracingIntegration: true
892-
remix: 2
893890
steps:
894891
- name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
895892
uses: actions/checkout@v4
@@ -907,7 +904,6 @@ jobs:
907904
env:
908905
NODE_VERSION: ${{ matrix.node }}
909906
REMIX_VERSION: ${{ matrix.remix }}
910-
TRACING_INTEGRATION: ${{ matrix.tracingIntegration }}
911907
run: |
912908
cd packages/remix
913909
yarn test:integration:ci

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.client.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Sentry.init({
1919
// Session Replay
2020
replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
2121
replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
22+
tunnel: 'http://localhost:3031/', // proxy server
2223
});
2324

2425
Sentry.addEventProcessor(event => {

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.server.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Sentry.init({
1717
dsn: process.env.E2E_TEST_DSN,
1818
// Performance Monitoring
1919
tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
20+
tunnel: 'http://localhost:3031/', // proxy server
2021
});
2122

2223
export const handleError = Sentry.wrapRemixHandleError;

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/routes/_index.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { Link } from '@remix-run/react';
1+
import { Link, useSearchParams } from '@remix-run/react';
22
import * as Sentry from '@sentry/remix';
33

44
export default function Index() {
5+
const [searchParams] = useSearchParams();
6+
7+
if (searchParams.get('tag')) {
8+
Sentry.setTag('sentry_test', searchParams.get('tag'));
9+
}
10+
511
return (
612
<div>
713
<input
Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
import * as fs from 'fs';
2+
import * as http from 'http';
3+
import * as https from 'https';
4+
import type { AddressInfo } from 'net';
5+
import * as os from 'os';
6+
import * as path from 'path';
7+
import * as util from 'util';
8+
import * as zlib from 'zlib';
9+
import type { Envelope, EnvelopeItem, Event } from '@sentry/types';
10+
import { parseEnvelope } from '@sentry/utils';
11+
12+
const readFile = util.promisify(fs.readFile);
13+
const writeFile = util.promisify(fs.writeFile);
14+
15+
interface EventProxyServerOptions {
16+
/** Port to start the event proxy server at. */
17+
port: number;
18+
/** The name for the proxy server used for referencing it with listener functions */
19+
proxyServerName: string;
20+
}
21+
22+
interface SentryRequestCallbackData {
23+
envelope: Envelope;
24+
rawProxyRequestBody: string;
25+
rawSentryResponseBody: string;
26+
sentryResponseStatusCode?: number;
27+
}
28+
29+
/**
30+
* Starts an event proxy server that will proxy events to sentry when the `tunnel` option is used. Point the `tunnel`
31+
* option to this server (like this `tunnel: http://localhost:${port option}/`).
32+
*/
33+
export async function startEventProxyServer(options: EventProxyServerOptions): Promise<void> {
34+
const eventCallbackListeners: Set<(data: string) => void> = new Set();
35+
36+
const proxyServer = http.createServer((proxyRequest, proxyResponse) => {
37+
const proxyRequestChunks: Uint8Array[] = [];
38+
39+
proxyRequest.addListener('data', (chunk: Buffer) => {
40+
proxyRequestChunks.push(chunk);
41+
});
42+
43+
proxyRequest.addListener('error', err => {
44+
throw err;
45+
});
46+
47+
proxyRequest.addListener('end', () => {
48+
const proxyRequestBody =
49+
proxyRequest.headers['content-encoding'] === 'gzip'
50+
? zlib.gunzipSync(Buffer.concat(proxyRequestChunks)).toString()
51+
: Buffer.concat(proxyRequestChunks).toString();
52+
53+
let envelopeHeader = JSON.parse(proxyRequestBody.split('\n')[0]);
54+
55+
if (!envelopeHeader.dsn) {
56+
throw new Error('[event-proxy-server] No dsn on envelope header. Please set tunnel option.');
57+
}
58+
59+
const { origin, pathname, host } = new URL(envelopeHeader.dsn);
60+
61+
const projectId = pathname.substring(1);
62+
const sentryIngestUrl = `${origin}/api/${projectId}/envelope/`;
63+
64+
proxyRequest.headers.host = host;
65+
66+
const sentryResponseChunks: Uint8Array[] = [];
67+
68+
const sentryRequest = https.request(
69+
sentryIngestUrl,
70+
{ headers: proxyRequest.headers, method: proxyRequest.method },
71+
sentryResponse => {
72+
sentryResponse.addListener('data', (chunk: Buffer) => {
73+
proxyResponse.write(chunk, 'binary');
74+
sentryResponseChunks.push(chunk);
75+
});
76+
77+
sentryResponse.addListener('end', () => {
78+
eventCallbackListeners.forEach(listener => {
79+
const rawSentryResponseBody = Buffer.concat(sentryResponseChunks).toString();
80+
81+
const data: SentryRequestCallbackData = {
82+
envelope: parseEnvelope(proxyRequestBody),
83+
rawProxyRequestBody: proxyRequestBody,
84+
rawSentryResponseBody,
85+
sentryResponseStatusCode: sentryResponse.statusCode,
86+
};
87+
88+
listener(Buffer.from(JSON.stringify(data)).toString('base64'));
89+
});
90+
proxyResponse.end();
91+
});
92+
93+
sentryResponse.addListener('error', err => {
94+
throw err;
95+
});
96+
97+
proxyResponse.writeHead(sentryResponse.statusCode || 500, sentryResponse.headers);
98+
},
99+
);
100+
101+
sentryRequest.write(Buffer.concat(proxyRequestChunks), 'binary');
102+
sentryRequest.end();
103+
});
104+
});
105+
106+
const proxyServerStartupPromise = new Promise<void>(resolve => {
107+
proxyServer.listen(options.port, () => {
108+
resolve();
109+
});
110+
});
111+
112+
const eventCallbackServer = http.createServer((eventCallbackRequest, eventCallbackResponse) => {
113+
eventCallbackResponse.statusCode = 200;
114+
eventCallbackResponse.setHeader('connection', 'keep-alive');
115+
116+
const callbackListener = (data: string): void => {
117+
eventCallbackResponse.write(data.concat('\n'), 'utf8');
118+
};
119+
120+
eventCallbackListeners.add(callbackListener);
121+
122+
eventCallbackRequest.on('close', () => {
123+
eventCallbackListeners.delete(callbackListener);
124+
});
125+
126+
eventCallbackRequest.on('error', () => {
127+
eventCallbackListeners.delete(callbackListener);
128+
});
129+
});
130+
131+
const eventCallbackServerStartupPromise = new Promise<void>(resolve => {
132+
eventCallbackServer.listen(0, () => {
133+
const port = String((eventCallbackServer.address() as AddressInfo).port);
134+
void registerCallbackServerPort(options.proxyServerName, port).then(resolve);
135+
});
136+
});
137+
138+
await eventCallbackServerStartupPromise;
139+
await proxyServerStartupPromise;
140+
return;
141+
}
142+
143+
export async function waitForRequest(
144+
proxyServerName: string,
145+
callback: (eventData: SentryRequestCallbackData) => Promise<boolean> | boolean,
146+
): Promise<SentryRequestCallbackData> {
147+
const eventCallbackServerPort = await retrieveCallbackServerPort(proxyServerName);
148+
149+
return new Promise<SentryRequestCallbackData>((resolve, reject) => {
150+
const request = http.request(`http://localhost:${eventCallbackServerPort}/`, {}, response => {
151+
let eventContents = '';
152+
153+
response.on('error', err => {
154+
reject(err);
155+
});
156+
157+
response.on('data', (chunk: Buffer) => {
158+
const chunkString = chunk.toString('utf8');
159+
chunkString.split('').forEach(char => {
160+
if (char === '\n') {
161+
const eventCallbackData: SentryRequestCallbackData = JSON.parse(
162+
Buffer.from(eventContents, 'base64').toString('utf8'),
163+
);
164+
const callbackResult = callback(eventCallbackData);
165+
if (typeof callbackResult !== 'boolean') {
166+
callbackResult.then(
167+
match => {
168+
if (match) {
169+
response.destroy();
170+
resolve(eventCallbackData);
171+
}
172+
},
173+
err => {
174+
throw err;
175+
},
176+
);
177+
} else if (callbackResult) {
178+
response.destroy();
179+
resolve(eventCallbackData);
180+
}
181+
eventContents = '';
182+
} else {
183+
eventContents = eventContents.concat(char);
184+
}
185+
});
186+
});
187+
});
188+
189+
request.end();
190+
});
191+
}
192+
193+
export function waitForEnvelopeItem(
194+
proxyServerName: string,
195+
callback: (envelopeItem: EnvelopeItem) => Promise<boolean> | boolean,
196+
): Promise<EnvelopeItem> {
197+
return new Promise((resolve, reject) => {
198+
waitForRequest(proxyServerName, async eventData => {
199+
const envelopeItems = eventData.envelope[1];
200+
for (const envelopeItem of envelopeItems) {
201+
if (await callback(envelopeItem)) {
202+
resolve(envelopeItem);
203+
return true;
204+
}
205+
}
206+
return false;
207+
}).catch(reject);
208+
});
209+
}
210+
211+
export function waitForError(
212+
proxyServerName: string,
213+
callback: (transactionEvent: Event) => Promise<boolean> | boolean,
214+
): Promise<Event> {
215+
return new Promise((resolve, reject) => {
216+
waitForEnvelopeItem(proxyServerName, async envelopeItem => {
217+
const [envelopeItemHeader, envelopeItemBody] = envelopeItem;
218+
if (envelopeItemHeader.type === 'event' && (await callback(envelopeItemBody as Event))) {
219+
resolve(envelopeItemBody as Event);
220+
return true;
221+
}
222+
return false;
223+
}).catch(reject);
224+
});
225+
}
226+
227+
export function waitForTransaction(
228+
proxyServerName: string,
229+
callback: (transactionEvent: Event) => Promise<boolean> | boolean,
230+
): Promise<Event> {
231+
return new Promise((resolve, reject) => {
232+
waitForEnvelopeItem(proxyServerName, async envelopeItem => {
233+
const [envelopeItemHeader, envelopeItemBody] = envelopeItem;
234+
if (envelopeItemHeader.type === 'transaction' && (await callback(envelopeItemBody as Event))) {
235+
resolve(envelopeItemBody as Event);
236+
return true;
237+
}
238+
return false;
239+
}).catch(reject);
240+
});
241+
}
242+
243+
const TEMP_FILE_PREFIX = 'event-proxy-server-';
244+
245+
async function registerCallbackServerPort(serverName: string, port: string): Promise<void> {
246+
const tmpFilePath = path.join(os.tmpdir(), `${TEMP_FILE_PREFIX}${serverName}`);
247+
await writeFile(tmpFilePath, port, { encoding: 'utf8' });
248+
}
249+
250+
function retrieveCallbackServerPort(serverName: string): Promise<string> {
251+
const tmpFilePath = path.join(os.tmpdir(), `${TEMP_FILE_PREFIX}${serverName}`);
252+
return readFile(tmpFilePath, 'utf8');
253+
}

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
"devDependencies": {
2828
"@playwright/test": "^1.36.2",
2929
"@remix-run/dev": "^2.7.2",
30+
"@sentry/types": "latest || *",
31+
"@sentry/utils": "latest || *",
3032
"@types/compression": "^1.7.5",
3133
"@types/express": "^4.17.20",
3234
"@types/morgan": "^1.9.9",
@@ -43,7 +45,8 @@
4345
"eslint-plugin-react-hooks": "^4.6.0",
4446
"typescript": "^5.1.6",
4547
"vite": "^5.1.0",
46-
"vite-tsconfig-paths": "^4.2.1"
48+
"vite-tsconfig-paths": "^4.2.1",
49+
"ts-node": "10.9.1"
4750
},
4851
"engines": {
4952
"node": ">=18.0.0"

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/playwright.config.ts

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { PlaywrightTestConfig } from '@playwright/test';
22
import { devices } from '@playwright/test';
33

44
const port = 3030;
5+
const eventProxyPort = 3031;
56

67
/**
78
* See https://playwright.dev/docs/test-configuration.
@@ -34,6 +35,9 @@ const config: PlaywrightTestConfig = {
3435

3536
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
3637
trace: 'on-first-retry',
38+
39+
/* Base URL to use in actions like `await page.goto('/')`. */
40+
baseURL: `http://localhost:${port}`,
3741
},
3842

3943
/* Configure projects for major browsers */
@@ -44,15 +48,19 @@ const config: PlaywrightTestConfig = {
4448
...devices['Desktop Chrome'],
4549
},
4650
},
47-
// For now we only test Chrome!
4851
],
4952

5053
/* Run your local dev server before starting the tests */
51-
webServer: {
52-
// This test app is testing the Vite dev server, so we need to run it before the tests.
53-
command: `PORT=${port} pnpm dev`,
54-
port,
55-
},
54+
webServer: [
55+
{
56+
command: 'pnpm ts-node --project="tsconfig.event-proxy-server.json" ./start-event-proxy.ts',
57+
port: eventProxyPort,
58+
},
59+
{
60+
command: `PORT=${port} pnpm dev`,
61+
port: port,
62+
},
63+
],
5664
};
5765

5866
export default config;
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { startEventProxyServer } from './event-proxy-server';
2+
startEventProxyServer({
3+
port: 3031,
4+
proxyServerName: 'create-remix-app-express-vite-dev',
5+
});

0 commit comments

Comments
 (0)