I get a continuous stream of javascript exceptions. I’ve seen this intermittently in the past, but someone reported to me that the Chrome extension Dark Reader, it happens every time.
schedule-from-videos.js:3799 Uncaught TypeError: Cannot read property 'childNodes' of undefined
at _VirtualDom_addDomNodesHelp (schedule-from-videos.js:3799)
at _VirtualDom_addDomNodesHelp (schedule-from-videos.js:3807)
at _VirtualDom_addDomNodesHelp (schedule-from-videos.js:3807)
at _VirtualDom_addDomNodesHelp (schedule-from-videos.js:3793)
at _VirtualDom_addDomNodesHelp (schedule-from-videos.js:3807)
at _VirtualDom_addDomNodes (schedule-from-videos.js:3723)
at _VirtualDom_applyPatches (schedule-from-videos.js:3830)
at schedule-from-videos.js:4120
at updateIfNeeded (schedule-from-videos.js:4150)
This error usually happens when some external JavaScript modifies DOM owned by Elm.
I think this is a general problem for VirtualDOM-based rendering frameworks. Based on the virtual DOM Elm assumes to find a particular DOM node in a given location. If that node has been deleted, moved, or even just wrapped in another node things blow up.
does someone have statistics about that? because we tend to get this error for around 1% of our users. I triple checked to rule out any dom modifactions we do, there are zero. So i assume its browser plugins or something similar
If someone has numbers to share here, that would be awesome.
Unfortunately, these errors must be considered as runtime errors, and 1% of runtime errors is a lot!
Maybe NoRedInk has some Sentry stats about this?
Even if Elm is not directly responsible, it is due to the association of DOM intrusive extensions and a weak point of VDOM implementations, and I wonder if there has been some research/experiments to improve the situation without impacting performance? How are popular react applications managing the issue?
At least being able to detect it would help warning users about their extensions. Would it be possible to catch the exception and warn the users about possible issues due to extensions?
The problem here is that Elm claims the whole <body>, in all other VDOM systems I’m aware of it is best practice that the library just inserts its own nodes into the root and manages only these - which of course has still problems when some other party messes with your nodes - see e.g. this issue on create-react-app. As suspected these kind of errors will show up for react as well - we get these at work from time to time but mostly from anti-virus software browser plugins messing with the DOM in some way. I guess you could find a hacky way to match the error message in a global catch-all handler but some browsers - which could it be? - dutifully localize the error messages so that doesn’t seem like a viable option. I’d wager using your stats and building a whitelist of plugins that are known to cause problems could be feasible but you’ll obviously never catch all of them ahead of time if you even can detect their presence in the first place.
I guess the Elm VDOM could be a bit more clever about these situations and try to repair the DOM - or make educated guesses for obvious situations like an additional <script> - as reflecting the DOM state back to the app is clearly not an option. I think Browser.application overtaking the DOM is not a good idea in real world situations, so maybe this could be worth an issue on elm/browser?
