Regression after upgrading vertical-collection to v.3.1.0: Failed to execute 'removeChild' on 'Node'

[johanrd]

After upgrading to [email protected], and indirectly @html-next/[email protected], the following error has popped up in Sentry from time to time Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.:

This seemingly is related to _updateVirtualComponents in vertical-collection, and makes glimmer.js fail hard (with a frozen app) – see downstream error: https://github.com/glimmerjs/glimmer-vm/issues/1401

The error is hard to reproduce, but when looking at the change log, PR https://github.com/html-next/vertical-collection/pull/358 (Delete virtual element) might have something to do with it?

Any ideas on how to avoid this, @mixonic and @Atrue ?

Thanks, See stack trace:

chunk.7517bb0a1711fc19bd5d.js:2 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at T (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:302419)
    at zt.deleteItem (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:351021)
    at zt.sync (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:350255)
    at zt.evaluate (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:349622)
    at Ft._execute (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:347903)
    at Ft.execute (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:347773)
    at Vt.rerender (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:351589)
    at ur.render (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:58397)
    at https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:61933
    at It (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:346077)
    at pr._renderRoots (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:61851)
    at pr._renderRootsTransaction (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:62211)
    at pr._revalidate (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:62679)
    at invoke (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:387307)
    at d.flush (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:386377)
    at p.flush (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:388157)
    at B._end (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:393242)
    at B.end (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:390333)
    at B._run (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:393756)
    at B.run (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:390877)
    at e.run (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:236863)
    at N._updateVirtualComponents (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:29059)
    at N.update (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:26180)
    at https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:26024
    at Array.<anonymous> (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:228131)
    at Object.flush (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:228395)
    at https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:228266
    at o (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:516550)
o @ chunk.7517bb0a1711fc19bd5d.js:2
requestAnimationFrame (async)
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
_flush @ chunk.7517bb0a1711fc19bd5d.js:2
schedule @ chunk.7517bb0a1711fc19bd5d.js:2
schedule @ chunk.7517bb0a1711fc19bd5d.js:2
scheduleUpdate @ chunk.7517bb0a1711fc19bd5d.js:2
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
(anonymous) @ index.js:1524
e.untrack @ validator.js:814
get @ index.js:1523
r @ index.js:1050
Pe @ index.js:2014
(anonymous) @ reference.js:222
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
(anonymous) @ index.js:4088
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
(anonymous) @ index.js:4088
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
(anonymous) @ reference.js:401
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
evaluate @ runtime.js:2599
_execute @ runtime.js:5231
execute @ runtime.js:5212
rerender @ runtime.js:5580
render @ index.js:5395
(anonymous) @ index.js:5713
It @ runtime.js:5020
_renderRoots @ index.js:5692
_renderRootsTransaction @ index.js:5745
_revalidate @ index.js:5786
invoke @ backburner.js:351
flush @ backburner.js:241
flush @ backburner.js:447
_end @ backburner.js:999
end @ backburner.js:729
_run @ backburner.js:1054
_join @ backburner.js:1028
join @ backburner.js:779
(anonymous) @ index.js:5503
_trigger @ backburner.js:1123
_end @ backburner.js:1018
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_ensureInstance @ backburner.js:1206
ensureInstance @ backburner.js:961
scheduleRevalidate @ index.js:3863
dirtyTag @ validator.js:453
k @ validator.js:556
N @ index.js:575
F @ index.js:618
ke @ index.js:2154
Se @ index.js:2120
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
o @ chunk.7517bb0a1711fc19bd5d.js:2

[Atrue]

Can you try the latest version of the vertical collection? There was a similar issue that was fixed after the 3.1.0 release. https://github.com/html-next/vertical-collection/pull/389

[johanrd]

@Atrue Ah, that is great news, thanks!

When scanning the release notes, I couldn't find it. I see now that it was part of v4.0.0 release. I suggest adding "Fix for detached Node element exception #389" to the v4.0.0 release notes.

I'd also suggest a patch release vertical-collecion: 3.1.1 which includes the fix of https://github.com/html-next/vertical-collection/pull/389 (e.g. for users of ember-table 4.0).

[johanrd]

Update: I was not able to create a meaningful PR for a v3.1.1 patch release (probably because there are no specific branch on the v3.1.0 tag). See https://github.com/html-next/vertical-collection/compare/v3.1.0...johanrd:vertical-collection:release-3.1.1 for a possible PR.

[IgnaceMaes]

Also experiencing this issue in ember-light-table v3.0.0-beta.1 which depends on "@html-next/vertical-collection": "^3.1.0". Having v3.1.1 released as patch would fix the issue.