Skip to content

Commit 2333b3f

Browse files
s1gr1ds1gr1d
authored
feat(v8/replay): Opt-in options for unmask and unblock (#11049)
closes #8887 docs changes: getsentry/sentry-docs#9422
1 parent 3e1c45d commit 2333b3f

File tree

15 files changed

+82
-120
lines changed

15 files changed

+82
-120
lines changed

‎MIGRATION.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -827,6 +827,22 @@ The SDK no longer filters out health check transactions by default. Instead, the
827827
by the Sentry backend by default. You can disable dropping them in your Sentry project settings. If you still want to
828828
drop specific transactions within the SDK you can either use the `ignoreTransactions` SDK option.
829829

830+
#### Change of Replay default options (`unblock` and `unmask`)
831+
832+
The Replay options `unblock` and `unmask` now have `[]` as default value. This means that if you want to use these
833+
options, you have to explicitly set them like this:
834+
835+
```js
836+
Sentry.init({
837+
integrations: [
838+
Sentry.replayIntegration({
839+
unblock: ['.sentry-unblock, [data-sentry-unblock]'],
840+
unmask: ['.sentry-unmask, [data-sentry-unmask]'],
841+
}),
842+
],
843+
});
844+
```
845+
830846
#### Angular Tracing Decorator renaming
831847

832848
The usage of `TraceClassDecorator` and the `TraceMethodDecorator` already implies that those are decorators. The word

‎dev-packages/browser-integration-tests/suites/replay/customEvents/init.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ window.Replay = Sentry.replayIntegration({
77
minReplayDuration: 0,
88
useCompression: false,
99
blockAllMedia: false,
10+
unmask: ['.sentry-unmask, [data-sentry-unmask]'],
1011
});
1112

1213
Sentry.init({

‎dev-packages/browser-integration-tests/suites/replay/privacyBlock/init.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ window.Replay = Sentry.replayIntegration({
88
useCompression: false,
99
blockAllMedia: false,
1010
block: ['link[rel="icon"]', 'video', '.nested-hide'],
11+
unmask: ['.sentry-unmask, [data-sentry-unmask]'],
1112
});
1213

1314
Sentry.init({

‎dev-packages/browser-integration-tests/suites/replay/privacyDefault/template.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<body>
88
<button aria-label="Click me" onclick="console.log('Test log')">Click me</button>
99
<div>This should be masked by default</div>
10-
<div data-sentry-unmask>This should be unmasked due to data attribute</div>
10+
<div data-sentry-unmask>With default settings, this should also be masked (even with data attribute)</div>
1111
<input placeholder="Placeholder should be masked" />
12-
<input data-sentry-unmask placeholder="Placeholder can be unmasked" />
12+
<input data-sentry-unmask placeholder="Placeholder can be unmasked - but not with default settings" />
1313
<div title="Title should be masked">Title should be masked</div>
1414
<svg style="width:200px;height:200px" viewBox="0 0 80 80"><path d=""/><area /><rect /></svg>
1515
<svg style="width:200px;height:200px" viewBox="0 0 80 80" data-sentry-unblock><path d=""/><area /><rect /></svg>

‎dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json

Lines changed: 15 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"childNodes": [
107107
{
108108
"type": 3,
109-
"textContent": "This should be unmasked due to data attribute",
109+
"textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
110110
"id": 17
111111
}
112112
],
@@ -136,7 +136,7 @@
136136
"tagName": "input",
137137
"attributes": {
138138
"data-sentry-unmask": "",
139-
"placeholder": "Placeholder can be unmasked"
139+
"placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
140140
},
141141
"childNodes": [],
142142
"id": 21
@@ -186,45 +186,17 @@
186186
"type": 2,
187187
"tagName": "svg",
188188
"attributes": {
189-
"style": "width:200px;height:200px",
190-
"viewBox": "0 0 80 80",
191-
"data-sentry-unblock": ""
189+
"rr_width": "[200-250]px",
190+
"rr_height": "[200-250]px"
192191
},
193-
"childNodes": [
194-
{
195-
"type": 2,
196-
"tagName": "path",
197-
"attributes": {
198-
"d": ""
199-
},
200-
"childNodes": [],
201-
"isSVG": true,
202-
"id": 29
203-
},
204-
{
205-
"type": 2,
206-
"tagName": "area",
207-
"attributes": {},
208-
"childNodes": [],
209-
"isSVG": true,
210-
"id": 30
211-
},
212-
{
213-
"type": 2,
214-
"tagName": "rect",
215-
"attributes": {},
216-
"childNodes": [],
217-
"isSVG": true,
218-
"id": 31
219-
}
220-
],
192+
"childNodes": [],
221193
"isSVG": true,
222194
"id": 28
223195
},
224196
{
225197
"type": 3,
226198
"textContent": "\n ",
227-
"id": 32
199+
"id": 29
228200
},
229201
{
230202
"type": 2,
@@ -234,28 +206,27 @@
234206
"rr_height": "[100-150]px"
235207
},
236208
"childNodes": [],
237-
"id": 33
209+
"id": 30
238210
},
239211
{
240212
"type": 3,
241213
"textContent": "\n ",
242-
"id": 34
214+
"id": 31
243215
},
244216
{
245217
"type": 2,
246218
"tagName": "img",
247219
"attributes": {
248-
"data-sentry-unblock": "",
249-
"style": "width:100px;height:100px",
250-
"src": "file:///none.png"
220+
"rr_width": "[100-150]px",
221+
"rr_height": "[100-150]px"
251222
},
252223
"childNodes": [],
253-
"id": 35
224+
"id": 32
254225
},
255226
{
256227
"type": 3,
257228
"textContent": "\n ",
258-
"id": 36
229+
"id": 33
259230
},
260231
{
261232
"type": 2,
@@ -265,17 +236,17 @@
265236
"rr_height": "[0-50]px"
266237
},
267238
"childNodes": [],
268-
"id": 37
239+
"id": 34
269240
},
270241
{
271242
"type": 3,
272243
"textContent": "\n ",
273-
"id": 38
244+
"id": 35
274245
},
275246
{
276247
"type": 3,
277248
"textContent": "\n\n",
278-
"id": 39
249+
"id": 36
279250
}
280251
],
281252
"id": 8

‎dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"childNodes": [
107107
{
108108
"type": 3,
109-
"textContent": "This should be unmasked due to data attribute",
109+
"textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
110110
"id": 17
111111
}
112112
],
@@ -121,7 +121,7 @@
121121
"type": 2,
122122
"tagName": "input",
123123
"attributes": {
124-
"placeholder": "*********** ****** ** ******"
124+
"placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
125125
},
126126
"childNodes": [],
127127
"id": 19
@@ -226,12 +226,12 @@
226226
{
227227
"type": 3,
228228
"textContent": "\n ",
229-
"id": 33
229+
"id": 34
230230
},
231231
{
232232
"type": 3,
233233
"textContent": "\n\n",
234-
"id": 34
234+
"id": 35
235235
}
236236
],
237237
"id": 8
@@ -248,4 +248,4 @@
248248
}
249249
},
250250
"timestamp": [timestamp]
251-
}
251+
}

