Error caused by patched XMLHttpRequest

[devoto13]

We're using Angular with Zone.js 0.7.7 in the WebView in our mobile application. The problem is that quite often we get following error:

Error: macroTask 'XMLHttpRequest.send': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'.

Real application is complex, but we managed to come up with a minimal reproduction. Basically it's mobile application, which does following sequence of actions in the infinite loop with 1s delay:

1. Native code calls function in the WebView using stringByEvaluatingJavaScript function.
2. This function sends HTTP request using XMLHttpRequest.

Once I scroll page up/down for 2-3 seconds, mentioned error occurs.

• Error doesn't happen, when there is no scrolling done. So it seems to be related to some events happening in browser.
• Error doesn't happen if we call function using setInterval() inside WebView instead of calling from native code. So it seems to be related to how WebView executes code from outside.
• Error doesn't happen, when I add small synchronous computation in the ZoneTask._transitionTo() (O.o). Tried to log unique IDs for every task using approach described here. See commented code. This one looks like a complete magic to me.

I understand that this is still pretty complex reproduction, but I have no idea how to reduce it further. Do you have any ideas why it can happen and how can I debug it further? I can also provide any extra details if needed.

Project can be found here. To reproduce you need to open project with XCode, run it on device, connect with Safari remote debugging and scroll up/down for 2-3 seconds. Error is usually reproducible after couple of seconds of scrolling.

[JiaLiPassion]

@devoto13 , thank you for posting the issue and the steps to reproduce.
I just debug it, find out sometimes the XMLHttpRequest.onreadystatechange will be fired multiple times with readyState=4.
Even I remove zone.js, and just add a simple event listener

xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr['ok']) {
                            console.log('error duplicate done');
                        }
                        xhr['ok'] = true;
                    }
                }

it can still be reproduced.

So I made a PR to add check to prevent that in zone.js. And I test it with your repo, the error is gone.

[devoto13]

Thank you @JiaLiPassion for a quick fix! I tried Zone.js with your fix in the test application and it seems to work well. I'll try it in the real application as well on Monday and will get back.

Do you think we should report this issue with onreadystatechange being called multiple times to the WebKit/Safari developers as well?

[JiaLiPassion]

@devoto13, it seems that the issue has already been reported, but their cases are hard to reproduce, your case is very easy to reproduce, so I think it will be helpful to report your case to them:)

[devoto13]

Okey, thanks! Will take care about it next week as well.

[AngelCastilloB]

Hi, I have a very similar error with 7.7 and higher. I have an Angular2 app connected to a meteor server, and if I update my zone.js version from 7.2 to 7.7 I get the following error everytime I close the browser with the application loaded:

W20170315-23:04:09.224(8)? (STDERR)
W20170315-23:04:09.226(8)? (STDERR) E:\web\meteor\biglup-ecommerce\apps\store\node_modules\zone.js\dist\zone-node.js:169
W20170315-23:04:09.227(8)? (STDERR) throw error;
W20170315-23:04:09.227(8)? (STDERR) ^
W20170315-23:04:09.229(8)? (STDERR) Error: eventTask 'Socket.addListener:end': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'.
W20170315-23:04:09.229(8)? (STDERR) at new Error (native)
W20170315-23:04:09.230(8)? (STDERR) at ZoneTask._transitionTo (E:\web\meteor\biglup-ecommerce\apps\store\node_modules\zone.js\dist\zone-node.js:495:23) []
W20170315-23:04:09.230(8)? (STDERR) at Zone.runTask (E:\web\meteor\biglup-ecommerce\apps\store\node_modules\zone.js\dist\zone-node.js:155:34) []
W20170315-23:04:09.231(8)? (STDERR) at emitNone (events.js:72:20) []
W20170315-23:04:09.232(8)? (STDERR) at Socket.emit (events.js:166:7) []
W20170315-23:04:09.232(8)? (STDERR) at endReadableNT (_stream_readable.js:923:12) []
W20170315-23:04:09.232(8)? (STDERR) at nextTickCallbackWith2Args (node.js:458:9) []
W20170315-23:04:09.233(8)? (STDERR) at process._tickDomainCallback (node.js:413:17) []

