Curious to see if anyone is using application insights to track various aspects of your dashboard.
I’m no web guy, but I’m going to try to implement it when I go live to track usage and make sure people are using the features they’ve requested.
Looking at the instructions it seems easy to setup, but not sure how well it will integrate with UD.
Hi, I did actually make a post on this, just never got around to posting a follow up since i’m still waiting on firewall rules to be applied in a change request so I can confirm if it worked or not.
Basically I was looking at using the javascript snippet in the index.html file however, we had a call with our MS guy and he advised it would be better/easier to use the codeless deploy, we used the following code to do this:
#Install for all IIS sites:
Enable-ApplicationInsightsMonitoring -InstrumentationKey xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
#Install for specific site/s:
Enable-ApplicationInsightsMonitoring -InstrumentationKeyMap @(@{MachineFilter=’.’;AppFilter=‘WebAppExclude’}, @{MachineFilter=’.’;AppFilter=‘WebAppOne’;InstrumentationSettings=@{InstrumentationKey=‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx1’}}, @{MachineFilter=’.’;AppFilter=‘WebAppTwo’;InstrumentationSettings=@{InstrumentationKey=‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx2’}}, @{MachineFilter=’.’;AppFilter=’.*’;InstrumentationSettings=@{InstrumentationKey=‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxdefault’}})
I see your post now, I must have not spelled insight incorrectly when I was searching.
Forgive my ignorance, where would I be running that? Would I be doing that inside my dashboard.ps1 file? Or is that something I can run in the console on the azure web app?
No prob! I’m hosting my dashboard locally on-prem in IIS. So i just ran in powershell as a one off to deploy insights to my site. Not sure about how you’d do this with an azure web app as I’ve never tried that method. Maybe try the docs here: https://docs.microsoft.com/en-us/azure/azure-monitor/app/monitor-performance-live-website-now
I will drop you an update if I make progress and the method I use works.
The other way I was going to attempt was the javascript snippet:
Pasting it along with your instrument key into within the client\index.html
Again, not sure if either of these will work, just a guess at this point until i can test 
So I’m getting somewhere. I added the java script to my index.html file. In devtools I can see my browser downloading the ai.0.js file.
I added a simple action to a button.
Invoke-UDJavaScript -JavaScript ‘appInsights.trackEvent(“User Click Feedback Button”)’
In DevTools I see POSTs going to
The payload contains info about the browser, the text I defined, and the page it was on, in this case /Home.
In Application Insights I now see some details under usages; Users, Sessions etc. Not everything is available yet.
Some things aren’t showing up for me, like Live Metrics, Failures and Performance counters, I think I need to install some kind of SDK so it’s able to see it. Hopefully I’ll figure it out today.
Of note, the ai.0.js file was getting blocked by my uBlock extension so I had to turn it off for my site. I know most of our tech use that so I’ll have figure out a way to bypass that. It’s downloaded from somewhere else, so I might just download/update the file myself since it’s probably the domain uBlock is blocking.
So I think the browser events will be all that I can do for now via the javascript.
I’m thinking universal dashboard would have to be rebuilt with with the azure application insights sdk (Link) added to it in order to have it report server side performance and info.
@adam am I correct in my thinking? Is there a way to add a nuget package to UD without rebuilding? Forgive me if I’m using the wrong terminology or completely wrong, again I’m no web/developer guy.
There currently isn’t a great way to add a nuget package to UD right now. We would have to implement that into the app directly. It’s certainly something we can do. I’d love to see performance stats from UD sites. Please file a GitHub issue for it.
3 Likes
Created issue, thanks!
2 Likes
Hey Everyone,
I had App Insights on my to-do list for a while now but this post sparked my interest in trying to figure this out - as I will need this once I release our 2.9.0 UD to users.
I started out by adding the JS Snip to the top (under the head) of the index.html page in the UD/client folder.
Next, it’s all about how do I get what into the telemetry payload for the track POST - The MSFT documentation, as usual, has outdated content so its all trial and error at this point. but this is how far I have got.
- Page Load JS and initial page tracking - I am trying to figure out how I can manipulate the trackPageView({}) in the to include a custom name: of the page. I was able to insert a custom page name but this was only by invoking the trackPageView from within the New-UDPage using this
trackPageView({ name: ‘$($Page)’ })
- User Id by default is just some chars that don’t really identity anything but you can insert the authenticated user name from UD (If you’re using Auth) do so by using the $user var from UD and insert into your
aisdk.setAuthenticatedUserContext('$($User)');
- I also got startTrackPage & stopTrackPage working within UD endpoints, so If I load a grid or click to open a Modal the tracking of the element loading is working (see snip below). I did this by adding the Start and Stop between the loading endpoints
New-UdGrid {
Invoke-UDJavaScript -JavaScript “aisdk.startTrackPage(‘GridLoad - Name of Grid’)”
$Endpoint | Out-UDGridData
Invoke-UDJavaScript -JavaScript “aisdk.stopTrackPage(‘GridLoad - Name of Grid’)”
}
3 Likes
Interesting, thanks for sharing @mylabonline. I’m going to play around with that tomorrow see if I can get that implemented. Question on the JS in the index.html file, the .js file was getting blocked by my browser ad blocker, I allowed it but wondering if I need to adjust the js to point to a local path instead of going to Microsoft’s servers to download their js. Did you come across that?
@mylabonline - Good stuff, thanks for the pointers.
@RamonMA - Havent seen it getting blocked by add blockers, but we did have an issue with some firewall rules missing (for the sdk’s). <Full list of required IP’s here>
I just tested on an unrestricted VM and got this working using the trackpageview method.
I just need to put together some more code so i can get richer data into AppInsights reference
I am still in the middle of implementing the App Insights JS SDK for my use, but below is the cmdlet I have built - and when each page or element loads I call this cmdlet like this.
Invoke-AppInsights -InsightType
When the page loads and right at the top I call
Invoke-AppInsights -InsightType 'Page' -PageName "Page 1"
I have a custom page name being sent to the JS SDK due to the fact that the SDK will use the web page <‘title’> which is different than the page name I want to send to App Insights.
Then within my other elements like grids I have cmdlets that pull specific data (such as VMs in an Azure Subscription). so if the cmdlet returns the correct data then I create an App Insights Event.
Invoke-AppInsights -InsightType 'Event' -EventData $EventData -EventName "GET $($FunctionUrl)" -EventDuration $($Duration.Milliseconds) -EventType 'HTTP' -EventMethod 'GET' -EventResponse '200'
else if the return data is not expected then I throw an exception to App Insights
Invoke-AppInsights -InsightType 'Exception' -EventData $EventData -EventName "GET $($FunctionUrl)" -ExceptionMessage $($_.Exception.Message) -EventType 'HTTP' -EventMethod 'GET' -EventResponse '400'
Full cmdlet - but its still WIP
function Invoke-AppInsights {
param($InsightType,$PageName,$EventName,$EventData,$EventType,$EventDuration,$EventMethod,$EventResponse,$ExceptionMessage)
if ($InsightType -eq 'Page' -and $PageName) {
Invoke-UDJavaScript -Javascript "aisdk.trackPageView({ name: '$($PageName)' });aisdk.setAuthenticatedUserContext('$($User)');"
} elseif ($InsightType -eq 'Event' -and $EventData) {
Invoke-UDJavaScript -JavaScript "
aisdk.trackDependencyData({
duration: '$($EventDuration)',
name: '$($EventName)',
responseCode: '$($EventResponse)',
id: '$(New-Guid)',
type: '$($EventType)',
method: '$($EventMethod)',
commandName: '$($EventName)',
properties: {
type: '$($EventData.type)',
id: '$($EventData.id)',
title: '$($EventData.title)',
}
});
aisdk.flush();
"
} elseif ($InsightType -eq 'Exception') {
Invoke-UDJavaScript -JavaScript "
aisdk.trackDependencyData({
duration: '$($EventDuration)',
name: '$($EventName)',
responseCode: '$($EventResponse)',
id: '$(New-Guid)',
type: '$($EventType)',
method: '$($EventMethod)',
properties: {
type: '$($EventData.type)',
id: '$($EventData.id)',
title: '$($EventData.title)',
'exception':'$($ExceptionMessage)'
}
});
aisdk.trackException({
exception: new Error('$($ExceptionMessage)')
});
aisdk.flush();"
}
}
2 Likes
@mylabonline - Really good stuff, i like it! Cant wait to see the finished product.
Btw, I like to only have my page name defined in one place (prior to calling new-udpage), so to get around having another static entry I’m using $(($request.headers[‘Referer’] -split “/”)[-1]) to pass the page name into app insights.
Also for anyone else who uses win auth / pass through, since the $user contains the domain, I had to escape the backslash in my regex to replace it with double backslash so it escapes within JS:
aisdk.setAuthenticatedUserContext('$($User -replace "\\","\\")')
@RamonMA - We thought this was due to firewall rules but actually the nessesary ports were open, it was getting blocked as a threat for us too! Once this was allowed it’s been fine.