Jam.dev Iframe Issue

[rllngg]

So i start using htmx and now we are in testing phase we use jam.dev as our screenshot and video capturer

and i receive issue that our app is crashing / not responding after debuging for 4 hours i notice that the htmx try to clean up the iframe that jam.dev is inserting it got stuck on the while loop (im not sure why?) maybe because iframe cannot be deleted

this function below is causing the crash because the while loop

function swapInnerHTML(target, fragment, settleInfo) {
        const firstChild = target.firstChild
        insertNodesBefore(target, firstChild, fragment, settleInfo)
        if (firstChild) {
            while (firstChild.nextSibling) {
                // .detect if it #jam-iframe skip
                if (firstChild.nextSibling.id === 'jam-iframe') {
                    break
                }
                cleanUpElement(firstChild.nextSibling)
                target.removeChild(firstChild.nextSibling)
            }
            cleanUpElement(firstChild)
            target.removeChild(firstChild)
        }
    }

currently implement this to fix this temporarily

[MichaelWest22]

function swapInnerHTML(target, fragment, settleInfo) {
        const firstChild = target.firstChild
        insertNodesBefore(target, firstChild, fragment, settleInfo)
        if (firstChild) {
            while (firstChild.nextSibling) {
                // .detect if it #jam-iframe skip
                if (firstChild.nextSibling.id === 'jam-iframe') {
                    debugger
                    break
                }
                cleanUpElement(firstChild.nextSibling)
                target.removeChild(firstChild.nextSibling)
            }
            cleanUpElement(firstChild)
            target.removeChild(firstChild)
        }
    }

Are you able to add a breakpoint at this break point or add a debuger line like above and then using the dev tools you should be able to stop right when it finds the jam-iframe. then you can go to console and manually paste the line

 target.removeChild(firstChild.nextSibling)

and it should remove the iframe. would be good to test this manually in the console and find if there is some console error about being unable to remove the sibling. you can check if the iframe is getting removed as expected here or not and if the nextSibling variable is getting updated to the next item after the item is removed.

One idea to handle this situation better could be to move to using the htmx idiomorph extension to morph instead of swapping with innerHTML via normal htmx swapping. with morphing node state can be preserved often and it may avoid your issue. there is also the option in the idiomorph to add a custom beforeNodeRemoved hook that checks if the node is a jam iframe type and returns false which prevents this node being removed and it will persist just this node between swaps which may allow your jam.dev recording to magically persist in the DOM and keep working

[MichaelWest22]

Another option to work around you issue is to make sure you locate the jam.dev iframe outside of the main content section of your applicaion. If you have a main div you can use https://htmx.org/attributes/hx-history-elt/ hx-history-elt to set this div as the element that gets replaced during history back forward navigation and you can also make sure you use hx-target to target this same div for any full page swaps (may need to also do hx-select for the same main div id as well if you want to return full page responses from your server)

If you do this the outer shell of the page where the iframe is will never be swapped and always keep working and you can locate any constant scripts or elements in this stable area. There is an example of a htmx extension in #3243 that supports this setup well if you want to use hx-boost as well.