Re initialize AppDynamics on the page after a ajax request

[mahmood.yousaf]

Hi All,

I am currently working on trying to get End User Monitoring enabled on a GuideWire ClaimCenter. This application is a SPA built in Gosu(a subset of Java).

This application works in a rather strange way. First, the page is rendered to the screen and it consits of two iFrames and a few scripts. Then an Ajax call is made to the Application which creates a Model for the whole page and all the elements. This Model is sent back to the page via Ajax to some Javascript objects. These Javascript objects/ functions then create up the rest of the HTML that is needed for the page from the Model which was just passed to it. 

Now what i want to try and do is add some custom data to be sent to AppD which contains some information which i need to take from the page after it has been completely rendered, i.e 

The first call to request the Model object needs to have been completed,
The Javascript objects/functions need to render the rest of the page based on the Model that it has just received. 

I have tried adding the addCustomData script blocks that allow AppD to capture extra user-defined information but it is getting called too early.

This is what is happening.

1. The first empty page with iFrames is rendered.

2. AppD initializes itself now.
3. Now the calls to addCustomData are executed.

4. Now the other ajax call is made and the rest of page is built.

My question is, is there a way to force AppD to re-initialize after the page has been completely rendered?
Or is there a way to retrigger the addCustomData calls after the rest of the page has been rendered?

any help with be greatly appreciated. 

[Gaurav.Soni]

HI Mahmood,

If you are using JS agent version 4.3.+ then it gives a way to attach the user data to AJAX calls originating after the onLoad() event.

See this for example:

https://docs.appdynamics.com/display/PRO43/Add+Custom+User+Data+to+a+Page+Browser+Snapshot

I am attaching a very basic page to show how we can attach user data to ajax event after onLoad(). See attachment.

This might not be the exact situation but it should give a hint.

Let me know if that help

Regards,

Gaurav Soni

[mahmood.yousaf]

Hi Gaurav,

I did try to implement the code from the example that you sent to me however it didnt work.

If you have a look at the page there are two different examples. In on example there are double quotes around the PageVIew object below, and in the other example there are no quotes around it 

Example 1

 PageView: function(context) {

                    ...

                }

Example 2

 "PageView": function(context) {

I have tried both ways of doing this, i.e. with and without quotes but i get the same error.

The error is Uncaugth Syntax error : Unexpected token

[Gaurav.Soni]

HI Mahmood,

Can you attach your implemented code? Also, generate and attach the Chrome HAR file along with JS error from chrome console?

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

Regards,

Gaurav Soni

[mahmood.yousaf]

Hi,

I cannot attach the HAR file becuase the DEV that was helping me have a look at this is no off work for the next week so i dont have access to that code. 

As for the implemented code i cant give it all to you but here are the important parts. 

First Example Tried with QUOTES

window['adrum-start-time'] = new Date().getTime();
(function(config){
config.appKey = 'APPKEY';
config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
config.xd = {enable : true};
userEventInfo: {
"PageView": function(context) {     //  quotes used around the PageView object 
return {
userData: {
username: "PageView [" + window.userName + "]",
pagename: "PageView [" + window.calledFrom + "]"
},
userDataBoolean: {
isWorking: true
}
}
},
"Ajax" : function(context) {  //  quotes used 
return {
userData: {
username: "Ajax [" + window.userName + "]",
pagename: "Ajax [" + window.calledFrom + "]"
},
userDataBoolean: {
isWorking: true
}
}
},
"VPageView": function(context) {  //  quotes used 
return {
userData: {
username: "VPageView [" + window.userName + "]",
pagename: "VPageView [" + window.calledFrom + "]"
},
userDataBoolean: {
isWorking: true
}
}
}
}
})(window['adrum-config'] || (window['adrum-config'] = {}));
if ('https:' === document.location.protocol) {
document.write(unescape('%3Cscript')
+ " src='https://cdn.appdynamics.com/adrum/adrum-4.3.2.1.js' "
+ " type='text/javascript' charset='UTF-8'"
+ unescape('%3E%3C/script%3E'));
} else {
document.write(unescape('%3Cscript')
+ " src='http://cdn.appdynamics.com/adrum/adrum-4.3.2.1.js' "
+ " type='text/javascript' charset='UTF-8'"
+ unescape('%3E%3C/script%3E'));
}

Second Example Tried without QUOTES

window['adrum-start-time'] = new Date().getTime();
(function(config){
config.appKey = 'APPKEY';
config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
config.xd = {enable : true};
userEventInfo: {
PageView: function(context) {     //  quotes not used 
return {
userData: {
username: "PageView [" + window.userName + "]",
pagename: "PageView [" + window.calledFrom + "]"
},
userDataBoolean: {
isWorking: true
}
}
},
Ajax : function(context) {  //  quotes not used 
return {
userData: {
username: "Ajax [" + window.userName + "]",
pagename: "Ajax [" + window.calledFrom + "]"
},
userDataBoolean: {
isWorking: true
}
}
},
VPageView: function(context) {  //  quotes not used 
return {
userData: {
username: "VPageView [" + window.userName + "]",
pagename: "VPageView [" + window.calledFrom + "]"
},
userDataBoolean: {
isWorking: true
}
}
}
}
})(window['adrum-config'] || (window['adrum-config'] = {}));
if ('https:' === document.location.protocol) {
document.write(unescape('%3Cscript')
+ " src='https://cdn.appdynamics.com/adrum/adrum-4.3.2.1.js' "
+ " type='text/javascript' charset='UTF-8'" 
+ unescape('%3E%3C/script%3E'));
} else {
document.write(unescape('%3Cscript')
+ " src='http://cdn.appdynamics.com/adrum/adrum-4.3.2.1.js' "
+ " type='text/javascript' charset='UTF-8'" 
+ unescape('%3E%3C/script%3E'));
}

[mahmood.yousaf]

Hi,

I've managed to get it working locally on my machine and have created a HAR file.

[Gaurav.Soni]

Hi Mahmood,

Sorry for delayed response. Do you say you can now get the custom user data in EUM now? If yes, that's great, if not, let me know the outstanding issue please.

Regards,

Gaurav Soni

[mahmood.yousaf · Accepted solution]

Hi,

Yes i am now seeing data being captured in AppD EUM. However some of my requests are being lost, however i have raised another request for this issue.