Merge branch 'develop' into feat-replay-capture-sdk-settings-in-event

Author: billyvg

.github/workflows/build.yml

@@ -783,19 +783,18 @@ jobs:
         id: versions
         run: |
           echo "echo node=$(jq -r '.volta.node' package.json)" >> $GITHUB_OUTPUT
-      # Temporarily disabling e2e tests
-      # - name: Run E2E tests
-      #   env:
-      #     E2E_TEST_PUBLISH_SCRIPT_NODE_VERSION: ${{ steps.versions.outputs.node }}
-      #     E2E_TEST_AUTH_TOKEN: ${{ secrets.E2E_TEST_AUTH_TOKEN }}
-      #     E2E_TEST_DSN: ${{ secrets.E2E_TEST_DSN }}
-      #     E2E_TEST_SENTRY_ORG_SLUG: 'sentry-javascript-sdks'
-      #     E2E_TEST_SENTRY_TEST_PROJECT: 'sentry-javascript-e2e-tests'
-      #     E2E_TEST_SHARD: ${{ matrix.shard }}
-      #     E2E_TEST_SHARD_AMOUNT: 3
-      #   run: |
-      #     cd packages/e2e-tests
-      #     yarn test:e2e
+      - name: Run E2E tests
+        env:
+          E2E_TEST_PUBLISH_SCRIPT_NODE_VERSION: ${{ steps.versions.outputs.node }}
+          E2E_TEST_AUTH_TOKEN: ${{ secrets.E2E_TEST_AUTH_TOKEN }}
+          E2E_TEST_DSN: ${{ secrets.E2E_TEST_DSN }}
+          E2E_TEST_SENTRY_ORG_SLUG: 'sentry-javascript-sdks'
+          E2E_TEST_SENTRY_TEST_PROJECT: 'sentry-javascript-e2e-tests'
+          E2E_TEST_SHARD: ${{ matrix.shard }}
+          E2E_TEST_SHARD_AMOUNT: 3
+        run: |
+          cd packages/e2e-tests
+          yarn test:e2e
 
   job_required_tests:
     name: All required tests passed or skipped

.prettierignore

@@ -1,3 +1,2 @@
 *.md
 .nxcache
-packages/browser-integration-tests/fixtures

packages/angular-ivy/README.md

@@ -16,7 +16,7 @@
 
 ## Angular Version Compatibility
 
-This SDK officially supports Angular 12-15 with Angular's new rendering engine, Ivy.
+This SDK officially supports Angular 12 to 16 with Angular's new rendering engine, Ivy.
 
 If you're using Angular 10, 11 or a newer Angular version with View Engine instead of Ivy, please use [`@sentry/angular`](https://github.com/getsentry/sentry-javascript/blob/develop/packages/angular/README.md).
 

packages/angular-ivy/package.json

