Usage statistics

[joeflack4]

Overview

We'd like to see data about who is using TermHub, when, how, and also a log of errors.

Implementation options

a. Service, like Google Analytics
b. Software library
c. Custom code
d. Azure: Free -> Standard tier
e. Azure: Insert JS snippet

Implementation options: details

d. Azure: Free -> Standard tier

Details

It's not entirely clear to me how this would work, but this is based on our [Teams discussion](https://teams.microsoft.com/l/message/19:[email protected]/1694622864240?context=%7B%22contextType%22%3A%22chat%22%7D) with Martin. On 9/19 he said: > i havent been able to spend as much time as I wanted to on this, but what time I spent, pushed me to option # 2 _(d.b. below)_

Siggie did an initial investigation. There are some stats (see screenshot), but only a high level summary.

Martin Bakalski said:

Due to the static app being a free tier, I am not sure off of the top of my head if it has historical logging or not. looks like there is a way to enable application insights but it requires a function. I am not sure exactly what that means but I can look into it
might need to bump the static web app (frontend) from free tier to standard tier ($7/month) to enable logging
There might also be a way to add some JS code directly in the app to hook it up to the Application Insights resource. Link To MS article
what you will need to make the JS code work is a connection string. that can be found here, top right of the screen there is a connection string

if we go the $7/month route we would be able to hook up the analytics tool to the dev frontend and dev backend. as far as functionality, i beleive you will get more info out of upgrading to standard from what I have seen vs the js code snippet. unfortunately we havent setup logging for other static web apps so this is new for us and I have no actual way of knowing

---

Screenshot of current usage options on free tier in Azure.

e. Azure: Insert JS snippet

• 1. Initial setup Usage statistics: Azure JS method #569
• 2. Different setup/key for dev/prod
• 3. Plugins / fine tuning
  • 3.1. React extension?

More details

The guide from MS is here

The "Connection String" variable mentioned in the guide (ours is InstrumentationKey=e1fc0485-485a-48b8-8b2a-8e462962e030;IngestionEndpoint=https://eastus-8.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/) can be referenced here.

Martin wrote:

This is the main MS article about configuring monitoring for Node.JS apps ->https://learn.microsoft.com/en-us/azure/azure-monitor/app/nodejs. it is rather long, but it goes into a lot of detail, about what is possible.
I think the part that might be interesting for starters is the SDK configuration - https://learn.microsoft.com/en-us/azure/azure-monitor/app/nodejs#sdk-configuration

Martin wrote (Joe: not sure this is still relevant):

let appInsights = require("applicationinsights");
appInsights.setup("<connection_string>")
    .setAutoDependencyCorrelation(true)
    .setAutoCollectRequests(true)
    .setAutoCollectPerformance(true, true)
    .setAutoCollectExceptions(true)
    .setAutoCollectDependencies(true)
    .setAutoCollectConsole(true)
    .setUseDiskRetryCaching(true)
    .setSendLiveMetrics(false)
    .setDistributedTracingMode(appInsights.DistributedTracingModes.AI)
    .start();

Maybe one or both of those links above is wrong. Siggie found this, which Martin said seemed more relevant:
https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-sdk?tabs=javascriptwebsdkloaderscript

Martin:

if you go here and click on "see all data", you'll see more request info: https://portal.azure.com/#@live.johnshopkins.edu/resource/subscriptions/fe24df19-d251-4821-9a6f-f037c93d7e47/resourceGroups/JH-TERMHUB-WEBAPP-RG/providers/microsoft.insights/components/termhub-dev-app-insights/searchV1

2. Different setup/key for dev/prod

The CONNECTION_STRING in index.html needs to be set to a different value for dev/prod. We can handle this in the GitHub action. For example, as with how we're doing env.js, we can have different files for local /prod, e.g. cp frontend/src/env.dev.js frontend/src/env.local.js. Or, we could use a command, e.g. sed to replace the var within the file.

3. Plugins / fine tuning

Martin said:

but you will have to add a couple of extra "plugins" to export extra data to app insights
again there is fine tuning to be done via extra code you guys will need to add to your index file. so that the static app service can send more information and the information to app insights

[joeflack4]

@Sigfried I think we've generally achieved this. If we want further updates to usage statistics, this should create specific issues for those.