Does not record actions on dynamically added DOM nodes

[xbill82]

Hello, first of all, thanks for the great extension.

I'm using it on a Vuejs app that uses v-if directives, which implies the nodes are dynamically attached to the DOM whenever the condition becomes true.

It is the case for a modal dialog that appears after clicking a button. None of the actions being performed on the modal is recorded by the extension. The workaround I found is that, opening the modal before recording actually works, which implies the problem is related to the modal being attached to the DOM during the recording.

Another workaround is substituting the v-if with v-show, which breaks performance, since everything is in the DOM at page load.

Thanks for your help!

[tnolet]

@xbill82 thanks for reporting. This is totally an issue now. The listeners are inject at initial load.
So any elements introduced after that are not instrumented with a listener. I already bumped into that with the main Checkly app (also a Vue.js app).

I'm looking for a solution to make the listener injection dynamic, or add a top level listener that gobbles up all events regardless of whether they are ever to be used for Puppeteer script creation. Will keep this ticket open and report progress.

[EnixCoda]

Hi @tnolet
What about listening to all events when they are captured?

const eventRecorder = e => {/* ... */}
const eventTypes= ['click', /* ... more */]
eventTypes.forEach(type => window.addEventListener(type, eventRecorder, true)) // notice the 3rd argument `true`

[tnolet]

@EnixCoda this exactly the fix I was thinking about. Just need to find some time implement and test. 😀

[tnolet]

The solution proposed by @EnixCoda seems to work pretty good. Testing it now. Should be out in a new release pretty soon.