meta: Update Changelog for 7.37.2

.github/workflows/build.yml

@@ -533,6 +533,8 @@ jobs:
           - bundle_es5_min
           - bundle_es6
           - bundle_es6_min
+          - bundle_replay_es6
+          - bundle_replay_es6_min
         tracing_only:
           - true
           - false

CHANGELOG.md

@@ -4,6 +4,19 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+## 7.37.2
+
+This release includes changes and fixes around text masking and blocking in Replay's `rrweb` dependency. See versions [1.102.0](https://github.com/getsentry/rrweb/releases/tag/1.102.0) and [1.103.0](https://github.com/getsentry/rrweb/releases/tag/1.103.0).
+
+- feat: Check `blockSelector` for blocking elements as well
+- feat: With maskAllText, mask the attributes: placeholder, title, `aria-label`
+- feat: fix masking on `textarea`
+- feat: Add `maskAllText` option
+
+SDK Changes:
+
+- fix(replay): Fix svgs not getting unblocked  (#7132)
+
 ## 7.37.1
 
 - fix(browser): Support `async` in stack frame urls (#7131)

MIGRATION.md

@@ -254,7 +254,7 @@ export function makeMyCustomTransport(options: BaseTransportOptions): Transport
   }
 
   // `createTransport` takes care of rate limiting and flushing
-  return createTransport({ bufferSize: options.bufferSize }, makeRequest);
+  return createTransport(options, makeRequest);
 }
 
 Sentry.init({

packages/integration-tests/package.json

@@ -23,6 +23,8 @@
     "test:bundle:es5:min": "PW_BUNDLE=bundle_es5_min yarn test",
     "test:bundle:es6": "PW_BUNDLE=bundle_es6 yarn test",
     "test:bundle:es6:min": "PW_BUNDLE=bundle_es6_min yarn test",
+    "test:bundle:replay:es6": "PW_BUNDLE=bundle_replay_es6 yarn test",
+    "test:bundle:replay:es6:min": "PW_BUNDLE=bundle_replay_es6_min yarn test",
     "test:cjs": "PW_BUNDLE=cjs yarn test",
     "test:esm": "PW_BUNDLE=esm yarn test",
     "test:ci": "playwright test ./suites --browser='all' --reporter='line'"

packages/integration-tests/suites/replay/captureReplay/test.ts

@@ -4,11 +4,10 @@ import type { ReplayEvent } from '@sentry/types';
 
 import { sentryTest } from '../../../utils/fixtures';
 import { envelopeRequestParser } from '../../../utils/helpers';
-import { waitForReplayRequest } from '../../../utils/replayHelpers';
+import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
 
 sentryTest('should capture replays', async ({ getLocalTestPath, page }) => {
-  // Replay bundles are es6 only
-  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
+  if (shouldSkipReplayTest()) {
     sentryTest.skip();
   }
 

packages/integration-tests/suites/replay/compression/init.js

@@ -1,8 +1,7 @@
 import * as Sentry from '@sentry/browser';
-import { Replay } from '@sentry/replay';
 
 window.Sentry = Sentry;
-window.Replay = new Replay({
+window.Replay = new Sentry.Replay({
   flushMinDelay: 500,
   flushMaxDelay: 500,
   useCompression: true,

packages/integration-tests/suites/replay/compression/test.ts

@@ -2,11 +2,15 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
 import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates';
-import { getFullRecordingSnapshots, getReplayEvent, waitForReplayRequest } from '../../../utils/replayHelpers';
+import {
+  getFullRecordingSnapshots,
+  getReplayEvent,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../utils/replayHelpers';
 
 sentryTest('replay recording should be compressed by default', async ({ getLocalTestPath, page }) => {
-  // Replay bundles are es6 only
-  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
+  if (shouldSkipReplayTest()) {
     sentryTest.skip();
   }
 

packages/integration-tests/suites/replay/customEvents/init.js

@@ -1,8 +1,7 @@
 import * as Sentry from '@sentry/browser';
-import { Replay } from '@sentry/replay';
 
 window.Sentry = Sentry;
-window.Replay = new Replay({
+window.Replay = new Sentry.Replay({
   flushMinDelay: 500,
   flushMaxDelay: 500,
   useCompression: false,

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

@@ -10,13 +10,19 @@ import {
   expectedNavigationPerformanceSpan,
   getExpectedReplayEvent,
 } from '../../../utils/replayEventTemplates';
-import { getCustomRecordingEvents, getReplayEvent, waitForReplayRequest } from '../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  getReplayEvent,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../utils/replayHelpers';
 
 sentryTest(
   'replay recording should contain default performance spans',
   async ({ getLocalTestPath, page, browserName }) => {
-    // Replay bundles are es6 only and most performance entries are only available in chromium
-    if ((process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) || browserName !== 'chromium') {
+    // We only test this against the NPM package and replay bundles
+    // and only on chromium as most performance entries are only available in chromium
+    if (shouldSkipReplayTest() || browserName !== 'chromium') {
       sentryTest.skip();
     }
 
@@ -68,8 +74,7 @@ sentryTest(
 sentryTest(
   'replay recording should contain a click breadcrumb when a button is clicked',
   async ({ getLocalTestPath, page }) => {
-    // Replay bundles are es6 only
-    if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
+    if (shouldSkipReplayTest()) {
       sentryTest.skip();
     }
 

packages/integration-tests/suites/replay/errorResponse/test.ts

@@ -1,14 +1,17 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
-import { getReplaySnapshot, REPLAY_DEFAULT_FLUSH_MAX_DELAY, waitForReplayRequest } from '../../../utils/replayHelpers';
+import {
+  getReplaySnapshot,
+  REPLAY_DEFAULT_FLUSH_MAX_DELAY,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../utils/replayHelpers';
 
 sentryTest('should stop recording after receiving an error response', async ({ getLocalTestPath, page }) => {
-  // Currently bundle tests are not supported for replay
-  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
+  if (shouldSkipReplayTest()) {
     sentryTest.skip();
   }
-
   let called = 0;
 
   await page.route('https://dsn.ingest.sentry.io/**/*', route => {

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

@@ -1,8 +1,7 @@
 import * as Sentry from '@sentry/browser';
-import { Replay } from '@sentry/replay';
 
 window.Sentry = Sentry;
-window.Replay = new Replay({
+window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
 });

packages/integration-tests/suites/replay/privacy/template.html

@@ -7,8 +7,8 @@
     <div data-sentry-unmask>This should be unmasked due to data attribute</div>
     <input placeholder="Placeholder should be masked" />
     <div title="Title should be masked">Title should be masked</div>
-    <svg style="width:200px;height:200px" viewBox="0 0 80 80"><path d=""/></svg>
-    <svg style="width:200px;height:200px" class="sentry-unblock" viewBox="0 0 80 80" data-sentry-unblock><path d=""/></svg>
+    <svg style="width:200px;height:200px" viewBox="0 0 80 80"><path d=""/><area /><rect /></svg>
+    <svg style="width:200px;height:200px" viewBox="0 0 80 80" data-sentry-unblock><path d=""/><area /><rect /></svg>
     <img style="width:100px;height:100px" src="file:///none.png" />
     <img data-sentry-unblock style="width:100px;height:100px" src="file:///none.png" />
   </body>

packages/integration-tests/suites/replay/privacy/test.ts

@@ -4,11 +4,10 @@ import type { RecordingEvent } from '@sentry/replay/build/npm/types/types';
 
 import { sentryTest } from '../../../utils/fixtures';
 import { envelopeRequestParser } from '../../../utils/helpers';
-import { waitForReplayRequest } from '../../../utils/replayHelpers';
+import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
 
 sentryTest('should have the correct default privacy settings', async ({ getLocalTestPath, page }) => {
-  // Replay bundles are es6 only
-  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
+  if (shouldSkipReplayTest()) {
     sentryTest.skip();
   }
 
@@ -80,7 +79,7 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
                   type: 2,
                   tagName: 'button',
                   attributes: {
-                    'aria-label': 'Click me',
+                    'aria-label': '***** **',
                     onclick: "console.log('Test log')",
                   },
                   childNodes: [
@@ -139,7 +138,7 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
                   type: 2,
                   tagName: 'input',
                   attributes: {
-                    placeholder: 'Placeholder should be masked',
+                    placeholder: '*********** ****** ** ******',
                   },
                   childNodes: [],
                   id: 18,
@@ -153,7 +152,7 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
                   type: 2,
                   tagName: 'div',
                   attributes: {
-                    title: 'Title should be masked',
+                    title: '***** ****** ** ******',
                   },
                   childNodes: [
                     {
@@ -190,7 +189,6 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
                   tagName: 'svg',
                   attributes: {
                     style: 'width:200px;height:200px',
-                    class: 'sentry-unblock',
                     viewBox: '0 0 80 80',
                     'data-sentry-unblock': '',
                   },
@@ -199,21 +197,36 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
                       type: 2,
                       tagName: 'path',
                       attributes: {
-                        rr_width: '0px',
-                        rr_height: '0px',
+                        d: '',
                       },
                       childNodes: [],
                       isSVG: true,
                       id: 26,
                     },
+                    {
+                      type: 2,
+                      tagName: 'area',
+                      attributes: {},
+                      childNodes: [],
+                      isSVG: true,
+                      id: 27,
+                    },
+                    {
+                      type: 2,
+                      tagName: 'rect',
+                      attributes: {},
+                      childNodes: [],
+                      isSVG: true,
+                      id: 28,
+                    },
                   ],
                   isSVG: true,
                   id: 25,
                 },
                 {
                   type: 3,
                   textContent: '\n    ',
-                  id: 27,
+                  id: 29,
                 },
                 {
                   type: 2,
@@ -223,12 +236,12 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
                     rr_height: '100px',
                   },
                   childNodes: [],
-                  id: 28,
+                  id: 30,
                 },
                 {
                   type: 3,
                   textContent: '\n    ',
-                  id: 29,
+                  id: 31,
                 },
                 {
                   type: 2,
@@ -239,17 +252,17 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
                     src: 'file:///none.png',
                   },
                   childNodes: [],
-                  id: 30,
+                  id: 32,
                 },
                 {
                   type: 3,
                   textContent: '\n  ',
-                  id: 31,
+                  id: 33,
                 },
                 {
                   type: 3,
                   textContent: '\n\n',
-                  id: 32,
+                  id: 34,
                 },
               ],
               id: 7,

packages/integration-tests/suites/replay/sampling/init.js

@@ -1,8 +1,7 @@
 import * as Sentry from '@sentry/browser';
-import { Replay } from '@sentry/replay';
 
 window.Sentry = Sentry;
-window.Replay = new Replay({
+window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
 });

packages/integration-tests/suites/replay/sampling/test.ts

@@ -1,11 +1,10 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
-import { getReplaySnapshot } from '../../../utils/replayHelpers';
+import { getReplaySnapshot, shouldSkipReplayTest } from '../../../utils/replayHelpers';
 
 sentryTest('should not send replays if both sample rates are 0', async ({ getLocalTestPath, page }) => {
-  // Replay bundles are es6 only
-  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
+  if (shouldSkipReplayTest()) {
     sentryTest.skip();
   }