Applicationinsights-js: Application insights causing protractor timeout

[Erikvdv]

Situation: I want to test an angular app with protractor.
When enabling application insights in an angular app protractor waitforangular times out.

I already tried to put the initiation of the script in an ngzone. However this is not resolving the issue.

Changing the setTimout into setInterval within the remote js might resolve the issue

[KamilSzostak]

Could you share a code snippet to demonstrate this issue?

[KamilSzostak]

Closing, please re-open if you're still experiencing this issue.

[ekumlin]

Just as a reference in case anyone else encounters this: Application Insights' batching in the background is what causes this issue. While it is queuing up, Protractor interprets this as Angular processing in the background. I'm guessing the default batch-send time is around 10 seconds, which would (with page load times) time out in Protractor's default 11-second window.

You can set Protactor's timeout to a longer period in protractor.conf.js (such as allScriptsTimeout: 30000), but this makes tests take a very long time.

I ended up using disableTelemetry: !!navigator.webdriver in the config blob to disable Application Insights from sending telemetry during tests. If you want your telemetry to still be available, you can instead do maxBatchInterval: navigator.webdriver ? 1000 : 10000 to send batches more frequently.

[umutesen]

I am having this issue with protractor and application insights. Disabling telemetry does not appear to solve the timeout issue. Any ideas?

[umutesen]

OK, the trick is to check whether the telemetry is disabled before loading app insights

 if (!this.appInsights.config.disableTelemetry) {
      this.appInsights.loadAppInsights();
    }

[jr01]

A solution is to make sure calls like setTimeout and setInterval within the Application Insights library execute outside of the Angular Zone.

Wihtout modifying this Application Insights library that requires a few things:

1. wrap each call to the library in zone.runOutsideAngular:

    this._ngZone.runOutsideAngular(() => {
        applicationInsights.trackEvent(...);
    });

1. make sure browser hooks/callbacks registered by the Application Insights library execute outside the Angular zone
   applicationInsights.loadAppInsights() patches xhr.open (in Ajax.ts) and subscribes to the onreadystatechanged event. The subscribers callback eventually calls setTimeout with a long timeout (in Sender.ts).
   When Angular does an http call it executes xhr.open from within the Angular zone causing the onreadystatechanged callback to also get executed from within the Angular zone. That leads to the zone being unstable and Protractor blocking until that setTimeout is executed.
   The hack/workaround is to patch xhr.open after applicationInsights.loadAppInsights() and make sure it always executes outside of the Angular zone:

       this._ngZone.runOutsideAngular(() => {
          applicationInsights.loadAppInsights();
        });

        const zone = this._ngZone;
        (function(xhr) {
          const open = xhr.open;
          xhr.open = function() {
            return zone.runOutsideAngular(() => open.apply(this, arguments));
          };
        })(XMLHttpRequest.prototype);