This crash the server (with said error). I dont have any issue with version 7.2, havent tried any intermediate versions, but definetly have the issue with 0.7.7., 0.7.8, 0.8.0 and 0.8.1.

[JiaLiPassion]

@AngelCastilloB , can you provide a reproduce repo? thank you.
it seems that Socket has been cancelled (closed maybe) .

[AngelCastilloB]

@JiaLiPassion The application is very complex, I will try to figure out how to create a simple app that reproduce it.

[JiaLiPassion]

@AngelCastilloB , sure , thank you!

[langfors]

@AngelCastilloB - have you been able to get past this? I am having the same issue. Unfortunately I cannot use zone 0.7.2.

[klaascuvelier]

We have a similar issue like @devoto13 described in his opening post, but the reason is not the same.
We're using zone.js@0.8.5 (so the patch is in there). After some debugging I found out the issue is caused by New Relic's NREUM library (https://docs.newrelic.com/docs/browser/new-relic-browser/getting-started/introduction-new-relic-browser).
I assume both zone.js and NREUM try to patch the XMLHttpRequest object and somehow conflict.

It's not causing our app to fail, but it throws tons of errors.
I reached out to New Relic for the un-minified code of their NREUM library to see if I can investigate it a little more and find a possible solution.

[klaascuvelier]

Looks like this issue has been resolved in zone.js@0.8.11

[karangarg45]

@klaascuvelier i am getting the same issue while using new relic browser library .so only solution is to update the zone js library to 0.8.11?

[JiaLiPassion]

@karangarg45 , yes , please update to newest zone.js.

[klaascuvelier]

Yeah @karangarg45 updating will fix it.
I can't exactly say which version fixed it, but 0.8.11 did work for us.

[interist32]

Still have this issue: Error: macroTask 'requestAnimationFrame': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'. (0.8.12) but only in Firefox (54.0.1).

[JiaLiPassion]

@interist32 , could you post a reproduce repo?

[interist32]

@JiaLiPassion, Sorry, seems it's application specific issue. I'll try to reproduce it in isolation and will post here if it will happen again.

[ido-ran]

I am also seen macroTask 'requestAnimationFrame': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'. It does not happen very consistently but it does happen pretty regularly.
For us it happens only on FireFox browsers.

[JiaLiPassion]

@ido-ran , could you post a reproduce repo?

[ido-ran]

@JiaLiPassion Unfortuenly we do not have a minimum repro for this issue, it happens as part of a large closed-source application.

Will it help if we'll be able to provide you access to the running application, compiled with debug so you can observe the issue live?

[JiaLiPassion]

@ido-ran , sure, that will help a lot! thank you.

[ido-ran]

OK, I'm working on it, will update soon (I hope 😄)

[ido-ran]

Thank you @JiaLiPassion for the help.

We've manage to work around this issue by using downgradeModule as explained in Angular NgUpgrade With DowngradeModule.

[JiaLiPassion]

Thank you for sharing the information, I don't know that, usign different `zone` will resolve such kind of issue.

…

On Tue, Dec 12, 2017 at 4:22 PM, Ido Ran ***@***.***> wrote: Thank you @JiaLiPassion <https://github.com/jialipassion> for the help. We've manage to work around this issue by using downgradeModule as explained in Angular NgUpgrade With DowngradeModule <http://www.syntaxsuccess.com/viewarticle/angular-ngupgrade-with-downgrademodule> . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#657 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABYDDww0BRfHlmFzaWuIQFWJkwOQhKkIks5s_inLgaJpZM4MRhAS> .

[vladanPro]

Thank you for direction but i have error and using Angular 5.2. I did not understand the best solution. I don't have previous version of application which is worked with AngularJS. We make application from start for Angular 2 and update it, but still have this issue:
Error: macroTask 'requestAnimationFrame': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'. ("zone.js": "^0.8.20") but only in Firefox (58.0.2).

[JiaLiPassion]

@vladanPro , could you post a reproduce repo?

[vladanPro]

No, repo is private. Sry, this is obvious specific case.

[JiaLiPassion]

@vladanPro , if you can create a small reproduce repo, I can help to debug.

[vladanPro]

ok thank you i will try.

[santialbo]

I got this same error @JiaLiPassion
I've been able to pinpoint that this happens after a change introduced in video.js between 6.4.0 and 6.5.0. I believe it's this exact commit videojs/video.js@acc641a

Here's a plnkr. It happens when you play the video.

[JiaLiPassion]

@santialbo , I can't reproduce with your plunker, which browser you are using.

[Chocobozzz]

@JiaLiPassion I can reproduce with the plunker of @santialbo with Firefox 58. We have the same issue with our Angular project: https://peertube.cpy.re/videos/watch/e2651856-4809-408a-99d4-b85b01fefb09

[santialbo]

@JiaLiPassion Sorry, apparently this only occurs on Firefox

[JiaLiPassion]

@santialbo , thank you , I will try to debug it, could you make a repo so I can debug locally?

[santialbo]

@JiaLiPassion here you have it https://github.com/santialbo/video-js-test

[JiaLiPassion]

@santialbo ,thanks for the repo, it seems is a bug or special behavior of requestAnimationFrame in Firefox.

even call cancelAnimationFrame, the callback will still be invoked, so the error occurs.

current walk around is add following flag in polyfill.ts before loading zone.js

(window as any).__Zone_disable_requestAnimationFrame = true;
import 'zone.js/dist/zone'; // Included with Angular CLI.

[herkulano]

@JiaLiPassion I'm also getting a similar error using Cypress cy.type('something) command on a form. In my case, your workaround doesn't work.

