Primeng: DataTable Race Condition Crash in Chrome 62 (#4233 did not fix)

[starlightknight]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

A race condition causes the following issue when column toggling in Chrome 62. This issue was previously reported in #4233, but the referenced commit 3b84cf7 that it was closed with did not actually fix the problem.

@cagataycivici mentioned being unable to reproduce, so I have attached a minimal test project to reproduce the issue.

Test System:

Linux Mint 18.2
Chrome Version 62.0.3202.62 (Official Build) (64-bit)

ERROR TypeError: Cannot read property 'remove' of undefined
    at _DuplicateMap.webpackJsonp.../../../core/@angular/core.es5.js._DuplicateMap.remove (core.es5.js:7490)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._unlink (core.es5.js:7187)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._remove (core.es5.js:7178)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._mismatch (core.es5.js:6964)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.check (core.es5.js:6859)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.diff (core.es5.js:6830)
    at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngDoCheck (common.es5.js:1691)
    at checkAndUpdateDirectiveInline (core.es5.js:10837)
    at checkAndUpdateNodeInline (core.es5.js:12330)
    at checkAndUpdateNode (core.es5.js:12269)
    at debugCheckAndUpdateNode (core.es5.js:13130)
    at debugCheckDirectivesFn (core.es5.js:13071)
    at Object.eval [as updateDirectives] (AppComponent.html:12)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)
    at checkAndUpdateView (core.es5.js:12236)
View_AppComponent_0 @ AppComponent.html:11
proxyClass @ compiler.es5.js:14972
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13396
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4812
(anonymous) @ core.es5.js:4683
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:365
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:364
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:125
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.run @ core.es5.js:3821
next @ core.es5.js:4683
schedulerFn @ core.es5.js:3635
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
checkStable @ core.es5.js:3855
onLeave @ core.es5.js:3934
onInvokeTask @ core.es5.js:3884
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:397
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:165
ZoneTask.invoke @ zone.js:460
AppComponent.html:11 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 32, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_0 @ AppComponent.html:11
proxyClass @ compiler.es5.js:14972
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13396
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4812
(anonymous) @ core.es5.js:4683
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:365
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:364
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:125
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.run @ core.es5.js:3821
next @ core.es5.js:4683
schedulerFn @ core.es5.js:3635
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
checkStable @ core.es5.js:3855
onLeave @ core.es5.js:3934
onInvokeTask @ core.es5.js:3884
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:397
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:165
ZoneTask.invoke @ zone.js:460
AppComponent.html:11 ERROR TypeError: Cannot read property 'remove' of undefined
    at _DuplicateMap.webpackJsonp.../../../core/@angular/core.es5.js._DuplicateMap.remove (core.es5.js:7490)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._unlink (core.es5.js:7187)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._remove (core.es5.js:7178)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._mismatch (core.es5.js:6964)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.check (core.es5.js:6859)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.diff (core.es5.js:6830)
    at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngDoCheck (common.es5.js:1691)
    at checkAndUpdateDirectiveInline (core.es5.js:10837)
    at checkAndUpdateNodeInline (core.es5.js:12330)
    at checkAndUpdateNode (core.es5.js:12269)
    at debugCheckAndUpdateNode (core.es5.js:13130)
    at debugCheckDirectivesFn (core.es5.js:13071)
    at Object.eval [as updateDirectives] (AppComponent.html:12)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)
    at checkAndUpdateView (core.es5.js:12236)

Expected behavior
Chrome 62 should work with all Datatable features.

Minimal reproduction of the problem with instructions

Attached sample barebones angular-cli project.
chrome62demo.zip

1) Unzip and run "npm install && ng serve".
2) Browse to localhost:4200
3) The issue in Chrome seems to be a race condition in Chrome 62. This does not appear in earlier versions of Chrome. I also do not observe it in Firefox. To reproduce the problem, open the javascript console so that you'll be able to see the issue occur, and then rapid spam checking/unchecking the column toggles (alternate which one(s) you're checking if you have difficulty reproducing).

