test(browser): Add initial setup for e2e test

Author: Zen-cronic

dev-packages/e2e-tests/test-applications/default-browser/.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts

dev-packages/e2e-tests/test-applications/default-browser/.npmrc

@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873

dev-packages/e2e-tests/test-applications/default-browser/build.mjs

@@ -0,0 +1,44 @@
+import * as path from 'path';
+import * as url from 'url';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+webpack(
+  {
+    entry: path.join(__dirname, 'src/index.js'),
+    output: {
+      path: path.join(__dirname, 'build'),
+      filename: 'app.js',
+    },
+    optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+    },
+    plugins: [new webpack.EnvironmentPlugin(['E2E_TEST_DSN']), new HtmlWebpackPlugin()],
+    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);
+    }
+  },
+);

dev-packages/e2e-tests/test-applications/default-browser/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "default-browser-test-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@sentry/browser": "latest || *",
+    "@types/node": "16.7.13",
+    "typescript": "4.9.5"
+  },
+  "scripts": {
+    "start": "serve -s build",
+    "build": "node build.mjs",
+    "test": "playwright test",
+    "clean": "npx rimraf node_modules pnpm-lock.yaml",
+    "test:build": "pnpm install && npx playwright install && pnpm build",
+    "test:assert": "pnpm test"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.44.1",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "webpack": "^5.91.0",
+    "serve": "14.0.1",
+    "terser-webpack-plugin": "^5.3.10",
+    "html-webpack-plugin": "^5.6.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

dev-packages/e2e-tests/test-applications/default-browser/playwright.config.mjs

@@ -0,0 +1,7 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: `pnpm start`,
+});
+
+export default config;

dev-packages/e2e-tests/test-applications/default-browser/src/index.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: process.env.E2E_TEST_DSN,
+  tunnel: 'http://localhost:3031',
+  integrations: [Sentry.browserTracingIntegration()],
+});
+
+setTimeout(() => {
+  throw new Error('I am an error!');
+}, 2000);

dev-packages/e2e-tests/test-applications/default-browser/start-event-proxy.mjs

@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'default-browser',
+});

dev-packages/e2e-tests/test-applications/default-browser/tests/errors.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from '@playwright/test';
+
+test('testing', () => {
+  expect(true).toBe(true);
+});

dev-packages/e2e-tests/test-applications/default-browser/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src", "tests"]
+}

dev-packages/e2e-tests/test-applications/react-19/tests/errors.test.ts

@@ -7,6 +7,7 @@ test('Catches errors caught by error boundary', async ({ page }) => {
   });
 
   const errorEventPromise = waitForError('react-19', event => {
+    //ErrorEvent's type === undefined
     return !event.type && event.exception?.values?.[0]?.value === 'caught error';
   });
 

dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/send-to-sentry.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { ReplayRecordingData } from './fixtures/ReplayRecordingData';
 
-const EVENT_POLLING_TIMEOUT = 90_000;
+const EVENT_POLLING_TIMEOUT = 5_000;
 
 const authToken = process.env.E2E_TEST_AUTH_TOKEN;
 const sentryTestOrgSlug = process.env.E2E_TEST_SENTRY_ORG_SLUG;