JsDiff.diffWords in Rollback freezes browser

After a deploy we somehow accidentally messed up our homepage. When trying to rollback to the last working version, the browser kept freezing up.

After diving into the code, I noticed that the point where the code started to hang was when it tried to call JsDiff.diffWords(property.value, oldProperty.value), obviously used to display the changes between the two version.

However, we have one very big Grid on this page, resulting in an oldProperty.value size of 2.3MB! JsDiff.diffWords cannot handle this size and will freeze up (especially considering the property.value at this point in time was near-empty, so the percentage of difference was insane).

Eventually, I managed to skip the diffing by replacing the function with a stub in the console: JsDiff.diffWords=function(a, b, c) { return undefined; }; and could successfully rollback the page.

I think there needs to be some sort of fail-safe in the whole diffing process. Either by truncating the data if it goes over a certain limit, or skipping it all together with a nice message why.

EDIT: Upon investigating, the Grid itself was not so big. It’s all the stuff around it that virtually inflates the property value. The Grid itself contains like 10 sections and maybe 30 grid components in total. The actual property blows up in size because it’s constantly repeating all the grid components in $allowedEditors (and we have a lot of them) and the full editor inside each placed grid component (and our grid components have a lot of configuration).

So besides JsDiff.diffWords needing a fail-safe, the value-format stored by the Grid datatype is HIGHLY inefficient, so that might be an issue all on its own.

[nul800sebastiaan]

Using diffJson seems to take us a long way, it immediately alleviates all the stuff we store as JSON. I’ve made a PR here to evaluate, please try it out and let us know how it goes! https://github.com/umbraco/Umbraco-CMS/pull/9381

[lars-erik]

#9381 makes a diff take 20 seconds where it previously froze the browser for 30+ min.
I say merge! 🎉❤

(should say send instead of request, but it’s the highest!)