InvalidStateError: Invalid resize dimensions

[jmillxyz]

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]

@daibhin is this resolved in recent changes?

[daibhin]

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 https://github.com/rrweb-io/rrweb/pull/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]

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

On macOS 14.4.1, Safari 17.4.1 I see

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

[daibhin]

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: https://github.com/rrweb-io/rrweb/pull/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]

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]

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]

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? https://github.com/rrweb-io/rrweb/issues/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