Within a few tries on Chrome 62, you should see it crashing with the above stacktrace in the console. It takes a few tries to reproduce in the demo because of lack of latency due to other events going on (which you'll build up by spamming), but in a larger application with real network latency and other ongoing events within the application, it will happen 100% of the time even with a single click. The same issue does not happen in Firefox or Chrome 61.

What is the motivation / use case for changing the behavior?

The data table widget is currently unusable in a real environment with network latency in Chrome 62 with Lazy/Multi-Select/Column Toggle combo. Chrome is of course a very popular browser that automatically updates on Windows, which is most people's primary OS, meaning they now have the broken version.

Please tell us about your environment:
Linux Mint 18.2 / Chrome 62.
Happens with or without AoT, but I use AoT in prod.

• Angular version: 2.0.X
  4.3.1, but still happens in latest.

• PrimeNG version: 2.0.X
  4.1.3, but still happens in 4.3.0-rc.2

• Browser:
  Chrome 62

• Language:
  Typescript 2.4

• Node (for AoT issues): node --version =
  Node v7.10.1

[Borzenko]

same for me

[Yonet]

+1

[akankshaavhad]

+1

[starlightknight]

No change in this issue with Angular 5.0 final (tried out of curiosity)

I also opened a Chrome bug report upstream:
https://bugs.chromium.org/p/chromium/issues/detail?id=781218

[JulienKyu]

+1

[ixtryl]

+1
Chrome 62, Windows 10

[MikhailSP]

+1
Chrome 62.0.3202.89 64bit, Windows 10.

[starlightknight]

Chrome devs have confirmed this as part of a regression in Chrome in my upstream bug report. The last known good build from their bisect was 62.0.3192.0, with it being broken in 62.0.3193.0 and later.

It has been assigned for resolution upstream - see my above upstream bug report if you're interested in tracking this. I'll leave this open until its fixed.

[ova2]

+1

I can always reproduce this bug here https://www.primefaces.org/primeng/#/datatable/coltoggler Simple click some times on items in the dropdown (displayed table columns).

[nikhilgoud]

+1
Chrome Version 62.0.3202.89 (Win10) (64-bit),
Any workaround available?

[starlightknight]

I encourage anyone +1'ing the issue to voice themselves in the upstream bug report above. It has the active attention of some of the Chrome developers, but I don't think they necessarily realize the severity of the issue for those of us who are impacted. They are talking about punting it to Chrome 63 instead of the next stable patch cycle for 62.

[gsathya]

I completely understand the severity of the issue and we are actively working on fixing this (This is a P1 bug). There's a lot of complexity involved in tracking this down as it touches different subsystems requiring co-ordination between different teams across time zones. I apologize for the current state of things. I will advocate for the fix to be merged in the stable patch cycle for 62 (but ultimately the decision is down to the chrome release managers).

[starlightknight]

@cagataycivici The Chrome Devs said the following upstream:

"You can certainly mitigate this in JS until the fix is out. The offending function is equalsByValue in vendor.XXX.js. It temporarily adds a "_$visited" property to the incoming object, and deletes it after finishing.

Deleting properties is a very costly operation in V8 and should be avoided if possible. A simple fix would be set _$visited to true/false and never delete _$visited. This should also have a positive performance side-effect."

It seems this that this is related to #1937

Chrome is unable to commit to a fix in the Chrome 62 cycle, meaning that without a workaround implemented, this library will remain broken in Chrome until Chrome 63.

[0crypto0]

any news about a possible fix?

[Yonet]

@0crypto0

Using dataKey seems to fix it, yet from documentation I get it as it's supposed to be used for performance, shouldn't be a requirement.

from https://github.com/primefaces/primeng/issues/1937

[0crypto0]

Hi can you please show an example of how to use datakey.
And maybe update the example at your site.

Thank you

בתאריך יום ו׳, 17 בנוב׳ 2017, 17:04, מאת Yönet ‏[e-mail]:

@0crypto0 https://github.com/0crypto0

Using dataKey seems to fix it, yet from documentation I get it as it's
supposed to be used for performance, shouldn't be a requirement.

from #1937 https://github.com/primefaces/primeng/issues/1937

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/4306#issuecomment-345267680,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AO-q6TFfJRcUlPl2em5m6jcbmvE1JGI-ks5s3aBMgaJpZM4QKnX5
.

[0crypto0]

i used dataKey on the multiselect, now it's working but when i unselect a column on the multiselect it is still highlighted,do you know how i solve this?

[skormel]

+1

[jonbarthol]

Thank you, @starlightknight. Chrome has fixed this in build 63.0.3239.59, which is available in Beta. I just downloaded the Beta version and am no longer seeing the error.

[riscie]

Seems like it landed in the stable build now. I am on Version 63.0.3239.84 (official) and don't see the error anymore.

[MikhailSP]

The issue is fixed for me as well on the latest chrome version: 63.0.3239.84 (official, 64 bit) on Windows 10.
Thank you very much @starlightknight for getting in contact with Chrome devs about this issue.

[starlightknight]

Closing since its confirmed Chrome 63 stable resolves this issue

[Helayxa]

With Chrome 63, I have, sometimes, a $visited attribute in my objects when I use Dropdown or Multiselect...