EUM stops logging virtual pages when we upgraded the angular ui-router

[CommunityUser]

Hi,

We have being using the virtual pages logging in the end user monitoring to give us very valuable information about our end users.

Recently we upgraded the angular ui-router from 0.4.2 to 1.0.6 and this has stopped virtual pages data from being recorded. From what I understand version 1.0 was a big change to the routing.

The company that I work for is using AppDynamics Version 4.3.5.7 and we are running on the Sass application that AppDynamics provides. I was wondering is there any plans to support the latest version of angular ui-router.

Any help with be greatly appreciated.

John.

[Mohammed_Rayan]

John,

is it possible for you to capture a HAR and share it here.

https://docs.appdynamics.com/display/PRO42/Create+a+HAR+file

Can you also let us know your SAAS Controller URL

Regards,

Mohammed Rayan

[CommunityUser]

Thank you for responding to my question Mohammed.

This is our test controller:[Redacted]

I have attached the har file and I see my session in AppDynamics but no virtual pages are logged.

In the chrome developer tools I can see the adrum request is only sent once when the base page is loaded + it is not sent when I start navigating to the different pages. It used to capture these virtual pages and would send adrum requests for each page.

^ Post edited by @Ryan.Paredez to remove Controller URL. Please do not share your Controller URL on Community posts for Privacy and Security reasons.

[Gaurav_Soni]

Hi,

Can you tell more about this application, like, how and when the angular is loaded? I do not see it getting loaded in the HAR file. 

You need to make sure the adrum.js is loaded after the angular us bootstrapped. 

Regards,

Gaurav Soni

[CommunityUser]

I have redone the capture of the Har file. My first attempt starting recording after the application was loaded.

Angular is loaded the first time the base page is loaded. I will ask the web developer for more details on this tommorrow.

Hopefully my second attempt has more useful information. See attachment.

I talked to a web developer in my company last week and he said the Angular ui-router did a major change to the routing in version 1.0.X.

He said the hooks into stateChange events from ui-router are not there for v > 1.0.0 I think. After we upgraded this package then it stopped logging virtual pages.

https://docs.appdynamics.com/display/PRO43/Single+Page+Applications+in+Browser+RUM+-+AngularJS

[CommunityUser]

Angular is loaded from a base page via the below html attribute in our application.

Snippet

@{
    ViewBag.Title = Views.IndexPageTitle();
    ViewBag.HtmlAttributtes = "data-ng-app=app data-ng-csp data-ng-strict-di=true";
 
}

[Gaurav_Soni]

HI John,

Can you regenerate and attach the HAR file with Content? The HAR you attach does not have response body.

REgards,

Gaurav Soni

[CommunityUser]

Hi Gaurav,

I have attached a new har capture file with content and hopefully third time is a charm.

If you still do not see the content for the request then tell me which request you are looking at and I can make sure it returns a response body. Some of the requests do not return return a response body.

Thanks John.

[Gaurav_Soni]

HI John,

The HAR is fine this time. I see the adrum.js is being loaded very early(before angular). PLease go through this document, this suggests couple of solution which will avoid the race conditions which could be the root cause.

https://docs.appdynamics.com/pages/viewpage.action?pageId=42576688

Regards,

Gaurav Soni

[CommunityUser]

Hi Gaurav,

We have fixed the race condition in our application now but virtual pages are still not being logged in AppDynamics.
I have attached a new har file.
We now Bootstrap Angular using the manual recommended way.
This is the sequence of requests doing from our base html page:
(1) Angular is loaded from the bundles library: https://empman1.acc.test.visma.net/empman/bundles/libs
(2) Adrum-latest.js is loaded from: https://cdn.appdynamics.com/adrum/adrum-latest.js
(3) Angular is bootstrapped at the end of the html body using: angular.bootstrap(document, ['app']);

I see it is doing a post request to log the base page in AppDynamics but it does not do any other post requests to AppDynamics for the virtual pages.
Do you have any other suggestions that we can try?

Regards John.

[Gaurav_Soni]

Hi John,

Can you try the 'Manually Initializing the JavaScript Agent (Optional)' way from the doc that will ensure the js agent initializes after the angular bootstrap? if this does not work we can join a WebEx call tomorrow or on Monday to troubleshoot further.

Regards,

Gaurav Soni

[CommunityUser]

Hi Gaurav,

Sorry for my late reply. I was on holidays for the last month so I only got back to working on this problem this week.

We tried to Bootstrap Angular using the 'Manually Initializing the JavaScript Agent (Optional)' method but that did not fix the virtual page logging problem.

 
I got a web developer to create a polyfill with the stateChange events that are missing from the 1.0.x release of the angular ui-router (angular-ui-router.js). So he added the "stateEvents.min.js" to our javascript application bundles library and now the virtual page logging is working again for us.

These hooks into the stateChange events are used by AppDynamics to capture virtual pages and these events are missing from the latest release of the angular ui-router.

Regards John.