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

[m-nathani]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/react (replay)

SDK Version

7.27.0

Framework Version

React 16.14.0

Link to Sentry event

https://sentry.io/organizations/umai/issues/3824145610/events/2b4e1809b6b3476bbedc4b7534cede98/?project=5264087#breadcrumbs

Steps to Reproduce

I upgraded sentry to 7.27.0 and added Replay integrations. which started causing this issue.

Moreover, it appears that events for this error are happening for Android device.

Expected Result

Should not throw the error on using sentry replay. Furthermore, my application is traditional app which is using sentry for exception handling.

Here are the list of all the event happening for this issue on our application:
https://sentry.io/organizations/umai/issues/3824145610/events/30be290df3874c4bbdfa9b0aaff0030b/events/?project=5264087&referrer=replay-console%2F

Actual Result

breaks on line:
… ules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js in needMaskingText at line 264:16

breaks on line : (node.matches(maskTextSelector))

SyntaxError: Failed to execute 'matches' on 'Element': 'body *:not(style,script)' is not a valid selector.
  at needMaskingText(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:264:16)
  at needMaskingText(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:271:12)
  at serializeNode(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:495:36)
  at serializeNodeWithId(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:585:25)
  at serializeNodeWithId(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:657:33)
  at serializeNodeWithId(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:657:33)
  at serializeNodeWithId(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:657:33)
  at serializeNodeWithId(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:657:33)
  at _e(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js:774:11)
  at ht(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb/src/record/index.js:219:21)
  at record.takeFullSnapshot(../node_modules/@sentry/replay/esm/node_modules/rrweb/es/rrweb/packages/rrweb/src/record/index.js:434:3)
  at <object>.value(../node_modules/@sentry/replay/esm/replay.js:714:14)
  at <object>.value(../node_modules/@sentry/replay/esm/replay.js:841:12)
  at <object>.value(../node_modules/@sentry/replay/esm/replay.js:692:34)
  at this.handleVisibilityChange(../node_modules/@sentry/replay/esm/replay.js:580:18)
  at sentryWrapped(../node_modules/@sentry/browser/esm/helpers.js:86:17)

[moonrailgun]

Same problem, is any update?

[bruno-garcia]

Moreover, it appears that events for this error are happening for Android device.

Does this mean it doesn't not reproduce on other devices?
What model/manufaturer are these Android devices? And what browsers?
I wonder if it's some ancient Android version.

[m-nathani]

Moreover, it appears that events for this error are happening for Android device.

Does this mean it doesn't not reproduce on other devices? What model/manufaturer are these Android devices? And what browsers? I wonder if it's some ancient Android version.

@bruno-garcia All the error are appearing on Android 10 and above...

Particularly on these devices browsers :

1. Opera Mobile 44.14.2246,
   Devices: CPH1819,
2. Samsung Internet 13.2 (some occurrence on 11.2 and 14)
   Devices: SM-A528B, SM-N960F, SM-T225
3. Chrome Mobile WebView 87.0.4280 ( some occurrence on 70.0.3538)
   Devices: SM-A305F , JNY-LX2, SM-F926B, CPH2293

here is the list of all the errors: https://sentry.io/organizations/umai/issues/3824145610/events/?project=5264087&referrer=issue-stream

[mydea]

Hmm, I guess this happens because the browser does not support the selector body *:not(style,script). I would suspect it has to do with the :not(style,script) part, although I am quite surprised.

Maybe it works if we rewrite it as body *:not(style), body *:not(script), I'll look into it, although I don't have any device to try this. Could you by chance give it a try?

new Replay({
  maskAllText: false,
  maskTextSelector: 'body *:not(style), body *:not(script)'
})

[moonrailgun]

Hmm, I guess this happens because the browser does not support the selector body *:not(style,script). I would suspect it has to do with the :not(style,script) part, although I am quite surprised.

Maybe it works if we rewrite it as body *:not(style), body *:not(script), I'll look into it, although I don't have any device to try this. Could you by chance give it a try?

new Replay({
  maskAllText: false,
  maskTextSelector: 'body *:not(style), body *:not(script)'
})

I agree with you. selector list argument support in low version of android is not good.

still some android device stay in 4.4 kernel