Merge branch 'develop' into feat-feedback-bootstrap-feedback-integration

Author: c298lee

.size-limit.js

@@ -5,7 +5,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init, Replay, BrowserTracing }',
     gzip: true,
-    limit: '80 KB',
+    limit: '90 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing) - Webpack (gzipped)',
@@ -47,7 +47,7 @@ module.exports = [
     name: '@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)',
     path: 'packages/browser/build/bundles/bundle.tracing.replay.min.js',
     gzip: false,
-    limit: '250 KB',
+    limit: '260 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)',
@@ -77,7 +77,7 @@ module.exports = [
     path: 'packages/react/build/esm/index.js',
     import: '{ init, BrowserTracing, Replay }',
     gzip: true,
-    limit: '80 KB',
+    limit: '90 KB',
   },
   {
     name: '@sentry/react - Webpack (gzipped)',
@@ -93,7 +93,7 @@ module.exports = [
     path: 'packages/nextjs/build/esm/client/index.js',
     import: '{ init, BrowserTracing, Replay }',
     gzip: true,
-    limit: '100 KB',
+    limit: '110 KB',
   },
   {
     name: '@sentry/nextjs Client - Webpack (gzipped)',

CHANGELOG.md

@@ -2,8 +2,78 @@
 
 ## Unreleased
 
+### Important Changes
+
+- **feat(replay): Upgrade to rrweb2**
+
+This is fully backwards compatible with prior versions of the Replay SDK. The only breaking change that we will making is to not be masking `aria-label` by default. The reason for this change is to align with our core SDK which also does not mask `aria-label`. This change also enables better support of searching by clicks.
+
+Another change that needs to be highlighted is the 13% bundle size increase. This bundle size increase is necessary to bring improved recording performance and improved replay fidelity, especially in regards to web components and iframes. We will be investigating the reduction of the bundle size in [this PR](https://github.com/getsentry/sentry-javascript/issues/8815).
+
+Here are benchmarks comparing the version 1 of rrweb to version 2
+
+| metric    | v1         | v2         |
+| --------- | ---------- | ---------- |
+| lcp       | 1486.06 ms | 1529.11 ms |
+| cls       | 0.40 ms    | 0.40 ms    |
+| fid       | 1.53 ms    | 1.50 ms    |
+| tbt       | 3207.22 ms | 3036.80 ms |
+| memoryAvg | 131.83 MB  | 124.84 MB  |
+| memoryMax | 324.8 MB   | 339.03 MB  |
+| netTx     | 282.67 KB  | 272.51 KB  |
+| netRx     | 8.02 MB    | 8.07 MB    |
+
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+## 7.72.0
+
+### Important Changes
+
+- **feat(node): App Not Responding with stack traces (#9079)**
+
+This release introduces support for Application Not Responding (ANR) errors for Node.js applications.
+These errors are triggered when the Node.js main thread event loop of an application is blocked for more than five seconds.
+The Node SDK reports ANR errors as Sentry events and can optionally attach a stacktrace of the blocking code to the ANR event.
+
+To enable ANR detection, import and use the `enableANRDetection` function from the `@sentry/node` package before you run the rest of your application code.
+Any event loop blocking before calling `enableANRDetection` will not be detected by the SDK.
+
+Example (ESM):
+
+```ts
+import * as Sentry from "@sentry/node";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  tracesSampleRate: 1.0,
+});
+
+await Sentry.enableANRDetection({ captureStackTrace: true });
+// Function that runs your app
+runApp();
+```
+
+Example (CJS):
+
+```ts
+const Sentry = require("@sentry/node");
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  tracesSampleRate: 1.0,
+});
+
+Sentry.enableANRDetection({ captureStackTrace: true }).then(() => {
+  // Function that runs your app
+  runApp();
+});
+```
+
+### Other Changes
+
+- fix(nextjs): Filter `RequestAsyncStorage` locations by locations that webpack will resolve (#9114)
+- fix(replay): Ensure `replay_id` is not captured when session is expired (#9109)
+
 ## 7.71.0
 
 - feat(bun): Instrument Bun.serve (#9080)

lerna.json

@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "7.71.0",
+  "version": "7.72.0",
   "npmClient": "yarn"
 }

packages/angular-ivy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/angular-ivy",
-  "version": "7.71.0",
+  "version": "7.72.0",
   "description": "Official Sentry SDK for Angular with full Ivy Support",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/angular-ivy",
@@ -21,9 +21,9 @@
     "rxjs": "^6.5.5 || ^7.x"
   },
   "dependencies": {
-    "@sentry/browser": "7.71.0",
-    "@sentry/types": "7.71.0",
-    "@sentry/utils": "7.71.0",
+    "@sentry/browser": "7.72.0",
+    "@sentry/types": "7.72.0",
+    "@sentry/utils": "7.72.0",
     "tslib": "^2.4.1"
   },
   "devDependencies": {

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/angular",
-  "version": "7.71.0",
+  "version": "7.72.0",
   "description": "Official Sentry SDK for Angular",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/angular",
@@ -21,9 +21,9 @@
     "rxjs": "^6.5.5 || ^7.x"
   },
   "dependencies": {
-    "@sentry/browser": "7.71.0",
-    "@sentry/types": "7.71.0",
-    "@sentry/utils": "7.71.0",
+    "@sentry/browser": "7.72.0",
+    "@sentry/types": "7.72.0",
+    "@sentry/utils": "7.72.0",
     "tslib": "^2.4.1"
   },
   "devDependencies": {

packages/browser-integration-tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/browser-integration-tests",
-  "version": "7.71.0",
+  "version": "7.72.0",
   "main": "index.js",
   "license": "MIT",
   "engines": {

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

@@ -84,12 +84,13 @@ sentryTest(
     await reqErrorPromise;
     expect(callsToSentry).toEqual(2);
 
-    await page.evaluate(async () => {
-      const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
-      await replayIntegration.flush();
-    });
-
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([
+      reqPromise0,
+      page.evaluate(async () => {
+        const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
+        await replayIntegration.flush();
+      }),
+    ]);
 
     // 2 errors, 1 flush
     await reqErrorPromise;
@@ -226,12 +227,13 @@ sentryTest(
     await reqErrorPromise;
     expect(callsToSentry).toEqual(2);
 
-    await page.evaluate(async () => {
-      const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
-      await replayIntegration.flush({ continueRecording: false });
-    });
-
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([
+      reqPromise0,
+      page.evaluate(async () => {
+        const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
+        await replayIntegration.flush({ continueRecording: false });
+      }),
+    ]);
 
     // 2 errors, 1 flush
     await reqErrorPromise;
@@ -346,9 +348,12 @@ sentryTest(
 
     // Error sample rate is now at 1.0, this error should create a replay
     const reqErrorPromise1 = waitForErrorRequest(page);
-    await page.click('#error2');
-    // 1 unsampled error, 1 sampled error -> 1 flush
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([
+      // 1 unsampled error, 1 sampled error -> 1 flush
+      reqPromise0,
+      page.click('#error2'),
+    ]);
+
     const reqError1 = await reqErrorPromise1;
     const errorEvent1 = envelopeRequestParser(reqError1);
     expect(callsToSentry).toEqual(3);

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

@@ -10,8 +10,6 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
     sentryTest.skip();
   }
 
-  const reqPromise0 = waitForReplayRequest(page, 0);
-
   await page.route('https://dsn.ingest.sentry.io/**/*', route => {
     return route.fulfill({
       status: 200,
@@ -20,10 +18,11 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
     });
   });
 
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
-  await page.goto(url);
-  await reqPromise0;
+  await Promise.all([page.goto(url), reqPromise0]);
 
   const reqPromise1 = waitForReplayRequest(
     page,
@@ -38,11 +37,10 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
   await page.click('[data-log]');
 
   // Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
-  await page.click('[data-log]');
-
+  const [req1] = await Promise.all([reqPromise1, page.click('[data-log]')]);
   await forceFlushReplay();
 
-  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+  const { breadcrumbs } = getCustomRecordingEvents(req1);
 
   expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
     expect.arrayContaining([
@@ -65,8 +63,6 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
     sentryTest.skip();
   }
 
-  const reqPromise0 = waitForReplayRequest(page, 0);
-
   await page.route('https://dsn.ingest.sentry.io/**/*', route => {
     return route.fulfill({
       status: 200,
@@ -75,10 +71,11 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
     });
   });
 
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
-  await page.goto(url);
-  await reqPromise0;
+  await Promise.all([page.goto(url), reqPromise0]);
 
   const reqPromise1 = waitForReplayRequest(
     page,
@@ -90,14 +87,10 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
     5_000,
   );
 
-  await page.click('[data-log-large]');
-
-  // Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
-  await page.click('[data-log-large]');
-
+  const [req1] = await Promise.all([reqPromise1, page.click('[data-log-large]')]);
   await forceFlushReplay();
 
-  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+  const { breadcrumbs } = getCustomRecordingEvents(req1);
 
   expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
     expect.arrayContaining([

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

@@ -117,7 +117,7 @@ sentryTest(
             nodeId: expect.any(Number),
             node: {
               attributes: {
-                'aria-label': '** ***** ** **********',
+                'aria-label': 'An Error in aria-label',
                 class: 'btn btn-error',
                 id: 'error',
                 role: 'button',

packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts

@@ -50,26 +50,25 @@ sentryTest(
 
     const url = await getLocalTestPath({ testDir: __dirname });
 
-    await page.goto(url);
-    await page.click('#go-background');
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    await Promise.all([
+      page.goto(url),
+      page.click('#go-background'),
+      new Promise(resolve => setTimeout(resolve, 1000)),
+    ]);
 
     expect(callsToSentry).toEqual(0);
 
-    await page.click('#error');
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([reqPromise0, page.click('#error')]);
 
     expect(callsToSentry).toEqual(2); // 1 error, 1 replay event
 
-    await page.click('#go-background');
-    const req1 = await reqPromise1;
-    await reqErrorPromise;
+    const [req1] = await Promise.all([reqPromise1, page.click('#go-background'), reqErrorPromise]);
 
     expect(callsToSentry).toEqual(3); // 1 error, 2 replay events
 
     await page.click('#log');
-    await page.click('#go-background');
-    const req2 = await reqPromise2;
+
+    const [req2] = await Promise.all([reqPromise2, page.click('#go-background')]);
 
     const event0 = getReplayEvent(req0);
     const content0 = getReplayRecordingContent(req0);

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

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
+import type { inputData } from '@sentry-internal/rrweb';
 import { IncrementalSource } from '@sentry-internal/rrweb';
-import type { inputData } from '@sentry-internal/rrweb/typings/types';
 
 import { sentryTest } from '../../../utils/fixtures';
 import type { IncrementalRecordingSnapshot } from '../../../utils/replayHelpers';

packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts

@@ -10,8 +10,6 @@ sentryTest(
       sentryTest.skip();
     }
 
-    const reqPromise0 = waitForReplayRequest(page, 0);
-
     await page.route('https://dsn.ingest.sentry.io/**/*', route => {
       return route.fulfill({
         status: 200,
@@ -22,26 +20,17 @@ sentryTest(
 
     const url = await getLocalTestPath({ testDir: __dirname });
 
-    await page.goto(url);
-    const res0 = await reqPromise0;
-
-    const reqPromise1 = waitForReplayRequest(page);
-
-    void page.click('#button-add');
+    const [res0] = await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]);
     await forceFlushReplay();
-    const res1 = await reqPromise1;
 
-    const reqPromise2 = waitForReplayRequest(page);
-
-    void page.click('#button-modify');
+    const [res1] = await Promise.all([waitForReplayRequest(page), page.click('#button-add')]);
     await forceFlushReplay();
-    const res2 = await reqPromise2;
 
-    const reqPromise3 = waitForReplayRequest(page);
+    const [res2] = await Promise.all([waitForReplayRequest(page), page.click('#button-modify')]);
+    await forceFlushReplay();
 
-    void page.click('#button-remove');
+    const [res3] = await Promise.all([waitForReplayRequest(page), page.click('#button-remove')]);
     await forceFlushReplay();
-    const res3 = await reqPromise3;
 
     const replayData0 = getReplayRecordingContent(res0);
     const replayData1 = getReplayRecordingContent(res1);