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.

Author: billyvg

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

@@ -7,8 +7,8 @@
     <div data-sentry-unmask>This should be unmasked due to data attribute</div>
     <input placeholder="Placeholder should be masked" />
     <div title="Title should be masked">Title should be masked</div>
-    <svg style="width:200px;height:200px" viewBox="0 0 80 80"><path d=""/></svg>
-    <svg style="width:200px;height:200px" class="sentry-unblock" viewBox="0 0 80 80" data-sentry-unblock><path d=""/></svg>
+    <svg style="width:200px;height:200px" viewBox="0 0 80 80"><path d=""/><area /><rect /></svg>
+    <svg style="width:200px;height:200px" viewBox="0 0 80 80" data-sentry-unblock><path d=""/><area /><rect /></svg>
     <img style="width:100px;height:100px" src="file:///none.png" />
     <img data-sentry-unblock style="width:100px;height:100px" src="file:///none.png" />
   </body>

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,21 +198,36 @@ 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,
                 },
                 {
                   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,

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;
 

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"',
       );
     });
   });

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]",