Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Azure Application Insights JS to v3 #6775

Open
wants to merge 2 commits into
base: vega
Choose a base branch
from
Open

Conversation

nwcm
Copy link

@nwcm nwcm commented Oct 12, 2023

Updates the analytics engine for Azure Application Insights to their v3

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

@NGPixel
Copy link
Member

NGPixel commented Oct 12, 2023

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

@nwcm
Copy link
Author

nwcm commented Oct 13, 2023

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
Copy link
Author

nwcm commented Oct 13, 2023

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants