From 44a6ea7be90c74184e85433a2638a011a774b909 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 14:10:33 +0000 Subject: [PATCH 1/5] test(browser): Webpack 4 + Terser --- .../test-applications/webpack-4/.npmrc | 2 + .../test-applications/webpack-4/build.mjs | 44 ++++++++++++ .../test-applications/webpack-4/entry.js | 10 +++ .../test-applications/webpack-4/package.json | 22 ++++++ .../webpack-4/playwright.config.ts | 70 +++++++++++++++++++ .../webpack-4/tests/behaviour-test.spec.ts | 44 ++++++++++++ 6 files changed, 192 insertions(+) create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/.npmrc create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/build.mjs create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/entry.js create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/package.json create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.ts create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/tests/behaviour-test.spec.ts diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/.npmrc b/dev-packages/e2e-tests/test-applications/webpack-4/.npmrc new file mode 100644 index 000000000000..070f80f05092 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/.npmrc @@ -0,0 +1,2 @@ +@sentry:registry=http://127.0.0.1:4873 +@sentry-internal:registry=http://127.0.0.1:4873 diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/build.mjs b/dev-packages/e2e-tests/test-applications/webpack-4/build.mjs new file mode 100644 index 000000000000..11874cb62374 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/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-4/entry.js b/dev-packages/e2e-tests/test-applications/webpack-4/entry.js new file mode 100644 index 000000000000..ecafc05a97f7 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/entry.js @@ -0,0 +1,10 @@ +import { captureException, init } from '@sentry/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-4/package.json b/dev-packages/e2e-tests/test-applications/webpack-4/package.json new file mode 100644 index 000000000000..d4371ff579a1 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/package.json @@ -0,0 +1,22 @@ +{ + "name": "webpack-4-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": "^4.47.0", + "terser-webpack-plugin": "^4.2.3", + "html-webpack-plugin": "^4.5.2", + "@playwright/test": "^1.42.1", + "playwright": "^1.31.1", + "serve": "^14.2.1" + } +} diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.ts b/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.ts new file mode 100644 index 000000000000..5f93f826ebf0 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/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-4/tests/behaviour-test.spec.ts b/dev-packages/e2e-tests/test-applications/webpack-4/tests/behaviour-test.spec.ts new file mode 100644 index 000000000000..4f762a4028d4 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/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 b22b95679be9fe3d2b15ab6adf904f40d9a856f5 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 14:22:11 +0000 Subject: [PATCH 2/5] 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..0686965a7ab4 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-4' ] build-command: - false From c1e4b329c14894d0d7c0a0381d5e0e5a46fb1bd8 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 14:23:17 +0000 Subject: [PATCH 3/5] 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 0686965a7ab4..f925912a2c8e 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-4' ] build-command: From c278075430682b905f93c1a3a39454030ba1788c Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Fri, 22 Mar 2024 15:22:20 +0000 Subject: [PATCH 4/5] fix test --- .../test-applications/webpack-4/package.json | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/package.json b/dev-packages/e2e-tests/test-applications/webpack-4/package.json index d4371ff579a1..ee99ff43128e 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-4/package.json +++ b/dev-packages/e2e-tests/test-applications/webpack-4/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": "^4.47.0", "terser-webpack-plugin": "^4.2.3", "html-webpack-plugin": "^4.5.2", - "@playwright/test": "^1.42.1", - "playwright": "^1.31.1", "serve": "^14.2.1" } } From 60fddb4a8bdb89154b0700f08ea12a703ecbfc04 Mon Sep 17 00:00:00 2001 From: Tim Fish Date: Mon, 25 Mar 2024 11:33:42 +0000 Subject: [PATCH 5/5] Test browser tracing too --- dev-packages/e2e-tests/test-applications/webpack-4/entry.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/entry.js b/dev-packages/e2e-tests/test-applications/webpack-4/entry.js index ecafc05a97f7..4fd9cd67e7e3 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-4/entry.js +++ b/dev-packages/e2e-tests/test-applications/webpack-4/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);