Skip to content
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

[Bug]: Uncaught SyntaxError: Regular expression too large #1457

Closed
1 task done
mrfullset opened this issue Apr 24, 2024 · 7 comments
Closed
1 task done

[Bug]: Uncaught SyntaxError: Regular expression too large #1457

mrfullset opened this issue Apr 24, 2024 · 7 comments
Labels
bug Something isn't working

Comments

@mrfullset
Copy link

Preflight Checklist

  • I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

v2.0.0-alpha.13

Expected Behavior

Live mode replay starts

Actual Behavior

rrweb fails with an error in a console: Uncaught SyntaxError: Invalid regular expression: (huge CSS contents) Regular expression too large

Steps to Reproduce

rrweb.record({
        emit(event) {
          // send via websocket
        },
        recordCanvas: true,
        dataURLOptions: {
          type: 'image/webp',
          quality: 0.6,
        },
      });
rrweb.Replayer([],
        { root: this.$refs.container,
          liveMode: true,
          UNSAFE_replayCanvas: true,
          mouseTail: {
            strokeStyle: "#d0d4e1"
          }
        })

Testcase Gist URL

No response

Additional Information

The same code as in "Steps to Reproduce" section worked with v1.1.3.
CSS inside of a regex are generated by Tailwind.

@mrfullset mrfullset added the bug Something isn't working label Apr 24, 2024
@dobrynin
Copy link

We are also seeing this.

@dobrynin
Copy link

dobrynin commented May 13, 2024

It seems to be coming from

result = result.replace(selectorMatcher, (selector) => {
const newSelector = selector.replace(
HOVER_SELECTOR_GLOBAL,
'$1.\\:hover',
);
return `${selector}, ${newSelector}`;
});

@priyankblitzz
Copy link

Yes I am also experiencing the same issue with my React Webapp. Is there any workaround?

image

@colingm
Copy link
Contributor

colingm commented May 16, 2024

@priyankblitzz we didn't have any workaround other than rolling back rrweb to alpha.11

@eoghanmurray
Copy link
Contributor

I'm not sure what has changed such that it's now generating a bigger CSS regex on the first selectorMatcher, as #1431 didn't modify that.
Does anyone have a test website that reliably generates the issue? Is that <SVG embedded in CSS or is it in the document and somehow mistakenly going through the adaptCssForReplay function?

There's also #1458 which makes improvements and might be able to fix it although not quite currently ready for merge.

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this issue May 20, 2024
…ression too large)

 - see test case which is extracted from a real world css file; the selector regex was able to traverse the curly brace as when looking for quotes, it wasn't taking into account that the start quote could be escaped
@eoghanmurray
Copy link
Contributor

Could you guys review or apply #1481 to verify that it fixes it?

Juice10 pushed a commit that referenced this issue May 22, 2024
* Fix and test for bug #1457 (Uncaught SyntaxError: Regular expression too large)

 - see test case which is extracted from a real world css file; the selector regex was able to traverse the curly brace as when looking for quotes, it wasn't taking into account that the start quote could be escaped

* Apply formatting changes

* Create fair-ducks-clean.md

* Fix @import regex bit which was stopping consumption in the middle of a url - need to consume quotes.

Thanks [email protected] for reporting and isolating this case

---------

Co-authored-by: eoghanmurray <[email protected]>
@priyankblitzz
Copy link

just tried the latest version(alpha 14) in my web app and it is working fine now. The issue is resolved for me now. Thank you so much for taking care of the issue.

jxiwang pushed a commit to amplitude/rrweb that referenced this issue Jun 21, 2024
…ression too large)

 - see test case which is extracted from a real world css file; the selector regex was able to traverse the curly brace as when looking for quotes, it wasn't taking into account that the start quote could be escaped
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants