Monitoring Citrix StoreFront User Experience with eG Enterprise

Monitoring

Introduction

eG Enterprise is a Monitoring Solution that gives you a complete overview in a single pane of glass about your application performance and infrastructure. Automatic correlation and guided drill down to the related components helps you to identify the root cause. Monitoring the User Experience is one of the greatest benefits, to identify and analyse issues in a pro-active way.

This Blogpost will show the setup to monitor the Citrix StoreFront User Experience with eG Real User Monitoring (eG RUM) and Citrix ADC. This will work with the StoreWeb only, not with native Store. eG RUM supports Java, .Net, and PHP. Any webpage/web-application containing HTML content, where JavaScript code can be included in the <head> tag, can be monitored, this is comparable to how Google Analytics would work and works for nearly any type of website, including major SaaS solutions like SharePoint Online or Salesforce

eG Real User Monitoring (eG RUM)

Create your own RUM Dashboard

To Monitor the User Experience from an eG perspective you don’t need a local agent on the users endpoint, eG focuses completely on the backend stack and uses a javascript component (profiler) to capture measurements directly from the browser on the endpoint. The measurements include; the request time that is needed to transfer the data from the endpoint to the web application server, the time spend on the backend and the response time back to the client as well.

The following screen will show how the metrics are transfered from the endpoint to the eg Manager 

Data flow

In this scenario I’m using 2 eG RUM Collectors they are Loadbalanced through Citrix ADC as well. The eG javascript file, that’s being called from the code injection in the <head> is in this scenario hosted on the RUM Collector. If the Javascript file is not available this could potentially add additional latency to the web application. The Javascript file could also be hosted on the Web Application server (in this case StoreFront) as well. A good starting point that I recommended is the eG RUM FAQ, where you can find the most answers.

Design Overview

RUM Collector setup

First, staring with the Installation of the 2 RUM Collector, running on 2 virtual Server 2019 with 2 vCPU and 8 GB RAM each.

select No, SSL will be configured later on the Citrix ADC Loadbalancer
If eG Agent is installed on the same VM, you got an additional prompt and confirm.
reboot the VM after finalize the installation
2 additional services are located after the installation
In the Windows Startmenu the RUM Collector entries added as well

Citrix ADC LoadBalancing for RUM Collectors

For the internal eG RUM Collector LoadBalancer you need an certificate from to bind it to the Loadbalancer, and face the it with SSL, the backend communciation from the LoadBalancer to the eG RUM Collectors will use http only.

Serverobject

Create 2 Serverobjects for both RUM Collectors with their name and IP Address

Monitor Configuration

ValueData
Nameeg_rum
TypeHTTP
Interval15 seconds
Response Time-Out3 seconds
Response Code200
HTTP RequestGET /rumcollector/egrum.js
Destination IPBound service
Destination Port7080
Down Time 30 seconds

Service Group

ValueData
Namesg_eg_ctxrum
ProtocollHTTP
Insert Client IP AddressENABLED
Headerx-forwarder-for
Service Group Membersadd previous 2 RUM Collector Serverobjects
Monitorsadd previous created monitor, e.g. eg_rum
Service Group sg_eg_ctxrum

Load Balancing Virtual Server

ValueData
Namelb_eg_cxrum_internal
ProtocolSSL
IP Address TypeIP Address
IP Address<enter the LB IP Address>
Port7080
LB Virtual Server ServiceGroup Bindingchoose the previous created Service Group, e.g. sg_eg_ctxrum
Server CertificateInstall and Bind a Server Certificate, e.g. ctxrum.eucweb-internal.com
PersistenceNo configuration required
the get the LoadBalancing Server up, install and Bind a Server Certificate

Create a DNS Record for the LB Server IP Address with the name, e.g. ctxrum, and test if it’s reachable.

RUM Data Collector Configuration

Per default the eG Manager server it’s being already a RUM Collector

Add RUM Collector

Open in the eG Console → Admin → Miscellaneous → RUM Data Collectors -> Add new Collector
ValueData
Nick Namectxrum.euclab-internal.com
Public URLhttps://ctxrum.euclab-internal.com:7080
Private URL (Optional)https://ctxrum.euclab-internal.com:7080
rum Collector successfully added in the eG Manager

Add RUM Component

ValueData
CategoryAll
Component TypeReal User Monitor
Nick NameCitrix-StoreFront
RUM Collectorctxrum.euclab-internal.com
Remote Agent<Choose en exiting Remote Agent> to transfer the Date, in my scenario I’m using the eG Manager as the Remote Agent
Enable JavaScript Error CapturreYes
Enable Ressource Details CaptureYes
Enable AJAX Request CaptureYes
Enable AJAX CorrelationYES
Overwrite BTM UsernameNo
URL Exclude Patternnon
URL Exclude Pattern For AJAXnon
URL include Pattern*
Capture UsernameYES
Note: This requires a StoreFront modification
Expression TypeCSS Selector
SCC Selector Index#customTop
CSS Selector Index1
Apply Cleanup RuleNo

In the lower section you can find the RUM Header, copy it to a notepad file for later usage in Citrix ADC configuration

Specific Test Configuration

I’m using the following Parameters for all tests

ValueData
Test Period5 mins
PROXYHOSTnone
PROXYPORTnone
PROXYUSERNAMEnone
PROXYPASSWORDnone
CONFIRM PASSWORDnone
Do YOU WANT TO LIMIT THE PAGE VIEWSNo
CONSIDER JAVASCRIPT ERRORS IN APDEX CALCULATIONSYes
URL SEGMENTS TO BE USED AS GROUPED URL1,2
URL PATTERNS TO BE IGNORED FROM MONITORING*.js,*.css,*.jpeg,*.jpg,*.png
JAVA SCRIPT ERRORS TO BE IGNOREDNone
INCLUDE PAGETYPE CATEGORIZATION IN TPOP DDNo
MAXIMUM HEALTHY TRANSACTION IN DD5
MAXIMUM SLOW TRANSACTION IN DD5
MAXIMUM ERROR TRANSACTION IN DD5
SLOW TOLERATING CUTOFF (MS)4000
TOLERATING CUTOFF16000
PAGELOADTIME CUTOFF3600000
PAGE TYPES TO BE INCLUDED IN DASHBOARDAjax
iFrame
Virtual Page
SEND ZERO VALUES WHEN THERE IS NO TRAFFICNo
DD FREQUENCY1:1
DETAIL DIAGNOSISOn

Inject the JavaScript Code into Citrix StoreFront

Citrix StoreFront is Loadbalanced through Citrix ADC, create a rewrite Action and Policy first -> AppExpert -> Rewrite -> Actions

Rewrite Action

ValueData
Namerewact_eg_RUM
TypeREPLACE_ALL
Expression to choose target locationHTTP.RES.BODY(10000000)
ExpressionSee information below
SearchText
</head>
Expression

For the expression the RUM Component Header Script Code must be copied, but it’s need to be modified

origin RUM Header from the Real User Monitor

Change it as follows:

You can replace the Site_Name GUID 76871164-dd73-46ce-b932-c6a719b57760-159482262500 and beacon url https://ctxrum.euclab-internal.com:7080 with your data and insert it in the expression of the action

"<script> window['egrum-start_time'] = new Date().getTime();window['Site_Name'] = '76871164-dd73-46ce-b932-c6a719b57760-1594822625000'; window['beacon-url'] = 'https://ctxrum.euclab-internal.com:7080';if(!window['egrum-config']) window['egrum-config'] = {}; (function (config) {config.capture = { jsError:true, resourceDetails:true, ajax:true, ajaxCorrelation:true, overwriteBtmUName:false, excludeURLPattern:'none', ajaxExcludeURLPattern:'none', includeURLPattern:'*'}; config.username ={ username_enabled:true, selectortype:'css', selectoridorpath:'#customTop', selectorindex:1};})(window['egrum-config']); </script>"+"<script src='https://ctxrum.euclab-internal.com.com:7080/rumcollector/egrum.js' async>></script></head>"

Rewrite Policy

AppExpert -> Rewrite -> Policies

ValueData
Namerew_pol_eg_RUM
Actionrewact_eg_RUM
Undefined-Result ActionNOREWRITE
ExpressionHTTP.RES.HEADER(“Content-Type”).CONTAINS(“text/html”)

Citrix StoreFront LoadBalancer

Configure the existing StoreFront LoadBalancer with an additional Response Policy

Citrix StoreFront Modification

To capture the Username in the Webpage of Citrix StoreFront and show it in the metric data in the eG Manager, Citrix StoreWeb must be modified. If you monitor another website, please check if the Username is visible in the Webpage or how you can show and collect it with eG.

The Username of the logged-in user in StoreWeb is displayed in the right top corner

Script.js Modification

Open C:\inetpub\wwwroot\Citrix\StoreWeb\custom\script.js and add the following function.

function getUsername () {
	CTXS.trace("getUsername");
	var usernameURL = CTXS.Config.getConfigValue("authManager.getUsernameURL");
	var CsrfToken = window.getCookieRegex("CsrfToken");
	var CtxAuthId = window.getCookieRegex("CtxsAuthId");
	var ASPNET_SessionId = window.getCookieRegex("ASP.NET_SessionId");
	
	$.ajax({
		headers: {
			'Csrf-Token':CsrfToken,
			'CtxAuthId':CtxAuthId,
			'ASP.NET_SessionId':ASPNET_SessionId,
			'X-Citrix-IsUsingHTTPS': 'No'
		},
		type: "POST",
		url: usernameURL,
		dataType: "text",
		success: function (data) {
			CTXS.trace("getUsername data:" + data);
			$('#customTop').html(data);
		}
	});
};

go to the upper section of the file and locate or add if not exists CTXS.Extensions.afterDisplayHomeScreen = function (callback)

CTXS.Extensions.afterDisplayHomeScreen = function (callback) {
  getUsername();
};

style.css Modification

Open C:\inetpub\wwwroot\Citrix\StoreWeb\custom\style.css and add the following lines at the end of the file.

#customTop {
  text-align:right;
  color:gray;
  font-size:12px;
  padding-top:5px;
  padding-right:5px;
}

The field #customTop is related to the eG Component.

Browser Developer Tools to show customTop

GEO Location

For public IP-Addresses, eG uses a local 3rd party maxmind database to match the IP-Address of the Endpoint to his location. For private IP-Addresses on the LAN/WAN Network you can define at your own.

To manage the private IP-Addresses, eG Manager -> Agents > GEO Locations and click Configure Network Location

Configure Network Location

Click Add New Network Location

New Network Location
Download a sample XML
<config>
	<!--
		Here is the Out of the box setting for GEO Location details. 
		eG Support/Admin have to edit manually to get the desired 
		GEO location details using the below mentioned options.
	-->
	<location is-default="true">
        <country>Unknown</country>
        <region>Unknown</region>
        <city>Unknown</city>
        <country-code>NIL</country-code>
		<latitude>0</latitude>
        <longitude>0</longitude>
	</location>


	<!-- 
		There are three different options available for mapping 
		a local (Intranet) IP address to geo location details.
	-->

	<!--
		Option 1 :
		The IP range is calculated based on the start ip and the end ip.
		The below sample calculates IP rages from 192.168.8.1 to 192.168.8.246
		If the User's IP address is within the range then the GEO Location 
		details will be considered as configured below.
	-->
	
	<location start-ip-address="192.168.8.1" end-ip-address="192.168.8.100">
		<country>India</country>
		<region>Tamil Nadu</region>
        <city>Chennai</city>
        <country-code>IN</country-code>
		<latitude>13.0827</latitude>
        <longitude>80.2707</longitude>
	</location>

	<location start-ip-address="192.168.8.101" end-ip-address="192.168.8.120">
		<country>India</country>
		<region>Maharashtra</region>
        <city>Mumbai</city>
        <country-code>IN</country-code>
		<latitude>19.0760</latitude>
        <longitude>72.8777</longitude>
	</location>

	<location start-ip-address="192.168.8.121" end-ip-address="192.168.8.140">
		<country>India</country>
		<region>West Bengal</region>
        <city>Kolkata</city>
        <country-code>IN</country-code>
		<latitude>22.9868</latitude>
        <longitude>87.8550</longitude>
	</location>

	<location start-ip-address="192.168.8.141" end-ip-address="192.168.8.150">
		<country>United Kingdom</country>
		<region>England</region>
        <city>London</city>
        <country-code>UK</country-code>
		<latitude>51.5074</latitude>
        <longitude>0.1278</longitude>
	</location>


	<location start-ip-address="192.168.8.171" end-ip-address="192.168.8.220">
		<country>United States</country>
		<region>California</region>
        <city>Los Angeles</city>
        <country-code>USA</country-code>
		<latitude>34.0522</latitude>
        <longitude>118.2437</longitude>
	</location>

	<location start-ip-address="192.168.8.221" end-ip-address="192.168.8.254">
		<country>Singapore</country>
		<region>North Region</region>
        <city>Woodlands</city>
        <country-code>SGP</country-code>
		<latitude>1.3521</latitude>
        <longitude>103.8198</longitude>
	</location>

	<location start-ip-address="192.168.11.1" end-ip-address="192.168.11.230">
		<country>Australia</country>
		<region>New South Wales</region>
        <city>Sydney</city>
        <country-code>AUS</country-code>
		<latitude>33.8688</latitude>
        <longitude>151.2093</longitude>
	</location>

	<location start-ip-address="192.168.11.231" end-ip-address="192.168.11.254">
		<country>United States</country>
		<region>New Jersey</region>
        <city>Atlantic City</city>
        <country-code>USA</country-code>
		<latitude>38.56</latitude>
        <longitude>73.54</longitude>
	</location>

	<location start-ip-address="192.168.9.1" end-ip-address="192.168.9.254">
		<country>United States</country>
		<region>California</region>
        <city>San Francisco</city>
        <country-code>USA</country-code>
		<latitude>37.7749</latitude>
        <longitude>122.4194</longitude>
	</location>

	<location start-ip-address="192.168.10.1" end-ip-address="192.168.10.254">
		<country>United States</country>
		<region>Colorado</region>
        <city>Denver</city>
        <country-code>USA</country-code>
		<latitude>39.7392</latitude>
        <longitude>104.9903</longitude>
	</location>

	<location start-ip-address="192.168.1.1" end-ip-address="192.168.1.254">
		<country>Singapore</country>
		<region>North-East Region</region>
        <city>Seletar</city>
        <country-code>SGP</country-code>
		<latitude>1.2885</latitude>
        <longitude>103.8565</longitude>
	</location>
	
	<!--
		Option 2 :
		The value against the network attribute is starting IP.
		The IP range is calculated based on the start ip and the subnet-mask.
		The below sample calculates IP rages from 192.168.10.1 to 192.168.11.254
		If the User's IP address is within the range then the GEO Location 
		details will be considered as configured below.
	-->
	<!--
	<location network="192.168.10.1" subnet-mask="255.255.254.0">
		<country>United States</country>
		<region>California</region>
		<city>Los Angeles</city>
		<country-code>US</country-code>
		<latitude>34.0522</latitude>
		<longitude>118.2437</longitude>
	</location>
	-->

	<!--
		Option : 3
		If the User's IP address does not match with any of the above 2 options then
		the default GEO Location details will be considered as configured below.
	-->
    <!-- 
	<location is-default="true">
		<country>United States</country>
		<region>California</region>
        <city>San Francisco</city>
        <country-code>US</country-code>
		<latitude>37.7749</latitude>
        <longitude>122.4194</longitude>
	</location> 
	-->
	
</config>

Edit the XML File with the related Data of your private network locations

geolocation-local-map.xml

After you have add all required locations to the XML, it’s time to upload the Data to the eG Manager.

Upload the Location data
The Network Location listed in the eG Manager

Updating Network Locations

In eG Manager the Cities, Country, Locations and Regions are listed as Unknown, this is the time to update the xml file with the unknown locations

Check JavaScript injection

If all is setting up, login into Citrix StoreFront Webpage, open the developer tools and go to the head section and see the injection as follows. Great it looks like it works, after 5 minutes the Data are shown in the eG Manager.

Real User Monitor in a practical scenario

in eg Manager -> Monitor -> Real User Monitoring

Open the Citrix-StoreFront Layer
RUM Layer

Click to a City and on the right side the Data are listed, click the Analyze Icon to get the insight data

Related Ressource Details

Capturing the Username is not possible with Internet Explorer, works better on Google Chrome & Edge.

Real User Monitoring Dashboard

Jump in the Dashboard from the RUM Layer

go to the RUM Dashboard

Below you can find an overview of all RUM Dashboards available out of the Box

Overview
GEO Information
Response Time Breakout
Omni Channel
Page Views
Usage
Errors

Conclusion

Real User Monitoring helps you a lot to identify issues and see where it come from in an easy way. User Experience is one of the biggest Challenges and is more to check if a service is available or not. From a GDPR prospective RUM transfers the Username, IP-Address of the Endpoint, Browser & Browser version.

Happy Monitoring and everytime a good User Experience

Related Links

https://www.eginnovations.com/docmentation/The-eG-Real-ser-Monitor/The-eG-Real-User-Monitor.htm

https://www.eginnovations.com/documentation/The-eG-Real-User-Monitor/The-eG-Real-User-Monitor-FAQ.htm

https://www.mycugc.org/blogs/cugc-blogs/2017/11/14/citrix-monitoring-using-eg-innovations-for-an-ente

EUCweb.com | EUCblog.com | Founder Base Image Script Framework (BIS-F) | IT-Architect EUC | Automation Enthusiast

Leave A Comment

CAPTCHA ImageChange Image