‎dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json

Lines changed: 15 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"childNodes": [
107107
{
108108
"type": 3,
109-
"textContent": "This should be unmasked due to data attribute",
109+
"textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
110110
"id": 17
111111
}
112112
],
@@ -136,7 +136,7 @@
136136
"tagName": "input",
137137
"attributes": {
138138
"data-sentry-unmask": "",
139-
"placeholder": "Placeholder can be unmasked"
139+
"placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
140140
},
141141
"childNodes": [],
142142
"id": 21
@@ -186,45 +186,17 @@
186186
"type": 2,
187187
"tagName": "svg",
188188
"attributes": {
189-
"style": "width:200px;height:200px",
190-
"viewBox": "0 0 80 80",
191-
"data-sentry-unblock": ""
189+
"rr_width": "[200-250]px",
190+
"rr_height": "[200-250]px"
192191
},
193-
"childNodes": [
194-
{
195-
"type": 2,
196-
"tagName": "path",
197-
"attributes": {
198-
"d": ""
199-
},
200-
"childNodes": [],
201-
"isSVG": true,
202-
"id": 29
203-
},
204-
{
205-
"type": 2,
206-
"tagName": "area",
207-
"attributes": {},
208-
"childNodes": [],
209-
"isSVG": true,
210-
"id": 30
211-
},
212-
{
213-
"type": 2,
214-
"tagName": "rect",
215-
"attributes": {},
216-
"childNodes": [],
217-
"isSVG": true,
218-
"id": 31
219-
}
220-
],
192+
"childNodes": [],
221193
"isSVG": true,
222194
"id": 28
223195
},
224196
{
225197
"type": 3,
226198
"textContent": "\n ",
227-
"id": 32
199+
"id": 29
228200
},
229201
{
230202
"type": 2,
@@ -234,28 +206,27 @@
234206
"rr_height": "[100-150]px"
235207
},
236208
"childNodes": [],
237-
"id": 33
209+
"id": 30
238210
},
239211
{
240212
"type": 3,
241213
"textContent": "\n ",
242-
"id": 34
214+
"id": 31
243215
},
244216
{
245217
"type": 2,
246218
"tagName": "img",
247219
"attributes": {
248-
"data-sentry-unblock": "",
249-
"style": "width:100px;height:100px",
250-
"src": "file:///none.png"
220+
"rr_width": "[100-150]px",
221+
"rr_height": "[100-150]px"
251222
},
252223
"childNodes": [],
253-
"id": 35
224+
"id": 32
254225
},
255226
{
256227
"type": 3,
257228
"textContent": "\n ",
258-
"id": 36
229+
"id": 33
259230
},
260231
{
261232
"type": 2,
@@ -265,17 +236,17 @@
265236
"rr_height": "[0-50]px"
266237
},
267238
"childNodes": [],
268-
"id": 37
239+
"id": 34
269240
},
270241
{
271242
"type": 3,
272243
"textContent": "\n ",
273-
"id": 38
244+
"id": 35
274245
},
275246
{
276247
"type": 3,
277248
"textContent": "\n\n",
278-
"id": 39
249+
"id": 36
279250
}
280251
],
281252
"id": 8

