Skip to content

Commit 93c4759

Browse files
authored
fix(replay): Fix svgs not getting unblocked (#7132)
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 df73015 commit 93c4759

File tree

5 files changed

+29
-15
lines changed

5 files changed

+29
-15
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

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,6 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
190190
tagName: 'svg',
191191
attributes: {
192192
style: 'width:200px;height:200px',
193-
class: 'sentry-unblock',
194193
viewBox: '0 0 80 80',
195194
'data-sentry-unblock': '',
196195
},
@@ -199,21 +198,36 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
199198
type: 2,
200199
tagName: 'path',
201200
attributes: {
202-
rr_width: '0px',
203-
rr_height: '0px',
201+
d: '',
204202
},
205203
childNodes: [],
206204
isSVG: true,
207205
id: 26,
208206
},
207+
{
208+
type: 2,
209+
tagName: 'area',
210+
attributes: {},
211+
childNodes: [],
212+
isSVG: true,
213+
id: 27,
214+
},
215+
{
216+
type: 2,
217+
tagName: 'rect',
218+
attributes: {},
219+
childNodes: [],
220+
isSVG: true,
221+
id: 28,
222+
},
209223
],
210224
isSVG: true,
211225
id: 25,
212226
},
213227
{
214228
type: 3,
215229
textContent: '\n ',
216-
id: 27,
230+
id: 29,
217231
},
218232
{
219233
type: 2,
@@ -223,12 +237,12 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
223237
rr_height: '100px',
224238
},
225239
childNodes: [],
226-
id: 28,
240+
id: 30,
227241
},
228242
{
229243
type: 3,
230244
textContent: '\n ',
231-
id: 29,
245+
id: 31,
232246
},
233247
{
234248
type: 2,
@@ -239,17 +253,17 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
239253
src: 'file:///none.png',
240254
},
241255
childNodes: [],
242-
id: 30,
256+
id: 32,
243257
},
244258
{
245259
type: 3,
246260
textContent: '\n ',
247-
id: 31,
261+
id: 33,
248262
},
249263
{
250264
type: 3,
251265
textContent: '\n\n',
252-
id: 32,
266+
id: 34,
253267
},
254268
],
255269
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

packages/replay/test/integration/integrationSettings.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('Integration | integrationSettings', () => {
1717
const { replay } = await mockSdk({ replayOptions: { blockSelector: '' } });
1818

1919
expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot(
20-
'",.sentry-block,[data-sentry-block],img,image,svg,path,rect,area,video,object,picture,embed,map,audio"',
20+
'",.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"',
2121
);
2222
});
2323

@@ -27,7 +27,7 @@ describe('Integration | integrationSettings', () => {
2727
});
2828

2929
expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot(
30-
'"[data-test-blockSelector],.sentry-block,[data-sentry-block],img,image,svg,path,rect,area,video,object,picture,embed,map,audio"',
30+
'"[data-test-blockSelector],.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"',
3131
);
3232
});
3333
});

packages/replay/test/integration/rrweb.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('Integration | rrweb', () => {
1717
});
1818
expect(mockRecord.mock.calls[0][0]).toMatchInlineSnapshot(`
1919
Object {
20-
"blockSelector": ".sentry-block,[data-sentry-block],img,image,svg,path,rect,area,video,object,picture,embed,map,audio",
20+
"blockSelector": ".sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio",
2121
"collectFonts": true,
2222
"emit": [Function],
2323
"ignoreSelector": ".sentry-test-ignore,.sentry-ignore,[data-sentry-ignore]",

0 commit comments

Comments
 (0)