Skip to content

Commit ff83878

Browse files
billyvgbillyvg
committed
fix(replay): Fix svgs not getting unblocked
This fixes an issue found in #7020 where `unblock` was not working for SVGs. This was due to our default media selectors including svg child elements. rrweb will handle blocking these as needed when the parent SVG is blocked.
1 parent 174531c commit ff83878

File tree

5 files changed

+72
-30
lines changed

5 files changed

+72
-30
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<div data-sentry-unmask>This should be unmasked due to data attribute</div>
88
<input placeholder="Placeholder should be masked" />
99
<div title="Title should be masked">Title should be masked</div>
10-
<svg style="width:200px;height:200px" viewBox="0 0 80 80"><path d=""/></svg>
11-
<svg style="width:200px;height:200px" class="sentry-unblock" viewBox="0 0 80 80" data-sentry-unblock><path d=""/></svg>
10+
<svg style="width:200px;height:200px" viewBox="0 0 80 80"><path d=""/><area /><rect /></svg>
11+
<svg style="width:200px;height:200px" viewBox="0 0 80 80" data-sentry-unblock><path d=""/><area /><rect /></svg>
1212
<img style="width:100px;height:100px" src="file:///none.png" />
1313
<img data-sentry-unblock style="width:100px;height:100px" src="file:///none.png" />
1414
</body>

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

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,6 @@
160160
"tagName": "svg",
161161
"attributes": {
162162
"style": "width:200px;height:200px",
163-
"class": "sentry-unblock",
164163
"viewBox": "0 0 80 80",
165164
"data-sentry-unblock": ""
166165
},
@@ -169,12 +168,27 @@
169168
"type": 2,
170169
"tagName": "path",
171170
"attributes": {
172-
"rr_width": "0px",
173-
"rr_height": "0px"
171+
"d": ""
174172
},
175173
"childNodes": [],
176174
"isSVG": true,
177175
"id": 26
176+
},
177+
{
178+
"type": 2,
179+
"tagName": "area",
180+
"attributes": {},
181+
"childNodes": [],
182+
"isSVG": true,
183+
"id": 27
184+
},
185+
{
186+
"type": 2,
187+
"tagName": "rect",
188+
"attributes": {},
189+
"childNodes": [],
190+
"isSVG": true,
191+
"id": 28
178192
}
179193
],
180194
"isSVG": true,
@@ -183,7 +197,7 @@
183197
{
184198
"type": 3,
185199
"textContent": "\n ",
186-
"id": 27
200+
"id": 29
187201
},
188202
{
189203
"type": 2,
@@ -193,12 +207,12 @@
193207
"rr_height": "100px"
194208
},
195209
"childNodes": [],
196-
"id": 28
210+
"id": 30
197211
},
198212
{
199213
"type": 3,
200214
"textContent": "\n ",
201-
"id": 29
215+
"id": 31
202216
},
203217
{
204218
"type": 2,
@@ -209,17 +223,17 @@
209223
"src": "file:///none.png"
210224
},
211225
"childNodes": [],
212-
"id": 30
226+
"id": 32
213227
},
214228
{
215229
"type": 3,
216230
"textContent": "\n ",
217-
"id": 31
231+
"id": 33
218232
},
219233
{
220234
"type": 3,
221235
"textContent": "\n\n",
222-
"id": 32
236+
"id": 34
223237
}
224238
],
225239
"id": 7

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

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,6 @@
160160
"tagName": "svg",
161161
"attributes": {
162162
"style": "width:200px;height:200px",
163-
"class": "sentry-unblock",
164163
"viewBox": "0 0 80 80",
165164
"data-sentry-unblock": ""
166165
},
@@ -169,12 +168,27 @@
169168
"type": 2,
170169
"tagName": "path",
171170
"attributes": {
172-
"rr_width": "0px",
173-
"rr_height": "0px"
171+
"d": ""
174172
},
175173
"childNodes": [],
176174
"isSVG": true,
177175
"id": 26
176+
},
177+
{
178+
"type": 2,
179+
"tagName": "area",
180+
"attributes": {},
181+
"childNodes": [],
182+
"isSVG": true,
183+
"id": 27
184+
},
185+
{
186+
"type": 2,
187+
"tagName": "rect",
188+
"attributes": {},
189+
"childNodes": [],
190+
"isSVG": true,
191+
"id": 28
178192
}
179193
],
180194
"isSVG": true,
@@ -183,7 +197,7 @@
183197
{
184198
"type": 3,
185199
"textContent": "\n ",
186-
"id": 27
200+
"id": 29
187201
},
188202
{
189203
"type": 2,
@@ -193,12 +207,12 @@
193207
"rr_height": "100px"
194208
},
195209
"childNodes": [],
196-
"id": 28
210+
"id": 30
197211
},
198212
{
199213
"type": 3,
200214
"textContent": "\n ",
201-
"id": 29
215+
"id": 31
202216
},
203217
{
204218
"type": 2,
@@ -209,17 +223,17 @@
209223
"src": "file:///none.png"
210224
},
211225
"childNodes": [],
212-
"id": 30
226+
"id": 32
213227
},
214228
{
215229
"type": 3,
216230
"textContent": "\n ",
217-
"id": 31
231+
"id": 33
218232
},
219233
{
220234
"type": 3,
221235
"textContent": "\n\n",
222-
"id": 32
236+
"id": 34
223237
}
224238
],
225239
"id": 7

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

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,6 @@
160160
"tagName": "svg",
161161
"attributes": {
162162
"style": "width:200px;height:200px",
163-
"class": "sentry-unblock",
164163
"viewBox": "0 0 80 80",
165164
"data-sentry-unblock": ""
166165
},
@@ -169,12 +168,27 @@
169168
"type": 2,
170169
"tagName": "path",
171170
"attributes": {
172-
"rr_width": "0px",
173-
"rr_height": "0px"
171+
"d": ""
174172
},
175173
"childNodes": [],
176174
"isSVG": true,
177175
"id": 26
176+
},
177+
{
178+
"type": 2,
179+
"tagName": "area",
180+
"attributes": {},
181+
"childNodes": [],
182+
"isSVG": true,
183+
"id": 27
184+
},
185+
{
186+
"type": 2,
187+
"tagName": "rect",
188+
"attributes": {},
189+
"childNodes": [],
190+
"isSVG": true,
191+
"id": 28
178192
}
179193
],
180194
"isSVG": true,
@@ -183,7 +197,7 @@
183197
{
184198
"type": 3,
185199
"textContent": "\n ",
186-
"id": 27
200+
"id": 29
187201
},
188202
{
189203
"type": 2,
@@ -193,12 +207,12 @@
193207
"rr_height": "100px"
194208
},
195209
"childNodes": [],
196-
"id": 28
210+
"id": 30
197211
},
198212
{
199213
"type": 3,
200214
"textContent": "\n ",
201-
"id": 29
215+
"id": 31
202216
},
203217
{
204218
"type": 2,
@@ -209,17 +223,17 @@
209223
"src": "file:///none.png"
210224
},
211225
"childNodes": [],
212-
"id": 30
226+
"id": 32
213227
},
214228
{
215229
"type": 3,
216230
"textContent": "\n ",
217-
"id": 31
231+
"id": 33
218232
},
219233
{
220234
"type": 3,
221235
"textContent": "\n\n",
222-
"id": 32
236+
"id": 34
223237
}
224238
],
225239
"id": 7

‎packages/replay/src/integration.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type { RecordingOptions, ReplayConfiguration, ReplayPluginOptions } from
88
import { getPrivacyOptions } from './util/getPrivacyOptions';
99
import { isBrowser } from './util/isBrowser';
1010

11-
const MEDIA_SELECTORS = 'img,image,svg,path,rect,area,video,object,picture,embed,map,audio';
11+
const MEDIA_SELECTORS = 'img,image,svg,video,object,picture,embed,map,audio';
1212

1313
let _initialized = false;
1414

0 commit comments

Comments
 (0)