[BUG] Page view loading time not correct

[RonCocoa]

Description/Screenshot
We are using trackPageView function to upload the page view data into the application insight. Data has been updates as expected but the page loading time seem to be constant for all the pages. Page loading time is not real. We are using react function to create the components. We are not following the class structure.

• OS/Browser: ALL
• React Version: 18.2.0
• SDK Version [e.g. 22]: 17.0.0
• How you initialized the SDK:
  var reactPlugin = new ReactPlugin();
  var appInsights = new ApplicationInsights({
  config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
  extensions: [reactPlugin]
  }
  }
  });
  appInsights.loadAppInsights();
  Expected behavior
  Page view loading time should be actual time.

[MSNev]

I believe that this is related to microsoft/ApplicationInsights-JS#2180

Can I assume that you are using v3.0.3 of the underlying Application Insights library?

Please try updating to a later version.

Also note that we have release v17.0.1 and 17.0.2 (which still target ^3.0.3) with some bug fixes and we are working on a 17.0.3 which we will release once we finish investigating #59 which will target a later version of AI to avoid this issue with 3.0.3.

[RonCocoa]

we are using following version:
"@microsoft/applicationinsights-react-js": "^17.0.2",
"@microsoft/applicationinsights-web": "^3.0.3",
and still having same issue.

[MSNev]

What version of the applicationinsights-web is in your package-lock.json (or shrinkwrap.json), as you will need at least v3.0.4 or later to avoid the known issue which seems to be the same as what you are mentioning.

[RonCocoa]

I have 3.0.5

[MSNev]

Hmm, with v3.0.5 the "first" page load time will now be the page load time available from the browser performance timings and all "subsequent" (should) now be the current time the event was observed (this was always the default prior to v3.0.3). https://github.com/microsoft/ApplicationInsights-JS/blob/7f804d81e3036d5115c0c8e859dec5c4ce08b269/extensions/applicationinsights-analytics-js/src/JavaScriptSDK/Telemetry/PageViewManager.ts#L100-L116

[MSNev]

If you are creating a "new" application insights instance for each "page" (not recommended) then you would not only see the same "time" for every page view (as described -- from v3.0.5 onwards), but unless you are also calling unload() on the previous sdk instance this would cause all of the "automatic" events (such as the dependencies (XHR and fetch requests)) to be sent once per SDK instance that has ever been initialized.

[RonCocoa]

This is our initialized code. And we have initialize the instance only once. After that onwards we are using same instance.
var reactPlugin = new ReactPlugin();
var appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
extensions: [reactPlugin]
}
}
});
appInsights.loadAppInsights();

We have debug the code and and only one time this code executed.
And after that onwards we are calling
const appInsights = useAppInsightsContext();
appInsights.trackPageView(pageViewData);

And init we are not using any automatic event capturing. As you can find in initialize method.
Still we are facing same issue.

[MSNev]

@siyuniu-ms can you please investigate

[siyuniu-ms]

Hi, could you have a try of 17.0.3 which was released last friday with the latest application-insight version and see whether the bug still persist?

[RonCocoa]

I am facing same issue again after updating the 17.0.3 version.

[MSNev]

@siyuniu-ms please try and reproduce

[siyuniu-ms]

@RonCocoa Hi there, I've conducted some tests locally using the following versions:

• @microsoft/applicationinsights-react-js: ^17.0.3
• @microsoft/applicationinsights-web: ^3.0.7

During testing, I called multiple appInsights.trackPageView() and observed different timestamps. To provide more context, I've included the data from the Azure portal in the image below:

I'm reaching out to gather additional information that might help in reproducing the problem. Specifically, could you provide more details on how the pageViewData object is created in the snippet code you shared earlier - appInsights.trackPageView(pageViewData)? This information will be valuable in understanding and addressing the issue.

Looking forward to your response!

[RonCocoa]

@siyuniu-ms
Application insight function from where we are building the page object:
export const useTrackPageView = (pageName: string, userProfile: UserProfile) => {
const appInsights = useAppInsightsContext();
useEffect(() => {
const pageViewProps = {
name: pageName,
properties: {
UserName: userProfile?.name || '',
JobTitle: userProfile?.jobtitle || ''
}
};
appInsights.trackPageView(pageViewProps);
}, [appInsights, pageName, userProfile]);
};

From this .ts class we are calling above method:

const containerBoard = ({
containercompletionTime
}: containerType) => {
useTrackPageView('container board', UserProfile);
return (

<Grid item spanCols={{ d: 12, ml: 8, m: 4 }}>

{test_container}

);
};

export default containerBoard;

[siyuniu-ms]

I assume const appInsights = useAppInsightsContext(); the function useAppInsightsContext is trying to get the appInsights that was created when init sdk
here:
var reactPlugin = new ReactPlugin();
var appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
extensions: [reactPlugin]
}
}
});
And was not created multiple times right.

[siyuniu-ms]

could you double check the version is "@microsoft/applicationinsights-react-js": "^17.0.3",
"@microsoft/applicationinsights-web": "^3.0.7" also?

[siyuniu-ms]

Hi, @RonCocoa. I've created a demo app at https://github.com/siyuniu-ms/react-appinsights using the provided code. Upon running it locally, I didn't encounter the same pageViewTime bug you described.

To assist you better, could you please check the code, compare to yours and share additional details on how to reproduce the specific issue you are encountering? Any information you provide will be incredibly helpful in identifying and addressing the problem.

[RonCocoa]

@siyuniu-ms the difference I have seen in both code is:
Initialization:
enableAutoRouteTracking: true,
disableAjaxTracking: false,
autoTrackPageVisitTime: true,
enableCorsCorrelation: true,
enableRequestHeaderTracking: true,
enableResponseHeaderTracking: true,
}

I did not use any of above flags. is these flags are mandatory?

[siyuniu-ms]

No, they are not. I removed them and tested again. The timestamps are still different. Try pull my latest change and locally run it.