Posthog import

[rahulkgupta]

Stil fails with posthog-js version 1.38.3

Steps to reproduce.

1. install deps: npm install
2. run locally npm start
3. run a scene
4. click share button

Converting circular structure to JSON
    --> starting at object with constructor 'd'
    |     property 'components' -> object with constructor 'Object'
    |     property 'rotation' -> object with constructor 'n'
    --- property 'el' closes the circle
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'd'
    |     property 'components' -> object with constructor 'Object'
    |     property 'rotation' -> object with constructor 'n'
    --- property 'el' closes the circle
    at JSON.stringify (<anonymous>)
    at oi (http://localhost:3333/dist/3dstreet-editor.js:74211:47066)
    at e.value (http://localhost:3333/dist/3dstreet-editor.js:74211:58702)
    at emit (http://localhost:3333/dist/3dstreet-editor.js:74211:56520)
    at ht (https://us-assets.i.posthog.com/static/recorder.js?v=1.138.3:16:4911)
    at le (https://us-assets.i.posthog.com/static/recorder.js?v=1.138.3:16:5274)
    at He.e.mutationCb (https://us-assets.i.posthog.com/static/recorder.js?v=1.138.3:1:45473)
    at e.emit (https://us-assets.i.posthog.com/static/recorder.js?v=1.138.3:1:36577)
    at e.processMutations (https://us-assets.i.posthog.com/static/recorder.js?v=1.138.3:1:33496)

fairly confident that the new posthog code is in place because i see the text "Circular" from the new version of posthog

[pauldambra]

just to check silly things first

at JSON.stringify (<anonymous>)
    at oi (http://localhost:3333/dist/3dstreet-editor.js:74211:47066)
    at e.value (http://localhost:3333/dist/3dstreet-editor.js:74211:58702)
    at emit (http://localhost:3333/dist/3dstreet-editor.js:74211:56520)

is this second emit in your code? could that be calling json stringify outside of posthog?
are you able to look in that minified code and see what is going on there?

[rahulkgupta]

fails on the following return JSON.stringify(e,(t=[],function(e,n){if(b(n)){for(;t.length>0&&t.at(-1)!==this;)t.pop();return t.includes(n)?"[Circular]":(t.push(n),n)}return n})).length; which seems like the changed posthog code

[pauldambra]

Are you able to check the structure that's failing? I've clearly made some bad assumption in testing this but we just lifted the function from MDN so I'm wondering if I'm fixing the wrong thing here 🤔

[rahulkgupta]

#563 (comment) hopefully this helps

[vincentfretin]

@pauldambra if that helps, in aframe, the cameraRig a-entity is a web component so that's a DOM element, it has an object3D property that is a threejs object and on it you have the el property that is a reference to the DOM element. From what I could log when the JSON.stringify(event) happens when clicking on the Share button, the cameraRig.setAttribute('cursor-teleport', ...) happens during the click event to take a screenshot of the scene so in the event you have a reference to an aframe entity that produces the circular issue.

[rahulkgupta]

bumping this @pauldambra

[pauldambra]

hey 👋 even if I write a test with a deeply nested structure this no longer explodes for me...

but ofc you all know your application better than me... you're welcome to open a PR with a test in it or propose a really explicit structure here for me to copy

I'm super happy to fix this but a little stuck on what's happening 🙈

(i'm out for a day or so, so spotty responses sorry!)

[pauldambra]

(ah, maybe I do have a test case 🤯 -> watch this space)

[pauldambra]

Ah, no... I think it was Jest struggling with the circular object not the size estimation 🫠

You can see added tests here https://github.com/PostHog/posthog-js/pull/1243/files#diff-a35fe723a882157b269b98f82f6c4bd7244a6989ff4c5b5796e3d2529b5fe15aR46

[vincentfretin]

Ok I'll try to produce a test case that fails, maybe Friday or next week.
It just got the test environment working for now:

git clone [email protected]:PostHog/posthog-js.git
cd posthog-js
git checkout chore/really-really-test-circular-refs
pnpm install
pnpm test:unit
#or just this test:
./node_modules/.bin/jest src/__tests__/extensions/replay/utils/estimate-size.test.ts

[rahulkgupta]

Since this is only happening on share, is there a way to avoid passing such an object on our end?

[pauldambra]

If you can add ph-no-capture class to which ever element is causing the problem then I think it'll be dropped before it gets to this code.

It wouldn't be in the recording but it should avoid the error

(very much thinking out loud 🙈)

[vincentfretin]

indeed putting the ph-no-capture class on cameraRig entity fixed the issue

[vincentfretin]

Should we use the integration with npm or from the index.html? I guess in index.html it's always using the latest version so that may be better?