Skip to content

fix(replay): Improve handling of maskAllText selector #6637

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.

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
merged 2 commits into from
Jan 3, 2023

Conversation

mydea
Copy link
Member

@mydea mydea commented Jan 3, 2023

This PR improves the handling of the replay maskAllText option in two ways:

  1. Currently, when maskAllText === true we overwrite the maskTextSelector. However, since we set maskAllText = true by default, this means that if you configure replay like this:
new Replay({
  maskTextSelector: '[custom]'
})

This will actually be overwritten by the maskAllText selector, because internally maskAllText is true.

This PR changes this behavior so that we only overwrite it if either we explicitly state maskAllText: true, or if we do not set it at all and no maskTextSelector is specified.

So the new behavior is:

// Result: all text selector
new Replay({})

// Result: [custom]
new Replay({ maskTextSelector: '[custom]' })

// Result: all text selector
new Replay({ maskTextSelector: '[custom]', maskAllText: true })
  1. Apparently, some browsers have issues with the current all text selector. I suspect the problem is the selector list in :not(), see: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#browser_compatibility
    So I changed this to avoid using this selector type.

Closes #6618

@mydea mydea requested review from billyvg and Lms24 January 3, 2023 09:58
@mydea mydea self-assigned this Jan 3, 2023
@mydea mydea added the Package: replay Issues related to the Sentry Replay SDK label Jan 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jan 3, 2023

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 19.79 KB (+0.02% 🔺)
@sentry/browser - ES5 CDN Bundle (minified) 61.3 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 18.57 KB (-0.01% 🔽)
@sentry/browser - ES6 CDN Bundle (minified) 54.84 KB (0%)
@sentry/browser - Webpack (gzipped + minified) 20.34 KB (0%)
@sentry/browser - Webpack (minified) 66.48 KB (0%)
@sentry/react - Webpack (gzipped + minified) 20.36 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified) 47.56 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 26.75 KB (0%)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 25.19 KB (+0.02% 🔺)
@sentry/replay ES6 CDN Bundle (gzipped + minified) 42.11 KB (+0.04% 🔺)
@sentry/replay - Webpack (gzipped + minified) 38.19 KB (+0.05% 🔺)

@@ -27,4 +27,4 @@ export const DEFAULT_SESSION_SAMPLE_RATE = 0.1;
export const DEFAULT_ERROR_SAMPLE_RATE = 1.0;

/** The select to use for the `maskAllText` option */
export const MASK_ALL_TEXT_SELECTOR = 'body *:not(style,script)';
export const MASK_ALL_TEXT_SELECTOR = 'body *:not(style), body *:not(script)';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: replay Issues related to the Sentry Replay SDK
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Failed to execute 'matches' on 'Element': 'body *:not(style,script)' is not a valid selector.
2 participants