@@ -15,9 +15,9 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": ">= 12.x <= 15.x",
-    "@angular/core": ">= 12.x <= 15.x",
-    "@angular/router": ">= 12.x <= 15.x",
+    "@angular/common": ">= 12.x <= 16.x",
+    "@angular/core": ">= 12.x <= 16.x",
+    "@angular/router": ">= 12.x <= 16.x",
     "rxjs": "^6.5.5 || ^7.x"
   },
   "dependencies": {

packages/angular/README.md

@@ -17,7 +17,11 @@
 
 ## Angular Version Compatibility
 
-The latest version of this SDK officially supports Angular 10-13. If you are using an older version of Angular and experience problems with the Angular SDK, we recommend downgrading the SDK to version 6.x.
+**Important**: This package is not compatible with Angular 16 or newer. Please use [`@sentry/angular-ivy`](https://github.com/getsentry/sentry-javascript/tree/master/packages/angular-ivy) instead.
+
+If you're using Angular 12 or newer, we recommend using `@sentry/angular-ivy` for native support with Angular's rendering engine Ivy.
+
+This SDK stilll officially supports Angular 10-15. If you are using an older version of Angular and experience problems with the Angular SDK, we recommend downgrading the SDK to version 6.x.
 
 ## General
 

packages/browser-integration-tests/.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'loader-suites/**/subject.js',
     'scripts/**',
     'fixtures/**',
+    'tmp/**',
   ],
   parserOptions: {
     sourceType: 'module',

packages/browser-integration-tests/.gitignore

@@ -1 +1,2 @@
 test-results
+tmp

packages/browser-integration-tests/.prettierignore

@@ -0,0 +1,2 @@
+tmp
+fixtures

packages/browser-integration-tests/loader-suites/loader/noOnLoad/sdkLoadedInMeanwhile/subject.js

@@ -0,0 +1,17 @@
+setTimeout(() => {
+  const cdnScript = document.createElement('script');
+  cdnScript.src = '/cdn.bundle.js';
+
+  cdnScript.addEventListener('load', () => {
+    window.Sentry.init({
+      dsn: 'https://[email protected]/1337',
+      replaysSessionSampleRate: 0.42,
+    });
+
+    setTimeout(() => {
+      window.doSomethingWrong();
+    }, 500);
+  });
+
+  document.head.appendChild(cdnScript);
+}, 100);

packages/browser-integration-tests/loader-suites/loader/noOnLoad/sdkLoadedInMeanwhile/test.ts

@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+import { sentryTest, TEST_HOST } from '../../../../utils/fixtures';
+import { LOADER_CONFIGS } from '../../../../utils/generatePlugin';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../utils/helpers';
+
+const bundle = process.env.PW_BUNDLE || '';
+const isLazy = LOADER_CONFIGS[bundle]?.lazy;
+
+sentryTest('it does not download the SDK if the SDK was loaded in the meanwhile', async ({ getLocalTestUrl, page }) => {
+  // When the loader is eager, this does not work and makes no sense
+  if (isLazy !== true) {
+    sentryTest.skip();
+  }
+
+  let cdnLoadedCount = 0;
+  let sentryEventCount = 0;
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    sentryEventCount++;
+
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  await page.route(`${TEST_HOST}/*.*`, route => {
+    const file = route.request().url().split('/').pop();
+
+    if (file === 'cdn.bundle.js') {
+      cdnLoadedCount++;
+    }
+
+    const filePath = path.resolve(__dirname, `./dist/${file}`);
+
+    return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
+  });
+
+  const req = waitForErrorRequest(page);
+
+  const url = await getLocalTestUrl({ testDir: __dirname, skipRouteHandler: true });
+
+  await page.goto(url);
+
+  const eventData = envelopeRequestParser(await req);
+
+  await waitForFunction(() => cdnLoadedCount === 2);
+
+  // Still loaded the CDN bundle twice
+  expect(cdnLoadedCount).toBe(2);
+
+  // But only sent to Sentry once
+  expect(sentryEventCount).toBe(1);
+
+  // Ensure loader does not overwrite init/config
+  const options = await page.evaluate(() => (window as any).Sentry.getCurrentHub().getClient()?.getOptions());
+  expect(options?.replaysSessionSampleRate).toBe(0.42);
+
+  expect(eventData.exception?.values?.length).toBe(1);
+  expect(eventData.exception?.values?.[0]?.value).toBe('window.doSomethingWrong is not a function');
+});
+
+async function waitForFunction(cb: () => boolean, timeout = 2000, increment = 100) {
+  while (timeout > 0 && !cb()) {
+    await new Promise(resolve => setTimeout(resolve, increment));
+    await waitForFunction(cb, timeout - increment, increment);
+  }
+}

packages/browser-integration-tests/package.json

@@ -8,7 +8,7 @@
   },
   "private": true,
   "scripts": {
-    "clean": "rimraf -g suites/**/dist loader-suites/**/dist",
+    "clean": "rimraf -g suites/**/dist loader-suites/**/dist tmp",
     "install-browsers": "playwright install --with-deps",
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --format stylish",
@@ -58,6 +58,7 @@
   },
   "devDependencies": {
     "@types/glob": "8.0.0",
+    "@types/node": "^14.6.4",
     "glob": "8.0.3"
   },
   "volta": {

packages/browser-integration-tests/playwright.config.ts

@@ -7,5 +7,8 @@ const config: PlaywrightTestConfig = {
   // Use 3 workers on CI, else use defaults (based on available CPU cores)
   // Note that 3 is a random number selected to work well with our CI setup
   workers: process.env.CI ? 3 : undefined,
+
+  globalSetup: require.resolve('./playwright.setup.ts'),
 };
+
 export default config;

packages/browser-integration-tests/playwright.setup.ts

@@ -0,0 +1,5 @@
+import setupStaticAssets from './utils/staticAssets';
+
+export default function globalSetup(): Promise<void> {
+  return setupStaticAssets();
+}

packages/browser-integration-tests/suites/public-api/setContext/multiple_contexts/test.ts

@@ -16,7 +16,6 @@ sentryTest('should record multiple contexts', async ({ getLocalTestPath, page })
       baz: { qux: 'quux' },
     },
     context_2: { 1: 'foo', bar: false },
-    context_4: '[undefined]',
     context_5: '[NaN]',
     context_6: 3.141592653589793,
   });

packages/browser-integration-tests/suites/replay/bufferMode/test.ts

@@ -94,15 +94,15 @@ sentryTest(
 
     // 2 errors, 1 flush
     await reqErrorPromise;
-    expect(callsToSentry).toEqual(3);
+    expect(callsToSentry).toBeGreaterThanOrEqual(3);
 
     await page.click('#log');
     await page.click('#go-background');
 
     // Switches to session mode and then goes to background
     const req1 = await reqPromise1;
     const req2 = await reqPromise2;
-    expect(callsToSentry).toEqual(5);
+    expect(callsToSentry).toBeGreaterThanOrEqual(5);
 
     const event0 = getReplayEvent(req0);
     const content0 = getReplayRecordingContent(req0);

packages/browser-integration-tests/suites/replay/dsc/init.js

@@ -13,6 +13,7 @@ Sentry.init({
   integrations: [new Integrations.BrowserTracing({ tracingOrigins: [/.*/] }), window.Replay],
   environment: 'production',
   tracesSampleRate: 1,
+  // Needs manual start!
   replaysSessionSampleRate: 0.0,
-  replaysOnErrorSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
 });