‎dev-packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"childNodes": [
107107
{
108108
"type": 3,
109-
"textContent": "This should be unmasked due to data attribute",
109+
"textContent": "**** ******* ********* **** ****** **** ** ****** ***** **** **** **********",
110110
"id": 17
111111
}
112112
],
@@ -136,7 +136,7 @@
136136
"tagName": "input",
137137
"attributes": {
138138
"data-sentry-unmask": "",
139-
"placeholder": "Placeholder can be unmasked"
139+
"placeholder": "*********** *** ** ******** * *** *** **** ******* ********"
140140
},
141141
"childNodes": [],
142142
"id": 21
@@ -292,4 +292,4 @@
292292
}
293293
},
294294
"timestamp": [timestamp]
295-
}
295+
}

‎dev-packages/browser-integration-tests/suites/replay/privacyInput/init.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ window.Replay = Sentry.replayIntegration({
77
minReplayDuration: 0,
88
useCompression: false,
99
maskAllInputs: false,
10+
unmask: ['.sentry-unmask, [data-sentry-unmask]'],
1011
});
1112

1213
Sentry.init({

‎dev-packages/browser-integration-tests/suites/replay/privacyInputMaskAll/init.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ window.Replay = Sentry.replayIntegration({
77
minReplayDuration: 0,
88
useCompression: false,
99
maskAllInputs: true,
10+
unmask: ['.sentry-unmask, [data-sentry-unmask]'],
1011
});
1112

1213
Sentry.init({

‎packages/replay/MIGRATION.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# End of Replay Beta
22

3-
Sentry Replay is now out of Beta. This means that the usual stability guarantees apply.
3+
> For further migration changes please refer to the [general SDK migration notes](../../MIGRATION.md).
44
55
Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since
66
been fixed/improved. We **strongly** recommend anyone using Replay in a version before 7.39.0 to update to 7.39.0 or

0 commit comments

Comments
 (0)