Skip to content

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 Lms24 and billyvg 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% 🔺)


/** 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.

3 participants