Update Azure Application Insights JS to v3

[nwcm]

Updates the analytics engine for Azure Application Insights to their v3

https://github.com/Microsoft/ApplicationInsights-JS

[NGPixel]

Is v2 being deprecated? If not, v3 should be a different module to avoid breaking changes in existing installations.

[nwcm]

It took me a while to work out which version wikijs was on. For reference its v2.0.1.

Seems that the move to connection string is from Microsoft Azure. With support ending March 31, 2025 for instrumentationKey, we should advise users to move to connectionString. Seems that instrumentationKey is still supported over all these versions until then.

The majority of changes relate to use via npm and coded reference, plus minimum browser supports mainly for defineProperty which looks to be widely adopted.

I have injected the v3 using instrumentationKey into my wikijs instance running v2.5.300 and it is reporting correctly.

There should be little issue upgrading to applicationInsights-JS v3.0.3 in both wikijs v2 and v3. However, it's your call.

I would recommend in wikijs v3 we use connectionString, and require users to make this change to avoid random breaking when MS turns it off

v1: https://github.com/microsoft/ApplicationInsights-JS/blob/legacy-v1/README.md#snippet-setup-ignore-if-using-npm-setup
v2: https://github.com/microsoft/ApplicationInsights-JS/tree/master#snippet-setup-ignore-if-using-npm-setup
v3: https://github.com/microsoft/ApplicationInsights-JS/tree/main#snippet-setup-ignore-if-using-npm-setup

Update:
Found the date instrumentationKey will be deprecated here

On March 31, 2025, support for instrumentation key ingestion will end. Instrumentation key ingestion will continue to work, but we'll no longer provide updates or support for the feature. Transition to connection strings to take advantage of new capabilities.

[nwcm]

As a second thought after looking deeper into Application Insights, there are a few things this configuration of the JS SDK isn't capturing. Mainly events and clicks, and authenticated vs anon. Both pretty useful in site metrics.

I have a working way, but it feels janky and likely not great for page load. Im not sure if there is a better way without using the server side application insights sdk

<script type="text/javascript" src="https://js.monitor.azure.com/scripts/b/ext/ai.clck.2.min.js"></script>
<script type="text/javascript">
	function getCookie(cName) {
		const name = cName + "=";
		const cDecoded = decodeURIComponent(document.cookie); //to be careful
		const cArr = cDecoded.split('; ');
		let res;
		cArr.forEach(val => {
			if (val.indexOf(name) === 0) res = val.substring(name.length);
		})
		return res
	}

	function parseJwt(token) {
		var base64Url = token.split('.')[1];
		var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
		var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
			return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
		}).join(''));

		return JSON.parse(jsonPayload);
	}

	function setCookie(name, value, days) {
		var expires = "";
		if (days) {
			var date = new Date();
			date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
			expires = "; expires=" + date.toUTCString();
		}
		document.cookie = name + "=" + (value || "") + expires + "; SameSite=Strict; Secure; path=/";
	}

	var clickPluginInstance = new Microsoft.ApplicationInsights.ClickAnalyticsPlugin();
	// Click Analytics configuration
	var clickPluginConfig = {
		autoCapture: true,
		dataTags: {
			useDefaultContentNameOrId: true
		}
	}
	// Application Insights configuration
	var configObj = {
		connectionString: "YOUR_CONNECTION_STRING",
		// Alternatively, you can pass in the instrumentation key,
		// but support for instrumentation key ingestion will end on March 31, 2025.
		// instrumentationKey: "YOUR_INSTRUMENTATION_KEY",
		extensions: [
			clickPluginInstance
		],
		extensionConfig: {
			[clickPluginInstance.identifier]: clickPluginConfig
		},
	};

	
	let jwt = getCookie("jwt");
	if(jwt){
		setCookie("ai_authUser", parseJwt(getCookie("jwt"))['email'].replace(/[,;=| ]+/g, "_"), 1);
	}

		// Application Insights JavaScript (Web) SDK Loader Script code
	!function (cfg) {<!-- Removed the JavaScript (Web) SDK Loader Script code for brevity -->}({
		src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
		crossOrigin: "anonymous",
		cfg: configObj // configObj is defined above.
	});
</script>