SyntaxError: Failed to execute 'matches' on 'Element': The provided selector is empty.

[priemskiyyy]

Expected Behavior

No errors should occur in this section of the code.

Current Behavior

A few days ago, we noticed a significant increase in error events in Sentry originating from rrweb package. Previously, there were no issues. The stack trace indicates that the error occurs in the following part of rrweb code:

    if (blockSelector) {
        if (el.matches(blockSelector))
            return true;
        if (checkAncestors && el.closest(blockSelector) !== null)
            return true;
    } 

Additionally, sometimes we encounter this error:

SyntaxError: '' is not a valid selector.

Possible Solution

Extra checks in the highlighted part of the code to ensure blockSelector is valid before using it?

Steps to Reproduce

1. Install @amplitude/analytics-browser, @amplitude/plugin-session-replay-browser
2. Initialize Amplitude and add the session replay plugin
3. Observe issues in Sentry

Environment

• @amplitude/analytics-browser: 2.4.1
• @amplitude/plugin-session-replay-browser: 1.5.1
• next: 14.2.4
• node: >= 18.20.0
• Installation Method: pnpm
• Browser and Version: n/a

[lewgordon-amplitude]

Hi @priemskiyyy ! Thanks for opening this. In a more recent version we pre-filter invalid selector so that rrweb won't hit errors. This comes with the side effect that this may not block as expected, but incur less errors. Does this work for you or would you want some other precheck mechanism (e.g. fast fail on startup)?

[priemskiyyy]

Hey @lewgordon-amplitude ,
Sorry for the delay. I tested the latest version, and it works fine. Thanks for addressing the issue and for your support!

[lewgordon-amplitude]

Awesome, glad to hear!