From ef00a90e950fd63f05e242e8146920af21c4a7ef Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 13:45:14 +0000 Subject: [PATCH 1/7] test(browser): Test webpack 5 bundled app --- .../test-applications/webpack-5/build.mjs | 44 ++++++++++++ .../test-applications/webpack-5/entry.js | 10 +++ .../test-applications/webpack-5/package.json | 22 ++++++ .../webpack-5/playwright.config.ts | 70 +++++++++++++++++++ .../webpack-5/tests/behaviour-test.spec.ts | 44 ++++++++++++ 5 files changed, 190 insertions(+) create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/build.mjs create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/entry.js create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/package.json create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/build.mjs b/dev-packages/e2e-tests/test-applications/webpack-5/build.mjs new file mode 100644 index 000000000000..11874cb62374 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/build.mjs @@ -0,0 +1,44 @@ +import * as path from 'path'; +import * as url from 'url'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import TerserPlugin from 'terser-webpack-plugin'; +import webpack from 'webpack'; + +const __dirname = path.dirname(url.fileURLToPath(import.meta.url)); + +webpack( + { + entry: path.join(__dirname, 'entry.js'), + output: { + path: path.join(__dirname, 'build'), + filename: 'app.js', + }, + optimization: { + minimize: true, + minimizer: [new TerserPlugin()], + }, + plugins: [new HtmlWebpackPlugin(), new webpack.EnvironmentPlugin(['E2E_TEST_DSN'])], + mode: 'production', + }, + (err, stats) => { + if (err) { + console.error(err.stack || err); + if (err.details) { + console.error(err.details); + } + return; + } + + const info = stats.toJson(); + + if (stats.hasErrors()) { + console.error(info.errors); + process.exit(1); + } + + if (stats.hasWarnings()) { + console.warn(info.warnings); + process.exit(1); + } + }, +); diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/entry.js b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js new file mode 100644 index 000000000000..f1bf46da11b5 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js @@ -0,0 +1,10 @@ +import { captureException, init } from '../../../../packages/browser'; + +init({ + dsn: process.env.E2E_TEST_DSN, +}); + +setTimeout(() => { + const eventId = captureException(new Error('I am an error!')); + window.capturedExceptionId = eventId; +}, 200); diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/package.json b/dev-packages/e2e-tests/test-applications/webpack-5/package.json new file mode 100644 index 000000000000..f60a8d7016f4 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/package.json @@ -0,0 +1,22 @@ +{ + "name": "webpack-5-test", + "version": "1.0.0", + "scripts": { + "start": "serve -s build", + "build": "node build.mjs", + "test": "playwright test", + "test:build": "pnpm install && pnpm build", + "test:assert": "pnpm test" + }, + "dependencies": { + "@sentry/browser": "latest || *" + }, + "devDependencies": { + "webpack": "^5.91.0", + "terser-webpack-plugin": "^5.3.10", + "html-webpack-plugin": "^5.6.0", + "@playwright/test": "^1.42.1", + "playwright": "^1.31.1", + "serve": "^14.2.1" + } +} diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts b/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts new file mode 100644 index 000000000000..5f93f826ebf0 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts @@ -0,0 +1,70 @@ +import type { PlaywrightTestConfig } from '@playwright/test'; +import { devices } from '@playwright/test'; + +/** + * See https://playwright.dev/docs/test-configuration. + */ +const config: PlaywrightTestConfig = { + testDir: './tests', + /* Maximum time one test can run for. */ + timeout: 150_000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000, + }, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: 0, + /* Opt out of parallel tests on CI. */ + workers: 1, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'list', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + }, + }, + // For now we only test Chrome! + // { + // name: 'firefox', + // use: { + // ...devices['Desktop Firefox'], + // }, + // }, + // { + // name: 'webkit', + // use: { + // ...devices['Desktop Safari'], + // }, + // }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: 'pnpm start', + port: 3030, + env: { + PORT: '3030', + }, + }, +}; + +export default config; diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts b/dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts new file mode 100644 index 000000000000..4f762a4028d4 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts @@ -0,0 +1,44 @@ +import { expect, test } from '@playwright/test'; +import axios, { AxiosError } from 'axios'; + +const EVENT_POLLING_TIMEOUT = 90_000; + +const authToken = process.env.E2E_TEST_AUTH_TOKEN; +const sentryTestOrgSlug = process.env.E2E_TEST_SENTRY_ORG_SLUG; +const sentryTestProject = process.env.E2E_TEST_SENTRY_TEST_PROJECT; + +test('Sends an exception to Sentry', async ({ page }) => { + await page.goto('/'); + + const exceptionIdHandle = await page.waitForFunction(() => window.capturedExceptionId); + const exceptionEventId = await exceptionIdHandle.jsonValue(); + + console.log(`Polling for error eventId: ${exceptionEventId}`); + + await expect + .poll( + async () => { + try { + const response = await axios.get( + `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/events/${exceptionEventId}/`, + { headers: { Authorization: `Bearer ${authToken}` } }, + ); + return response.status; + } catch (e) { + if (e instanceof AxiosError && e.response) { + if (e.response.status !== 404) { + throw e; + } else { + return e.response.status; + } + } else { + throw e; + } + } + }, + { + timeout: EVENT_POLLING_TIMEOUT, + }, + ) + .toBe(200); +}); From ef65f9abf54b7e3f1fed7138ec1368a22e98de75 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 13:47:13 +0000 Subject: [PATCH 2/7] use the local registy --- dev-packages/e2e-tests/test-applications/webpack-5/.npmrc | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/.npmrc diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/.npmrc b/dev-packages/e2e-tests/test-applications/webpack-5/.npmrc new file mode 100644 index 000000000000..070f80f05092 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/.npmrc @@ -0,0 +1,2 @@ +@sentry:registry=http://127.0.0.1:4873 +@sentry-internal:registry=http://127.0.0.1:4873 From 0096886112a7301293a79c5315607476b89b3f44 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 14:11:05 +0000 Subject: [PATCH 3/7] Oops, use built package --- dev-packages/e2e-tests/test-applications/webpack-5/entry.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/entry.js b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js index f1bf46da11b5..ecafc05a97f7 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-5/entry.js +++ b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js @@ -1,4 +1,4 @@ -import { captureException, init } from '../../../../packages/browser'; +import { captureException, init } from '@sentry/browser'; init({ dsn: process.env.E2E_TEST_DSN, From 1089f4875df1e85dbb8a136bb1eb994ab1ee25cd Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 14:21:49 +0000 Subject: [PATCH 4/7] include it in the CI tests --- .github/workflows/build.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 3d8562473837..e3ff7456a210 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -1049,6 +1049,7 @@ jobs: # 'node-hapi-app', 'node-exports-test-app', 'vue-3' + 'webpack-5' ] build-command: - false From e1d21c7f1e9cb16c64d029d4e56063209e77a230 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 14:23:32 +0000 Subject: [PATCH 5/7] fix workflow file --- .github/workflows/build.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index e3ff7456a210..b179159f4dfd 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -1048,7 +1048,7 @@ jobs: # TODO(v8): Re-enable hapi tests # 'node-hapi-app', 'node-exports-test-app', - 'vue-3' + 'vue-3', 'webpack-5' ] build-command: From c79b187f06e4addaef89a568a97b373b88fb6d66 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 14:38:37 +0000 Subject: [PATCH 6/7] try and fix test --- .../test-applications/webpack-5/package.json | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/package.json b/dev-packages/e2e-tests/test-applications/webpack-5/package.json index f60a8d7016f4..871e43589971 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-5/package.json +++ b/dev-packages/e2e-tests/test-applications/webpack-5/package.json @@ -4,19 +4,15 @@ "scripts": { "start": "serve -s build", "build": "node build.mjs", - "test": "playwright test", - "test:build": "pnpm install && pnpm build", - "test:assert": "pnpm test" - }, - "dependencies": { - "@sentry/browser": "latest || *" + "test:build": "pnpm install && npx playwright install && pnpm build", + "test:assert": "playwright test" }, "devDependencies": { + "@playwright/test": "^1.42.1", + "@sentry/browser": "latest || *", "webpack": "^5.91.0", "terser-webpack-plugin": "^5.3.10", "html-webpack-plugin": "^5.6.0", - "@playwright/test": "^1.42.1", - "playwright": "^1.31.1", "serve": "^14.2.1" } } From f9616f8c4a3bfd47ed2d360c699db38514dd442b Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Mon, 25 Mar 2024 11:32:56 +0000 Subject: [PATCH 7/7] test browser tracing too --- dev-packages/e2e-tests/test-applications/webpack-5/entry.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/entry.js b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js index ecafc05a97f7..4fd9cd67e7e3 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-5/entry.js +++ b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js @@ -1,10 +1,11 @@ -import { captureException, init } from '@sentry/browser'; +import { browserTracingIntegration, captureException, init } from '@sentry/browser'; init({ dsn: process.env.E2E_TEST_DSN, + integrations: [browserTracingIntegration()], }); setTimeout(() => { const eventId = captureException(new Error('I am an error!')); window.capturedExceptionId = eventId; -}, 200); +}, 2000);