Skip to content

feat(replay): Add more default block filters #7233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mydea merged 12 commits into from
Feb 22, 2023
Merged

feat(replay): Add more default block filters #7233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
60c2252
Add additional block filters
lucas-zimerman Feb 20, 2023
3e44dac
fix prettier
lucas-zimerman Feb 20, 2023
6d7b8ac
isolated base block to const var
lucas-zimerman Feb 21, 2023
d6da706
fix changes
lucas-zimerman Feb 21, 2023
4c0f51d
Merge branch 'develop' into fix/blockall-newtypes
lucas-zimerman Feb 21, 2023
310480e
fix snapshot
lucas-zimerman Feb 22, 2023
32a20fe
fix tests
lucas-zimerman Feb 22, 2023
ce813b8
fix lint
lucas-zimerman Feb 22, 2023
79d575c
fix prettier
lucas-zimerman Feb 22, 2023
912aef9
nit test
lucas-zimerman Feb 22, 2023
0b70fa3
fix link on replay
lucas-zimerman Feb 22, 2023
5736cd5
Merge branch 'develop' into fix/blockall-newtypes
lucas-zimerman Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions ...es/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,8 @@
"type": 2,
"tagName": "link",
"attributes": {
"rel": "icon",
"type": "image/png",
"href": "file://assets/icon/favicon.png"
"rr_width": "[0-50]px",
"rr_height": "[0-50]px"
},
"childNodes": [],
"id": 6
Expand Down
5 changes: 2 additions & 3 deletions ...ges/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,8 @@
"type": 2,
"tagName": "link",
"attributes": {
"rel": "icon",
"type": "image/png",
"href": "file:///icon/favicon.png"
"rr_width": "[0-50]px",
"rr_height": "[0-50]px"
},
"childNodes": [],
"id": 6
Expand Down
5 changes: 2 additions & 3 deletions ...ages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,8 @@
"type": 2,
"tagName": "link",
"attributes": {
"rel": "icon",
"type": "image/png",
"href": "file://assets/icon/favicon.png"
"rr_width": "[0-50]px",
"rr_height": "[0-50]px"
},
"childNodes": [],
"id": 6
Expand Down
3 changes: 2 additions & 1 deletion packages/replay/src/integration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import type { RecordingOptions, ReplayConfiguration, ReplayPluginOptions } from
import { getPrivacyOptions } from './util/getPrivacyOptions';
import { isBrowser } from './util/isBrowser';

const MEDIA_SELECTORS = 'img,image,svg,video,object,picture,embed,map,audio';
const MEDIA_SELECTORS =
'img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]';

let _initialized = false;

Expand Down
9 changes: 8 additions & 1 deletion packages/replay/src/util/getPrivacyOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ export function getPrivacyOptions({
// eslint-disable-next-line deprecation/deprecation
ignoreClass,
}: GetPrivacyOptions): GetPrivacyReturn {
const defaultBlockedElements = ['base[href="/"]'];

const maskSelector = getOption(mask, ['.sentry-mask', '[data-sentry-mask]'], maskTextClass, maskTextSelector);
const unmaskSelector = getOption(unmask, ['.sentry-unmask', '[data-sentry-unmask]']);

Expand All @@ -79,7 +81,12 @@ export function getPrivacyOptions({
maskInputSelector: maskSelector,
unmaskInputSelector: unmaskSelector,

blockSelector: getOption(block, ['.sentry-block', '[data-sentry-block]'], blockClass, blockSelector),
blockSelector: getOption(
block,
['.sentry-block', '[data-sentry-block]', ...defaultBlockedElements],
blockClass,
blockSelector,
),
unblockSelector: getOption(unblock, ['.sentry-unblock', '[data-sentry-unblock]']),
ignoreSelector: getOption(ignore, ['.sentry-ignore', '[data-sentry-ignore]'], ignoreClass),
};
Expand Down
6 changes: 3 additions & 3 deletions packages/replay/test/integration/integrationSettings.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ describe('Integration | integrationSettings', () => {
it('sets the correct configuration when `blockAllMedia` is disabled', async () => {
const { replay } = await mockSdk({ replayOptions: { blockAllMedia: false } });

expect(replay['_recordingOptions'].blockSelector).toBe('.sentry-block,[data-sentry-block]');
expect(replay['_recordingOptions'].blockSelector).toBe('.sentry-block,[data-sentry-block],base[href="/"]');
});

it('sets the correct configuration when `blockSelector` is empty and `blockAllMedia` is enabled', async () => {
const { replay } = await mockSdk({ replayOptions: { blockSelector: '' } });

expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot(
'",.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"',
'",.sentry-block,[data-sentry-block],base[href=\\"/\\"],img,image,svg,video,object,picture,embed,map,audio,link[rel=\\"icon\\"],link[rel=\\"apple-touch-icon\\"]"',
);
});

Expand All @@ -26,7 +26,7 @@ describe('Integration | integrationSettings', () => {
});

expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot(
'"[data-test-blockSelector],.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"',
'"[data-test-blockSelector],.sentry-block,[data-sentry-block],base[href=\\"/\\"],img,image,svg,video,object,picture,embed,map,audio,link[rel=\\"icon\\"],link[rel=\\"apple-touch-icon\\"]"',
);
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/replay/test/integration/rrweb.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('Integration | rrweb', () => {
});
expect(mockRecord.mock.calls[0][0]).toMatchInlineSnapshot(`
Object {
"blockSelector": ".sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio",
"blockSelector": ".sentry-block,[data-sentry-block],base[href=\\"/\\"],img,image,svg,video,object,picture,embed,map,audio,link[rel=\\"icon\\"],link[rel=\\"apple-touch-icon\\"]",
"collectFonts": true,
"emit": [Function],
"ignoreSelector": ".sentry-test-ignore,.sentry-ignore,[data-sentry-ignore]",
Expand Down
6 changes: 3 additions & 3 deletions packages/replay/test/unit/util/getPrivacyOptions.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe('Unit | util | getPrivacyOptions', () => {
}),
).toMatchInlineSnapshot(`
Object {
"blockSelector": ".custom-block,.sentry-block,[data-sentry-block]",
"blockSelector": ".custom-block,.sentry-block,[data-sentry-block],base[href=\\"/\\"]",
"ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore]",
"maskInputSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
"maskTextSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
Expand Down Expand Up @@ -47,7 +47,7 @@ describe('Unit | util | getPrivacyOptions', () => {
}),
).toMatchInlineSnapshot(`
Object {
"blockSelector": ".custom-block,.deprecated-block-selector,.sentry-block,[data-sentry-block],.deprecated-block-class",
"blockSelector": ".custom-block,.deprecated-block-selector,.sentry-block,[data-sentry-block],base[href=\\"/\\"],.deprecated-block-class",
"ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore],.deprecated-ignore-class",
"maskInputSelector": ".custom-mask,.deprecated-mask-selector,.sentry-mask,[data-sentry-mask],.deprecated-mask-class",
"maskTextSelector": ".custom-mask,.deprecated-mask-selector,.sentry-mask,[data-sentry-mask],.deprecated-mask-class",
Expand All @@ -73,7 +73,7 @@ describe('Unit | util | getPrivacyOptions', () => {
).toMatchInlineSnapshot(`
Object {
"blockClass": /deprecated-block-\\*/,
"blockSelector": ".custom-block,.sentry-block,[data-sentry-block]",
"blockSelector": ".custom-block,.sentry-block,[data-sentry-block],base[href=\\"/\\"]",
"ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore]",
"maskInputSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
"maskTextClass": /deprecated-mask-\\*/,
Expand Down