From 3a0ef887cb91e0f329698fdf0ca114dac8a02d52 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Thu, 9 Feb 2023 19:23:23 -0500 Subject: [PATCH 1/2] 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. --- .../suites/replay/privacy/template.html | 4 +-- .../suites/replay/privacy/test.ts | 32 +++++++++++++------ packages/replay/src/integration.ts | 2 +- 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/integration-tests/suites/replay/privacy/template.html b/packages/integration-tests/suites/replay/privacy/template.html index aa916d3f116e..a61532e6ae68 100644 --- a/packages/integration-tests/suites/replay/privacy/template.html +++ b/packages/integration-tests/suites/replay/privacy/template.html @@ -7,8 +7,8 @@
This should be unmasked due to data attribute
Title should be masked
- - + + diff --git a/packages/integration-tests/suites/replay/privacy/test.ts b/packages/integration-tests/suites/replay/privacy/test.ts index 3ad8ee5684fb..0ab77a9e01f3 100644 --- a/packages/integration-tests/suites/replay/privacy/test.ts +++ b/packages/integration-tests/suites/replay/privacy/test.ts @@ -190,7 +190,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,13 +198,28 @@ 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, @@ -213,7 +227,7 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal { type: 3, textContent: '\n ', - id: 27, + id: 29, }, { type: 2, @@ -223,12 +237,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 +253,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, diff --git a/packages/replay/src/integration.ts b/packages/replay/src/integration.ts index d7c67b403f77..3f27270ba4f0 100644 --- a/packages/replay/src/integration.ts +++ b/packages/replay/src/integration.ts @@ -8,7 +8,7 @@ import type { RecordingOptions, ReplayConfiguration, ReplayPluginOptions } from import { getPrivacyOptions } from './util/getPrivacyOptions'; import { isBrowser } from './util/isBrowser'; -const MEDIA_SELECTORS = 'img,image,svg,path,rect,area,video,object,picture,embed,map,audio'; +const MEDIA_SELECTORS = 'img,image,svg,video,object,picture,embed,map,audio'; let _initialized = false; From 5232cefb4487368040e0a145af85c8f9c85f4be1 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Thu, 9 Feb 2023 19:37:08 -0500 Subject: [PATCH 2/2] update tests --- packages/replay/test/integration/integrationSettings.test.ts | 4 ++-- packages/replay/test/integration/rrweb.test.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/replay/test/integration/integrationSettings.test.ts b/packages/replay/test/integration/integrationSettings.test.ts index dd23b1a4cfdb..5bab52d3f1fc 100644 --- a/packages/replay/test/integration/integrationSettings.test.ts +++ b/packages/replay/test/integration/integrationSettings.test.ts @@ -17,7 +17,7 @@ describe('Integration | integrationSettings', () => { const { replay } = await mockSdk({ replayOptions: { blockSelector: '' } }); expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot( - '",.sentry-block,[data-sentry-block],img,image,svg,path,rect,area,video,object,picture,embed,map,audio"', + '",.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"', ); }); @@ -27,7 +27,7 @@ describe('Integration | integrationSettings', () => { }); expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot( - '"[data-test-blockSelector],.sentry-block,[data-sentry-block],img,image,svg,path,rect,area,video,object,picture,embed,map,audio"', + '"[data-test-blockSelector],.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"', ); }); }); diff --git a/packages/replay/test/integration/rrweb.test.ts b/packages/replay/test/integration/rrweb.test.ts index 00e1fb09af97..3269466f99b8 100644 --- a/packages/replay/test/integration/rrweb.test.ts +++ b/packages/replay/test/integration/rrweb.test.ts @@ -17,7 +17,7 @@ describe('Integration | rrweb', () => { }); expect(mockRecord.mock.calls[0][0]).toMatchInlineSnapshot(` Object { - "blockSelector": ".sentry-block,[data-sentry-block],img,image,svg,path,rect,area,video,object,picture,embed,map,audio", + "blockSelector": ".sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio", "collectFonts": true, "emit": [Function], "ignoreSelector": ".sentry-test-ignore,.sentry-ignore,[data-sentry-ignore]",