xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add ignoreSelector option (#1262)

Browse Source 
* feat: Add `ignoreSelector` option

Similar to `ignoreClass`, but accepts a CSS selector so that you can use any CSS selector.

* Apply formatting changes

* Create clean-shrimps-lay.md

* Apply formatting changes
This commit is contained in:
Billy Vong
2026-04-01 12:00:00 +08:00
committed by GitHub
parent b4288791bd
commit d4ce14af98
8 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/clean-shrimps-lay.md Normal file
View File

@@ -0,0 +1,7 @@
---
'rrweb': patch
---
feat: Add `ignoreSelector` option
Similar to ignoreClass, but accepts a CSS selector so that you can use any CSS selector.

1
guide.md
View File

@@ -143,6 +143,7 @@ The parameter of `rrweb.record` accepts the following options.
| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
| ignoreSelector | null | Use a string to configure which selector should be ignored, refer to the [privacy](#privacy) chapter |
| ignoreCSSAttributes | null | array of CSS attributes that should be ignored |
| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |

2
packages/rrweb/src/record/index.ts
View File

@@ -64,6 +64,7 @@ function record<T = eventWithTime>(
blockClass = 'rr-block',
blockSelector = null,
ignoreClass = 'rr-ignore',
ignoreSelector = null,
maskTextClass = 'rr-mask',
maskTextSelector = null,
inlineStylesheet = true,
@@ -522,6 +523,7 @@ function record<T = eventWithTime>(
},
blockClass,
ignoreClass,
ignoreSelector,
maskTextClass,
maskTextSelector,
maskInputOptions,

6
packages/rrweb/src/record/observer.ts
View File

@@ -423,6 +423,7 @@ function initInputObserver({
blockClass,
blockSelector,
ignoreClass,
ignoreSelector,
maskInputOptions,
maskInputFn,
sampling,
@@ -449,7 +450,10 @@ function initInputObserver({
return;
}
if (target.classList.contains(ignoreClass)) {
if (
target.classList.contains(ignoreClass) ||
(ignoreSelector && target.matches(ignoreSelector))
) {
return;
}
let text = (target as HTMLInputElement).value;

2
packages/rrweb/src/types.ts
View File

@@ -46,6 +46,7 @@ export type recordOptions<T> = {
blockClass?: blockClass;
blockSelector?: string;
ignoreClass?: string;
ignoreSelector?: string;
maskTextClass?: maskTextClass;
maskTextSelector?: string;
maskAllInputs?: boolean;
@@ -84,6 +85,7 @@ export type observerParam = {
blockClass: blockClass;
blockSelector: string | null;
ignoreClass: string;
ignoreSelector: string | null;
maskTextClass: maskTextClass;
maskTextSelector: string | null;
maskInputOptions: MaskInputOptions;

1
packages/rrweb/test/html/ignore.html
View File

@@ -10,6 +10,7 @@
<body>
<form>
<label for="ignore text"> <input type="text" class="rr-ignore" /> </label>
<label for="ignore selector"> <input type="text" data-rr-ignore /> </label>
</form>
</body>
</html>

7
packages/rrweb/test/integration.test.ts
View File

@@ -298,9 +298,14 @@ describe('record integration tests', function (this: ISuite) {
it('should not record input events on ignored elements', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'ignore.html'));
await page.setContent(
getHtml.call(this, 'ignore.html', {
ignoreSelector: '[data-rr-ignore]',
}),
);
await page.type('.rr-ignore', 'secret');
await page.type('[data-rr-ignore]', 'secret');
const snapshots = (await page.evaluate(
'window.snapshots',

1
packages/rrweb/test/utils.ts
View File

@@ -597,6 +597,7 @@ export function generateRecordSnippet(options: recordOptions<eventWithTime>) {
emit: event => {
window.snapshots.push(event);
},
ignoreSelector: ${options.ignoreSelector},
maskTextSelector: ${JSON.stringify(options.maskTextSelector)},
maskAllInputs: ${options.maskAllInputs},
maskInputOptions: ${JSON.stringify(options.maskAllInputs)},