diff --git a/MIGRATION.md b/MIGRATION.md
index 7e57f74c4cdf..a9bdf8bbd049 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -827,6 +827,22 @@ The SDK no longer filters out health check transactions by default. Instead, the
by the Sentry backend by default. You can disable dropping them in your Sentry project settings. If you still want to
drop specific transactions within the SDK you can either use the `ignoreTransactions` SDK option.
+#### Change of Replay default options (`unblock` and `unmask`)
+
+The Replay options `unblock` and `unmask` now have `[]` as default value. This means that if you want to use these
+options, you have to explicitly set them like this:
+
+```js
+Sentry.init({
+ integrations: [
+ Sentry.replayIntegration({
+ unblock: ['.sentry-unblock, [data-sentry-unblock]'],
+ unmask: ['.sentry-unmask, [data-sentry-unmask]'],
+ }),
+ ],
+});
+```
+
#### Angular Tracing Decorator renaming
The usage of `TraceClassDecorator` and the `TraceMethodDecorator` already implies that those are decorators. The word
diff --git a/dev-packages/browser-integration-tests/suites/replay/customEvents/init.js b/dev-packages/browser-integration-tests/suites/replay/customEvents/init.js
index 47b24555a669..2cfec5213d3f 100644
--- a/dev-packages/browser-integration-tests/suites/replay/customEvents/init.js
+++ b/dev-packages/browser-integration-tests/suites/replay/customEvents/init.js
@@ -7,6 +7,7 @@ window.Replay = Sentry.replayIntegration({
minReplayDuration: 0,
useCompression: false,
blockAllMedia: false,
+ unmask: ['.sentry-unmask, [data-sentry-unmask]'],
});
Sentry.init({
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyBlock/init.js b/dev-packages/browser-integration-tests/suites/replay/privacyBlock/init.js
index 0004ab705e56..16000b4c4412 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyBlock/init.js
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyBlock/init.js
@@ -8,6 +8,7 @@ window.Replay = Sentry.replayIntegration({
useCompression: false,
blockAllMedia: false,
block: ['link[rel="icon"]', 'video', '.nested-hide'],
+ unmask: ['.sentry-unmask, [data-sentry-unmask]'],
});
Sentry.init({
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/template.html b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/template.html
index c83b62bf2e24..efb00dc29581 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/template.html
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/template.html
@@ -7,9 +7,9 @@
This should be masked by default
-
This should be unmasked due to data attribute
+
With default settings, this should also be masked (even with data attribute)
-
+
Title should be masked
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json
index 69f74ba00da8..e04944384bbd 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json
@@ -106,7 +106,7 @@
"childNodes": [
{
"type": 3,
- "textContent": "This should be unmasked due to data attribute",
+ "textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
"id": 17
}
],
@@ -136,7 +136,7 @@
"tagName": "input",
"attributes": {
"data-sentry-unmask": "",
- "placeholder": "Placeholder can be unmasked"
+ "placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
},
"childNodes": [],
"id": 21
@@ -186,45 +186,17 @@
"type": 2,
"tagName": "svg",
"attributes": {
- "style": "width:200px;height:200px",
- "viewBox": "0 0 80 80",
- "data-sentry-unblock": ""
+ "rr_width": "[200-250]px",
+ "rr_height": "[200-250]px"
},
- "childNodes": [
- {
- "type": 2,
- "tagName": "path",
- "attributes": {
- "d": ""
- },
- "childNodes": [],
- "isSVG": true,
- "id": 29
- },
- {
- "type": 2,
- "tagName": "area",
- "attributes": {},
- "childNodes": [],
- "isSVG": true,
- "id": 30
- },
- {
- "type": 2,
- "tagName": "rect",
- "attributes": {},
- "childNodes": [],
- "isSVG": true,
- "id": 31
- }
- ],
+ "childNodes": [],
"isSVG": true,
"id": 28
},
{
"type": 3,
"textContent": "\n ",
- "id": 32
+ "id": 29
},
{
"type": 2,
@@ -234,28 +206,27 @@
"rr_height": "[100-150]px"
},
"childNodes": [],
- "id": 33
+ "id": 30
},
{
"type": 3,
"textContent": "\n ",
- "id": 34
+ "id": 31
},
{
"type": 2,
"tagName": "img",
"attributes": {
- "data-sentry-unblock": "",
- "style": "width:100px;height:100px",
- "src": "file:///none.png"
+ "rr_width": "[100-150]px",
+ "rr_height": "[100-150]px"
},
"childNodes": [],
- "id": 35
+ "id": 32
},
{
"type": 3,
"textContent": "\n ",
- "id": 36
+ "id": 33
},
{
"type": 2,
@@ -265,17 +236,17 @@
"rr_height": "[0-50]px"
},
"childNodes": [],
- "id": 37
+ "id": 34
},
{
"type": 3,
"textContent": "\n ",
- "id": 38
+ "id": 35
},
{
"type": 3,
"textContent": "\n\n",
- "id": 39
+ "id": 36
}
],
"id": 8
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json
index 4f20b93e13ab..a57a8507fda9 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json
@@ -106,7 +106,7 @@
"childNodes": [
{
"type": 3,
- "textContent": "This should be unmasked due to data attribute",
+ "textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
"id": 17
}
],
@@ -121,7 +121,7 @@
"type": 2,
"tagName": "input",
"attributes": {
- "placeholder": "*********** ****** ** ******"
+ "placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
},
"childNodes": [],
"id": 19
@@ -226,12 +226,12 @@
{
"type": 3,
"textContent": "\n ",
- "id": 33
+ "id": 34
},
{
"type": 3,
"textContent": "\n\n",
- "id": 34
+ "id": 35
}
],
"id": 8
@@ -248,4 +248,4 @@
}
},
"timestamp": [timestamp]
-}
\ No newline at end of file
+}
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json
index 69f74ba00da8..e04944384bbd 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json
@@ -106,7 +106,7 @@
"childNodes": [
{
"type": 3,
- "textContent": "This should be unmasked due to data attribute",
+ "textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
"id": 17
}
],
@@ -136,7 +136,7 @@
"tagName": "input",
"attributes": {
"data-sentry-unmask": "",
- "placeholder": "Placeholder can be unmasked"
+ "placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
},
"childNodes": [],
"id": 21
@@ -186,45 +186,17 @@
"type": 2,
"tagName": "svg",
"attributes": {
- "style": "width:200px;height:200px",
- "viewBox": "0 0 80 80",
- "data-sentry-unblock": ""
+ "rr_width": "[200-250]px",
+ "rr_height": "[200-250]px"
},
- "childNodes": [
- {
- "type": 2,
- "tagName": "path",
- "attributes": {
- "d": ""
- },
- "childNodes": [],
- "isSVG": true,
- "id": 29
- },
- {
- "type": 2,
- "tagName": "area",
- "attributes": {},
- "childNodes": [],
- "isSVG": true,
- "id": 30
- },
- {
- "type": 2,
- "tagName": "rect",
- "attributes": {},
- "childNodes": [],
- "isSVG": true,
- "id": 31
- }
- ],
+ "childNodes": [],
"isSVG": true,
"id": 28
},
{
"type": 3,
"textContent": "\n ",
- "id": 32
+ "id": 29
},
{
"type": 2,
@@ -234,28 +206,27 @@
"rr_height": "[100-150]px"
},
"childNodes": [],
- "id": 33
+ "id": 30
},
{
"type": 3,
"textContent": "\n ",
- "id": 34
+ "id": 31
},
{
"type": 2,
"tagName": "img",
"attributes": {
- "data-sentry-unblock": "",
- "style": "width:100px;height:100px",
- "src": "file:///none.png"
+ "rr_width": "[100-150]px",
+ "rr_height": "[100-150]px"
},
"childNodes": [],
- "id": 35
+ "id": 32
},
{
"type": 3,
"textContent": "\n ",
- "id": 36
+ "id": 33
},
{
"type": 2,
@@ -265,17 +236,17 @@
"rr_height": "[0-50]px"
},
"childNodes": [],
- "id": 37
+ "id": 34
},
{
"type": 3,
"textContent": "\n ",
- "id": 38
+ "id": 35
},
{
"type": 3,
"textContent": "\n\n",
- "id": 39
+ "id": 36
}
],
"id": 8
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json
index 69f74ba00da8..16c4caf2ed69 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json
@@ -106,7 +106,7 @@
"childNodes": [
{
"type": 3,
- "textContent": "This should be unmasked due to data attribute",
+ "textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
"id": 17
}
],
@@ -136,7 +136,7 @@
"tagName": "input",
"attributes": {
"data-sentry-unmask": "",
- "placeholder": "Placeholder can be unmasked"
+ "placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
},
"childNodes": [],
"id": 21
@@ -292,4 +292,4 @@
}
},
"timestamp": [timestamp]
-}
\ No newline at end of file
+}
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyInput/init.js b/dev-packages/browser-integration-tests/suites/replay/privacyInput/init.js
index c973a578baae..96f5c063e13d 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyInput/init.js
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyInput/init.js
@@ -7,6 +7,7 @@ window.Replay = Sentry.replayIntegration({
minReplayDuration: 0,
useCompression: false,
maskAllInputs: false,
+ unmask: ['.sentry-unmask, [data-sentry-unmask]'],
});
Sentry.init({
diff --git a/dev-packages/browser-integration-tests/suites/replay/privacyInputMaskAll/init.js b/dev-packages/browser-integration-tests/suites/replay/privacyInputMaskAll/init.js
index b0dbc95aa018..c20c8b36a4c2 100644
--- a/dev-packages/browser-integration-tests/suites/replay/privacyInputMaskAll/init.js
+++ b/dev-packages/browser-integration-tests/suites/replay/privacyInputMaskAll/init.js
@@ -7,6 +7,7 @@ window.Replay = Sentry.replayIntegration({
minReplayDuration: 0,
useCompression: false,
maskAllInputs: true,
+ unmask: ['.sentry-unmask, [data-sentry-unmask]'],
});
Sentry.init({
diff --git a/packages/replay/MIGRATION.md b/packages/replay/MIGRATION.md
index 0fe6160cc56d..d61689499d7d 100644
--- a/packages/replay/MIGRATION.md
+++ b/packages/replay/MIGRATION.md
@@ -1,6 +1,6 @@
# End of Replay Beta
-Sentry Replay is now out of Beta. This means that the usual stability guarantees apply.
+> For further migration changes please refer to the [general SDK migration notes](../../MIGRATION.md).
Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since
been fixed/improved. We **strongly** recommend anyone using Replay in a version before 7.39.0 to update to 7.39.0 or
diff --git a/packages/replay/README.md b/packages/replay/README.md
index 8673bcdecd56..2583065c9787 100644
--- a/packages/replay/README.md
+++ b/packages/replay/README.md
@@ -197,17 +197,17 @@ The following options can be configured as options to the integration, in `Sentr
The following options can be configured as options to the integration, in `Sentry.replayIntegration({})`:
-| key | type | default | description |
-| ------------- | ------------------------ | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| maskAllText | boolean | `true` | Mask _all_ text content. Will pass text content through `maskFn` before sending to server. |
-| maskAllInputs | boolean | `true` | Mask values of `` elements. Passes input values through `maskInputFn` before sending to server. |
-| blockAllMedia | boolean | `true` | Block _all_ media elements (`img, svg, video, object, picture, embed, map, audio`) |
-| maskFn | (text: string) => string | `(text) => '*'.repeat(text.length)` | Function to customize how text content is masked before sending to server. By default, masks text with `*`. |
-| block | Array | `.sentry-block, [data-sentry-block]` | Redact any elements that match the DOM selectors. See [privacy](#blocking) section for an example. |
-| unblock | Array | `.sentry-unblock, [data-sentry-unblock]` | Do not redact any elements that match the DOM selectors. Useful when using `blockAllMedia`. See [privacy](#blocking) section for an example. |
-| mask | Array | `.sentry-mask, [data-sentry-mask]` | Mask all elements that match the given DOM selectors. See [privacy](#masking) section for an example. |
-| unmask | Array | `.sentry-unmask, [data-sentry-unmask]` | Unmask all elements that match the given DOM selectors. Useful when using `maskAllText`. See [privacy](#masking) section for an example. |
-| ignore | Array | `.sentry-ignore, [data-sentry-ignore]` | Ignores all events on the matching input fields. See [privacy](#ignoring) section for an example. |
+| key | type | default | description |
+| ------------- | ------------------------ | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| maskAllText | boolean | `true` | Mask _all_ text content. Will pass text content through `maskFn` before sending to server. |
+| maskAllInputs | boolean | `true` | Mask values of `` elements. Passes input values through `maskInputFn` before sending to server. |
+| blockAllMedia | boolean | `true` | Block _all_ media elements (`img, svg, video, object, picture, embed, map, audio`) |
+| maskFn | (text: string) => string | `(text) => '*'.repeat(text.length)` | Function to customize how text content is masked before sending to server. By default, masks text with `*`. |
+| block | Array | `.sentry-block, [data-sentry-block]` | Redact any elements that match the DOM selectors. See [privacy](#blocking) section for an example. |
+| unblock | Array | [] | Do not redact any elements that match the DOM selectors. Useful when using `blockAllMedia`. See [privacy](#blocking) section for an example. |
+| mask | Array | `.sentry-mask, [data-sentry-mask]` | Mask all elements that match the given DOM selectors. See [privacy](#masking) section for an example. |
+| unmask | Array | [] | Unmask all elements that match the given DOM selectors. Useful when using `maskAllText`. See [privacy](#masking) section for an example. |
+| ignore | Array | `.sentry-ignore, [data-sentry-ignore]` | Ignores all events on the matching input fields. See [privacy](#ignoring) section for an example. |
#### Deprecated options
diff --git a/packages/replay/src/util/getPrivacyOptions.ts b/packages/replay/src/util/getPrivacyOptions.ts
index 7d0584b7ba7b..495ab01df83a 100644
--- a/packages/replay/src/util/getPrivacyOptions.ts
+++ b/packages/replay/src/util/getPrivacyOptions.ts
@@ -74,7 +74,7 @@ export function getPrivacyOptions({
const defaultBlockedElements = ['base[href="/"]'];
const maskSelector = getOption(mask, ['.sentry-mask', '[data-sentry-mask]'], maskTextClass, maskTextSelector);
- const unmaskSelector = getOption(unmask, ['.sentry-unmask', '[data-sentry-unmask]']);
+ const unmaskSelector = getOption(unmask, []);
const options: GetPrivacyReturn = {
// We are making the decision to make text and input selectors the same
@@ -87,7 +87,7 @@ export function getPrivacyOptions({
blockClass,
blockSelector,
),
- unblockSelector: getOption(unblock, ['.sentry-unblock', '[data-sentry-unblock]']),
+ unblockSelector: getOption(unblock, []),
ignoreSelector: getOption(ignore, ['.sentry-ignore', '[data-sentry-ignore]', 'input[type="file"]'], ignoreClass),
};
diff --git a/packages/replay/test/integration/rrweb.test.ts b/packages/replay/test/integration/rrweb.test.ts
index 82dd18f2d6ec..4423c45246ea 100644
--- a/packages/replay/test/integration/rrweb.test.ts
+++ b/packages/replay/test/integration/rrweb.test.ts
@@ -35,8 +35,8 @@ describe('Integration | rrweb', () => {
"maskTextSelector": ".sentry-mask,[data-sentry-mask]",
"onMutation": [Function],
"slimDOMOptions": "all",
- "unblockSelector": ".sentry-unblock,[data-sentry-unblock]",
- "unmaskTextSelector": ".sentry-unmask,[data-sentry-unmask]",
+ "unblockSelector": "",
+ "unmaskTextSelector": "",
}
`);
});
diff --git a/packages/replay/test/unit/util/getPrivacyOptions.test.ts b/packages/replay/test/unit/util/getPrivacyOptions.test.ts
index c1e7695487e3..61dfef693e0c 100644
--- a/packages/replay/test/unit/util/getPrivacyOptions.test.ts
+++ b/packages/replay/test/unit/util/getPrivacyOptions.test.ts
@@ -22,8 +22,8 @@ describe('Unit | util | getPrivacyOptions', () => {
"blockSelector": ".custom-block,.sentry-block,[data-sentry-block],base[href=\\"/\\"]",
"ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore],input[type=\\"file\\"]",
"maskTextSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
- "unblockSelector": ".custom-unblock,.sentry-unblock,[data-sentry-unblock]",
- "unmaskTextSelector": ".custom-unmask,.sentry-unmask,[data-sentry-unmask]",
+ "unblockSelector": ".custom-unblock",
+ "unmaskTextSelector": ".custom-unmask",
}
`);
});
@@ -48,8 +48,8 @@ describe('Unit | util | getPrivacyOptions', () => {
"blockSelector": ".custom-block,.deprecated-block-selector,.sentry-block,[data-sentry-block],base[href=\\"/\\"],.deprecated-block-class",
"ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore],input[type=\\"file\\"],.deprecated-ignore-class",
"maskTextSelector": ".custom-mask,.deprecated-mask-selector,.sentry-mask,[data-sentry-mask],.deprecated-mask-class",
- "unblockSelector": ".custom-unblock,.sentry-unblock,[data-sentry-unblock]",
- "unmaskTextSelector": ".custom-unmask,.sentry-unmask,[data-sentry-unmask]",
+ "unblockSelector": ".custom-unblock",
+ "unmaskTextSelector": ".custom-unmask",
}
`);
});
@@ -73,8 +73,8 @@ describe('Unit | util | getPrivacyOptions', () => {
"ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore],input[type=\\"file\\"]",
"maskTextClass": /deprecated-mask-\\*/,
"maskTextSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
- "unblockSelector": ".custom-unblock,.sentry-unblock,[data-sentry-unblock]",
- "unmaskTextSelector": ".custom-unmask,.sentry-unmask,[data-sentry-unmask]",
+ "unblockSelector": ".custom-unblock",
+ "unmaskTextSelector": ".custom-unmask",
}
`);
});