macroTask 'setTimeout': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'.

[JiaLiPassion]

@herkulano, please provide a reproduce repo, thanks.

[herkulano]

@JiaLiPassion I've fixed it by moving the Cypress command to another test. I'm guessing the problem was not zone or angular related. Sorry for that.

[JiaLiPassion]

@herkulano , you are welcome, but if you could provide a reproduce sample about the error, I am very curious why the cypress can cause zone.js throw such an error. thank you.

[SerkanSipahi]

@herkulano I can reproduce it (in my case i have to subscribe events from the AppComponent/Root-Element because it runs in an chrome extension)

Error Messge: Test Uncaught Error: macroTask 'setInterval': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'

The error occurs when im trying to get events by fromEvent from the AppComponent (root component) but the error will not appear when subscribing child elements of AppComponent (root component).

Reproduce:

@Component({
  selector: 'app-root',
  styles: [`
    :host {
      display: block;
      height: 100px;
      width: 300px;
    }
  `],
  template: `
    <div class='some-class'>some content</div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
  constructor(@Host() @Self() public host: ElementRef) {}

  ngOnInit() {
    let hostElement = this.host.nativeElement;
    
    // This leads to the described error:
    let mousemove$ = fromEvent(hostElement, 'mousemove');
    mousemove$.subscribe(e => console.log('hostElement mousemove$', e));
    
    // This works fine:
    let childElement = this.host.nativeElement.querySelector('.some-class');
    let mousemove$ = fromEvent(childElement, 'mousemove');
    mousemove$.subscribe(e => console.log('childElement mousemove$', e));

  }
}

Its seems that zone.js and subscribing event on root-element are not good friends :)

Angular CLI: 6.1.5
Node: 9.3.0
OS: darwin x64
Angular: 6.1.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cdk                      6.4.7
@angular/cli                      6.1.5
@angular/flex-layout              6.0.0-beta.18
@angular/material                 6.4.7
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.3.2
typescript                        2.9.2
webpack                           4.9.2
zone.js                           0.8.26

[JiaLiPassion]

@SerkanSipahi, thanks, could you provide me a reproduce repo? I can not reproduce with your sample.