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

InvalidStateError: Invalid resize dimensions #1150

Closed
jmillxyz opened this issue Apr 22, 2024 · 7 comments · Fixed by #1208
Closed

InvalidStateError: Invalid resize dimensions #1150

jmillxyz opened this issue Apr 22, 2024 · 7 comments · Fixed by #1208

Comments

@jmillxyz
Copy link

We recently began using posthog-js session recording via the NPM library. Recently we've gotten this InvalidStateError: Invalid resize dimensions with the following backtrace, which seems to be related to rrweb:

https://us-assets.i.posthog.com/static/recorder.js:1 in l
https://us-assets.i.posthog.com/static/recorder.js:1
node_modules/.pnpm/[email protected]_patch_hash=xzot57gbh2vywrm2w2dzrqlgli/node_modules/rrweb/es/rrweb/ext/tslib/tslib.es6.js:34 in next
node_modules/.pnpm/[email protected]_patch_hash=xzot57gbh2vywrm2w2dzrqlgli/node_modules/rrweb/es/rrweb/ext/tslib/tslib.es6.js:30 in Promise

We also saw this with [email protected]:

https://us-assets.i.posthog.com/static/recorder.js?v=1.128.1:1 in l
https://us-assets.i.posthog.com/static/recorder.js?v=1.128.1:1
node_modules/.pnpm/[email protected]_patch_hash=tvatazbysybcdte3poiroo42za/node_modules/rrweb/es/rrweb/ext/tslib/tslib.es6.js:34 in next
node_modules/.pnpm/[email protected]_patch_hash=tvatazbysybcdte3poiroo42za/node_modules/rrweb/es/rrweb/ext/tslib/tslib.es6.js:30 in Promise

It seems to happen to at least Safari and Chrome. If there's more data I can provide to help triage please let me know!

@pauldambra
Copy link
Member

@daibhin is this resolved in recent changes?

@daibhin
Copy link
Contributor

daibhin commented May 3, 2024

I don't think because we haven't applied any fixes to rrweb on the SDK since upgrading to alpha.13

I'm not sure I've seen that particular error before. It seems similar to rrweb-io/rrweb#1422 but difficult to tell without knowing what caused it to throw. @jmillxyz did the error lead to a particular line in the source code? Alternatively I'd be happy to jump in and debug if this was easily reproducible on your site

@jmillxyz
Copy link
Author

jmillxyz commented May 3, 2024

@daibhin it seems easily reproducible to me -- our site is mainshares.com.

On macOS 14.4.1, Safari 17.4.1 I see
Screenshot 2024-05-03 at 8 37 31 AM

On macOS 14.4.1, Chrome 124.0.6367.119 either I misspoke or since v1.130.1 the error is slightly different, I now see
Screenshot 2024-05-03 at 8 38 07 AM

@daibhin
Copy link
Contributor

daibhin commented May 3, 2024

Thanks for the context!

It looks like the open-source package we use to capture DOM mutations isn't catching a specific error thrown by createImageBitmap. I'm going to work with them to fix this: rrweb-io/rrweb#1469

For your specific case @jmillxyz - I noticed that there is a canvas element on your homepage but it doesn't seem to be rendered anywhere. Could it possibly be remove from the DOM? That would fix the exception for you

@jmillxyz
Copy link
Author

jmillxyz commented May 5, 2024

For your specific case @jmillxyz - I noticed that there is a canvas element on your homepage but it doesn't seem to be rendered anywhere. Could it possibly be remove from the DOM? That would fix the exception for you

Ah, this makes sense -- we use topbar.js to show a small loading indicator along the top of each page. It seems this creates a canvas element but it's then hidden when the page loads, so when going to inspect it, it's probably already been removed.

I tested removing topbar locally and no longer see the error. Do you have any suggestions on how to handle this situation? I can imagine it probably affects anyone else with this library.

@jmillxyz
Copy link
Author

jmillxyz commented May 9, 2024

Hi @daibhin, a bit more context -- our prod posthog project has the "Capture canvas elements" setting turned on.

My change to delete topbar.js in my dev environment was a red herring because the "Capture canvas elements" setting for our dev project was off, which I hadn't realized at the time.

For now I'm going to turn off this setting, as we don't have many canvas elements that need to be recorded. It seems like there is still some kind of underlying issue when canvas elements are removed, though

@aroman
Copy link

aroman commented May 17, 2024

chiming in here - our app uses canvases extensively (it's a game), and this issue creates a TON of noise in our logs. would love to see it fixed.

seemed like that might have been addressed here? rrweb-io/rrweb#1421

actually that issue must not have fixed it, since it was included in rrweb alpha 13, which is already used by posthog, and we still have the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants