Wrong page name is logged

[maxcl10]

I’m using the basic configuration and I noticed that the although the correct URL is saved, the previous page name is saved. I'm using a title resolver to update the page title. Any idea how to workaround this issue?

[tessa-meh]

We have the same issue. We are using the native TitleStrategy. We do see PageViewData being logged with the new URL, but with the old page title. We don't use custom TitleStrategy.

Angular version: 18.2.4
Plugin(s) versions:

• "@microsoft/applicationinsights-analytics-js": "3.3.2",
• "@microsoft/applicationinsights-angularplugin-js": "15.3.2",
• "@microsoft/applicationinsights-web": "3.3.2",

Example of route:

{   
    path: 'settings',
    title: 'Settings',
}

[MSNev]

The main SDK (which knows nothing about angular or any other framework) reads the page title from the document.title the actual code is here https://github.com/microsoft/ApplicationInsights-JS/blob/3dc9e3c34d59076d48d9519b88eb8f584d58538c/extensions/applicationinsights-analytics-js/src/JavaScriptSDK/Telemetry/PageViewManager.ts#L88-L92

So if the title has not change then you will continue to get the previous title, there can also be a race condition between when the page view is triggered (via the listeners) and when you update the title. Generally, when you change the browser URL (if using auto tracking) you should also change the title as the trackPageView is "generally" scheduled (via setTimeout(..., 0)) to run on the next JS execution cycle.

[wbeeftink]

That makes sense. Then anyone running into this should probably add an event handler of sorts and call .trackPageView() from there (with the correct page title). Right?

The sample project has a similar approach by subscribing to the router events:

applicationinsights-angularplugin-js/sample/applicationinsights-angularplugin-sample/src/app/app.component.ts

Lines 20 to 34 in 643ffcb

	this.router.events
	.pipe(
	filter(
	(event): event is NavigationEnd => event instanceof NavigationEnd
	)
	)
	.subscribe((event) => {
	const activatedComponent = this.getActivatedComponent(event.state.root);
	if (activatedComponent) {
	this.appInsights.trackPageView({
	name: activatedComponent.name,
	uri: event.urlAfterRedirects,
	});
	}
	});

Perhaps it would prevent confusion to touch upon this behaviour somewhere in the documentation. I can imagine people might expect the 'correct' page title to be logged when using the Angular plugin—at least when using the native title strategy Angular provides.

[MSNev]

Agree, I've tagged as a documentation issue