How to log request count, pageviews in azure app insight using js sdk

Question

I have nextJs application.

Telemetry.ts

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

const appInsights = new ApplicationInsights({
  config: {
    connectionString:
      'InstrumentationKey=<<connectionString>>',
  },
});

appInsights.loadAppInsights();
export { appInsights };

Document.ts

import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
import { appInsights } from 'services/telemetry';

appInsights.trackPageView();
appInsights.startTrackPage();
const Document = () => {
return ();
}

1. The document page is the homepage. So when ever I hit the homepage I can able to see the PageViews logs are getting populated in the log table. But it doesn't give any information like below. What I expect is atleast the url of the page which loads this application. But the below information doesn't provide anything.

2. I read that difference between operation vs dependency. That the request will be tagged under operations and the response will be under dependency (correct me if I'm wrong). But in the above case even though I can see the page views in logs. I don't see the graph spike for request count in neither the operation nor the dependency. Is there anything I'm missing.

3. How to log each request(url and page information) for each page views I'm visiting. Is there anything apart from the above need to be done.

Answer 1

Thanks @Nirbhay luthra for the clear steps to Integrate Application Insights in Next JS Application.

As mentioned by Nirbhay luthra, we can use React Plugin to track page views and requests.

You can see the same is mentioned in the MSDoc 1 and 2

To Log Pageviews and Requests you need to add the js script in the default page/home page of the application.

But it doesn't give any information like below. What I expect is atleast the url of the page which loads this application.

You can check the detailed information of the request/ page view in the Transaction section of Application Insights.

Click on any of the request, it will be navigated to the End-to-end transaction details,which contains the URL and other details.

• Check the more detailed information and graphs in Metrics section.

Refer SO Thread which I have answered for Angular.