Hi everyone! I want some feedback about a well-known problem.
Some Chrome extension breaks the Virtual DOM system and it causes infinite runtime errors. I recently found this is a very serious problem because Sentry notifies runtime errors every day (from the production app, of course).
Help wanted to gather information
Before suggesting fixes based on whatever, I think there is information to gather:
- Make a list of the browser extensions that are known to cause problems.
- Figure out how they are they modifying the
<body>exactly. Adding at top? Adding at bottom? Adding indiscriminately somewhere in the DOM?
- Sort the list of extensions by how they work.
- Figure out how many people use these extensions, so we can weigh the importance in practice. Maybe certain categories of problem only show up in weird ones, but one category is super common and reasonable to work around in virtual-dom.
From there, it will be much easier to find a fix that makes sense for the actual reality of the situation.
Can folks in this thread work on gathering this information and come back with the lessons?
I think the best answer would be done by this format. (Edit: The latest version is here)
|Grammarly (10,000,000+)||middle in
|ChromeVox (161,918)||top in
||load, focus on something||patch to output|
|Viber (133,220)||top, bottom in
||load||patch to output|
(!) The workaround is not fully tested. Use at your own risk.
Do you know any other popular extensions? Let’s add them too! (It is not necessary to strictly follow this format. Describe as you like.)
I also created a project to test the problematic cases.
This test covers various patterns of breaking DOM.
- How to break? (insert, remove, etc.)
- How to initialize the app? (
- Where in the Virtual DOM is dangerous to update? (child, next element, attribute, etc.)
After this problem is fixed, all the test cases should be green. Also, you can try some of the tests online. Turn on and off your extensions to see how results change.
Any feedback about this project will also be welcome.