App Insights not showing data ingested via Angular app

Question

App Insights not showing data ingested via Angular app

Ara Martirosyan 20

I provisioned Application Insights (aym1-app-insights-test). Then I started to ingest data via Angular app, you can see the below payload. After waiting for 4 hours I still cannot see any logs. Please advise.

[

{

	"time": "2025-12-02T18:56:52.521Z",

	"iKey": "e941a837-ef4f-4793-bb8e-2df6367a63e0",

	"name": "Microsoft.ApplicationInsights.e941a837ef4f4793bb8e2df6367a63e0.RemoteDependency",

	"tags": {

		"ai.user.authUserId": "ef50dfc4-ea6d-49bc-a6e8-4e3af9229844",

		"ai.user.id": "c4bxj+8Uz4HAHnVyfystT2",

		"ai.session.id": "hs2ypmEEAwJRK8bT6Ugcsi",

		"ai.device.id": "browser",

		"ai.device.type": "Browser",

		"ai.operation.name": "/advisor/products",

		"ai.operation.id": "2fdf534f8f2a4ace9be130cb6858faef",

		"ai.internal.sdkVersion": "javascript:3.3.10"

	},

	"data": {

		"baseType": "RemoteDependencyData",

		"baseData": {

			"id": "|2fdf534f8f2a4ace9be130cb6858faef.084a9931dd714b04.",

			"ver": 2,

			"name": "GET https://localhost:7195/api/products?status=Submitted",

			"resultCode": "200",

			"duration": "00:00:01.317",

			"success": true,

			"data": "GET https://localhost:7195/api/products?status=Submitted",

			"target": "localhost:7195",

			"type": "Fetch",

			"properties": {

				"HttpMethod": "GET"

			},

			"measurements": {}

		}

	}

},

{

	"time": "2025-12-02T18:56:59.824Z",

	"iKey": "e941a837-ef4f-4793-bb8e-2df6367a63e0",

	"name": "Microsoft.ApplicationInsights.e941a837ef4f4793bb8e2df6367a63e0.Event",

	"tags": {

		"ai.user.authUserId": "ef50dfc4-ea6d-49bc-a6e8-4e3af9229844",

		"ai.user.id": "c4bxj+8Uz4HAHnVyfystT2",

		"ai.session.id": "hs2ypmEEAwJRK8bT6Ugcsi",

		"ai.device.id": "browser",

		"ai.device.type": "Browser",

		"ai.operation.name": "/advisor/products",

		"ai.operation.id": "2fdf534f8f2a4ace9be130cb6858faef",

		"ai.internal.sdkVersion": "javascript:3.3.10"

	},

	"data": {

		"baseType": "EventData",

		"baseData": {

			"ver": 2,

			"name": "KycStarted",

			"properties": {

				"aaa": "xxx",

				"source": "app"

			},

			"measurements": {}

		}

	}

},

{

	"time": "2025-12-02T18:57:00.455Z",

	"iKey": "e941a837-ef4f-4793-bb8e-2df6367a63e0",

	"name": "Microsoft.ApplicationInsights.e941a837ef4f4793bb8e2df6367a63e0.Pageview",

	"tags": {

		"ai.user.authUserId": "ef50dfc4-ea6d-49bc-a6e8-4e3af9229844",

		"ai.user.id": "c4bxj+8Uz4HAHnVyfystT2",

		"ai.session.id": "hs2ypmEEAwJRK8bT6Ugcsi",

		"ai.device.id": "browser",

		"ai.device.type": "Browser",

		"ai.operation.name": "/advisor/products/request/note",

		"ai.operation.id": "942a824e9b374e05a58e05e1ccb20c3d",

		"ai.internal.sdkVersion": "javascript:3.3.10",

		"ai.internal.snippet": "-"

	},

	"data": {

		"baseType": "PageviewData",

		"baseData": {

			"ver": 2,

			"name": "Aymone Platform",

			"url": "http://localhost:4200/advisor/products/request/note",

			"duration": "00:00:00.000",

			"properties": {

				"refUri": "http://localhost:4200/advisor/products"

			},

			"measurements": {

				"duration": 0

			},

			"id": "942a824e9b374e05a58e05e1ccb20c3d"

		}

	}

}

]

Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-02T21:59:31.06+00:00
Hello Ara Martirosyan,

It sounds like you're having some trouble with Application Insights not showing the data ingested from your Angular app.

Make sure that the instrumentation key (iKey) you've included in your Angular application payload matches the one for your Application Insights resource. If it's incorrect, you won't see the data.

Ensure that your firewall settings allow traffic over port 443 (HTTPS), as this is necessary for Application Insights to send telemetry data. Azure Monitor endpoint access and firewall configuration - Azure Monitor | Microsoft Learn

Double-check that you have correctly set up Application Insights for JavaScript. If your app is a Single Page Application, ensure that you have configured the SDK instance to work correctly in that context. Microsoft Azure Monitor Application Insights JavaScript SDK - Azure Monitor | Microsoft Learn

Utilize the Application Insights diagnostics tools to identify issues with your configuration. These tools will scan your telemetry and may flag issues related to missing or misconfigured settings.

If you've checked all these and still don't see any data, Please help us with the below details:

Are you seeing any error messages in the console of your browser?

Did you make sure to include the necessary Application Insights JavaScript SDK in your Angular app?

In your Angular code, are you using the exact connection string from the aym1-app-insights-test resource (not an old instrumentation key from another resource)?

When you open the browser’s developer tools, do you see POST requests going out to dc.services.visualstudio.com or *.applicationinsights.azure.com? If so, what status codes do they return?

Thanks.
Ara Martirosyan 20 Reputation points

2025-12-02T22:18:19.88+00:00

Thanks for the response.

Are you seeing any error messages in the console of your browser?
No

Did you make sure to include the necessary Application Insights JavaScript SDK in your Angular app? Yes

In your Angular code, are you using the exact connection string from the aym1-app-insights-test resource (not an old instrumentation key from another resource)?
Yes

When you open the browser’s developer tools, do you see POST requests going out to dc.services.visualstudio.com or *.applicationinsights.azure.com? If so, what status codes do they return?
Yes, I already posted the payload and the status code is 206 Partial Content

Hope this will helps to narrow down the issue.
Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-03T10:39:33.6133333+00:00
Hello Ara Martirosyan, Thanks for the update,

Could you please confirm that how the Application Insights SDK is initialized properly in your Angular app? also confirm loadAppInsights() is initialized or not?

you can try to look for the data in the right tables. Go to Logs in your Application Insights resource. Run:

union traces, requests, pageViews, customEvents | order by timestamp desc

Check that the resource is linked to a Log Analytics workspace, and that you’re querying that workspace if needed.
Ara Martirosyan 20 Reputation points

2025-12-04T06:54:38.5066667+00:00
Hi Bharath,

Thanks for the response. I have the following library installed and initialized correctly in the Angular app:

"@microsoft/applicationinsights-web": "^3.3.10"

and yes I have loadAppInsights() as well. You can see the payload in the initial post and here is the response:

{

"itemsReceived": 2, "itemsAccepted": 0, "appId": null, "errors": [ { "index": 0, "statusCode": 206, "message": "Telemetry sampled out." }, { "index": 1, "statusCode": 206, "message": "Telemetry sampled out." } ]

}

I am making a POST request to https://uksouth-1.in.applicationinsights.azure.com/v2/track using localhost and getting 206 Partial Content status code. I don't see any customEvents in the Kusto query that you provided. Hopefully this gives you enough clues.

Looking forward to your response. Thanks.
Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-04T22:00:46.8966667+00:00
Hello Ara Martirosyan, Thanks for the update. The 206 Partial Content with “Telemetry sampled out” means your telemetry is being dropped by sampling before ingestion. This is expected when the SDK or the Application Insights resource applies sampling to reduce volume.

Why you see itemsAccepted: 0

The Angular SDK (@microsoft/applicationinsights-web) uses adaptive sampling by default.

If the sampling rate is set (e.g., 100% means keep all, 50% means keep half), some events will be discarded and you’ll see Telemetry sampled out.

The ingestion endpoint returns 206 when some items are dropped due to sampling.

In your Angular initialization code, set samplingPercentage to 100:

import { ApplicationInsights } from '@microsoft/applicationinsights-web'; const appInsights = new ApplicationInsights({ config: { instrumentationKey: '<YOUR-INSTRUMENTATION-KEY>', samplingPercentage: 100, // Keep all telemetry enableAutoRouteTracking: true } }); appInsights.loadAppInsights();

After disabling sampling:

Trigger a custom event:

appInsights.trackEvent({ name: 'TestEvent', properties: { foo: 'bar' } });

Check in Log Analytics with KQL:

customEvents | where name == "TestEvent"

Reference: Microsoft Azure Monitor Application Insights JavaScript SDK configuration - Azure Monitor | Microsoft Learn
Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-05T19:05:00.5966667+00:00

Hello Ara Martirosyan, I just wanted to kindly follow up to check if you had a chance to review my earlier response. I hope the information shared was helpful. Please feel free to reach out if you have any additional questions or need further clarification. If the answer addressed your query, it would be great if you could accept it and up-vote. This not only helps us but also makes it easier for other community members who might face the same issue.

Ara Martirosyan 20

Hi Bharath,

Thanks for the follow-up. I've changed my settings according to your comment, but getting the same result:

{

"itemsReceived": 2,

"itemsAccepted": 0,

"appId": "9f00a52f-6f59-4ffd-a0d7-911b4bf45eff",

"errors": [

    {

        "index": 0,

        "statusCode": 206,

        "message": "Telemetry sampled out."

    },

    {

        "index": 1,

        "statusCode": 206,

        "message": "Telemetry sampled out."

    }

]

}

Here is my amended code if that helps to narrow down the issue.

@Injectable({ providedIn: 'root' })
export class AppInsightsService {
  private readonly appInsights!: ApplicationInsights;

  constructor() {

    const connectionString = environment.appInsights?.connectionString;

    this.appInsights = new ApplicationInsights({
        config: {
          //connectionString: environment.appInsights.connectionString,
          instrumentationKey: environment.appInsights.instrumentationKey,
          enableAutoRouteTracking: true,
          samplingPercentage: environment.appInsights.samplingPercentage
        },
      });

    if (connectionString) {
      this.appInsights.loadAppInsights();
    } else {
      console.warn('Application Insights disabled: no connection string configured.');
    }
  }

  setUser(userId: string | null) {
    if (userId) {
      this.appInsights.setAuthenticatedUserContext(userId);
    } else {
      this.appInsights.clearAuthenticatedUserContext();
    }
  }

  trackEvent(name: string, properties?: { [key: string]: any }) {
    this.appInsights.trackEvent({ name }, properties);
  }

  trackException(error: Error, severityLevel = 3) {
    this.appInsights.trackException({ error, severityLevel });
  }
}

and in environment.ts I have:

appInsights: {
        samplingPercentage: 100,
        instrumentationKey: 'my-key'
    }

1 answer

Your answer

Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-02T21:59:31.06+00:00

Hello Ara Martirosyan,

It sounds like you're having some trouble with Application Insights not showing the data ingested from your Angular app.

Make sure that the instrumentation key (iKey) you've included in your Angular application payload matches the one for your Application Insights resource. If it's incorrect, you won't see the data.

Ensure that your firewall settings allow traffic over port 443 (HTTPS), as this is necessary for Application Insights to send telemetry data. Azure Monitor endpoint access and firewall configuration - Azure Monitor | Microsoft Learn

Double-check that you have correctly set up Application Insights for JavaScript. If your app is a Single Page Application, ensure that you have configured the SDK instance to work correctly in that context. Microsoft Azure Monitor Application Insights JavaScript SDK - Azure Monitor | Microsoft Learn

Utilize the Application Insights diagnostics tools to identify issues with your configuration. These tools will scan your telemetry and may flag issues related to missing or misconfigured settings.

If you've checked all these and still don't see any data, Please help us with the below details:

Are you seeing any error messages in the console of your browser?

Did you make sure to include the necessary Application Insights JavaScript SDK in your Angular app?

In your Angular code, are you using the exact connection string from the aym1-app-insights-test resource (not an old instrumentation key from another resource)?

When you open the browser’s developer tools, do you see POST requests going out to dc.services.visualstudio.com or *.applicationinsights.azure.com? If so, what status codes do they return?

Thanks.
Ara Martirosyan 20 Reputation points

2025-12-02T22:18:19.88+00:00

Thanks for the response.

Are you seeing any error messages in the console of your browser?
No

Did you make sure to include the necessary Application Insights JavaScript SDK in your Angular app? Yes

In your Angular code, are you using the exact connection string from the aym1-app-insights-test resource (not an old instrumentation key from another resource)?
Yes

When you open the browser’s developer tools, do you see POST requests going out to dc.services.visualstudio.com or *.applicationinsights.azure.com? If so, what status codes do they return?
Yes, I already posted the payload and the status code is 206 Partial Content

Hope this will helps to narrow down the issue.
Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-03T10:39:33.6133333+00:00

Hello Ara Martirosyan, Thanks for the update,

Could you please confirm that how the Application Insights SDK is initialized properly in your Angular app? also confirm loadAppInsights() is initialized or not?

you can try to look for the data in the right tables. Go to Logs in your Application Insights resource. Run:

union traces, requests, pageViews, customEvents | order by timestamp desc

Check that the resource is linked to a Log Analytics workspace, and that you’re querying that workspace if needed.
Ara Martirosyan 20 Reputation points

2025-12-04T06:54:38.5066667+00:00

Hi Bharath,

Thanks for the response. I have the following library installed and initialized correctly in the Angular app:

"@microsoft/applicationinsights-web": "^3.3.10"

and yes I have loadAppInsights() as well. You can see the payload in the initial post and here is the response:

{

"itemsReceived": 2, "itemsAccepted": 0, "appId": null, "errors": [ { "index": 0, "statusCode": 206, "message": "Telemetry sampled out." }, { "index": 1, "statusCode": 206, "message": "Telemetry sampled out." } ]

}

I am making a POST request to https://uksouth-1.in.applicationinsights.azure.com/v2/track using localhost and getting 206 Partial Content status code. I don't see any customEvents in the Kusto query that you provided. Hopefully this gives you enough clues.

Looking forward to your response. Thanks.
Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-04T22:00:46.8966667+00:00

Hello Ara Martirosyan, Thanks for the update. The 206 Partial Content with “Telemetry sampled out” means your telemetry is being dropped by sampling before ingestion. This is expected when the SDK or the Application Insights resource applies sampling to reduce volume.

Why you see itemsAccepted: 0

The Angular SDK (@microsoft/applicationinsights-web) uses adaptive sampling by default.

If the sampling rate is set (e.g., 100% means keep all, 50% means keep half), some events will be discarded and you’ll see Telemetry sampled out.

The ingestion endpoint returns 206 when some items are dropped due to sampling.

In your Angular initialization code, set samplingPercentage to 100:

import { ApplicationInsights } from '@microsoft/applicationinsights-web'; const appInsights = new ApplicationInsights({ config: { instrumentationKey: '<YOUR-INSTRUMENTATION-KEY>', samplingPercentage: 100, // Keep all telemetry enableAutoRouteTracking: true } }); appInsights.loadAppInsights();

After disabling sampling:

Trigger a custom event:

appInsights.trackEvent({ name: 'TestEvent', properties: { foo: 'bar' } });

Check in Log Analytics with KQL:

customEvents | where name == "TestEvent"

Reference: Microsoft Azure Monitor Application Insights JavaScript SDK configuration - Azure Monitor | Microsoft Learn
Bharath Y P 2,560 Reputation points Microsoft External Staff Moderator

2025-12-05T19:05:00.5966667+00:00

Hello Ara Martirosyan, I just wanted to kindly follow up to check if you had a chance to review my earlier response. I hope the information shared was helpful. Please feel free to reach out if you have any additional questions or need further clarification. If the answer addressed your query, it would be great if you could accept it and up-vote. This not only helps us but also makes it easier for other community members who might face the same issue.
Ara Martirosyan 20 Reputation points

2025-12-06T10:08:46.7266667+00:00

Hi Bharath,

Thanks for the follow-up. I've changed my settings according to your comment, but getting the same result:

{

"itemsReceived": 2, "itemsAccepted": 0, "appId": "9f00a52f-6f59-4ffd-a0d7-911b4bf45eff", "errors": [ { "index": 0, "statusCode": 206, "message": "Telemetry sampled out." }, { "index": 1, "statusCode": 206, "message": "Telemetry sampled out." } ]

}

Here is my amended code if that helps to narrow down the issue.

@Injectable({ providedIn: 'root' }) export class AppInsightsService { private readonly appInsights!: ApplicationInsights; constructor() { const connectionString = environment.appInsights?.connectionString; this.appInsights = new ApplicationInsights({ config: { //connectionString: environment.appInsights.connectionString, instrumentationKey: environment.appInsights.instrumentationKey, enableAutoRouteTracking: true, samplingPercentage: environment.appInsights.samplingPercentage }, }); if (connectionString) { this.appInsights.loadAppInsights(); } else { console.warn('Application Insights disabled: no connection string configured.'); } } setUser(userId: string | null) { if (userId) { this.appInsights.setAuthenticatedUserContext(userId); } else { this.appInsights.clearAuthenticatedUserContext(); } } trackEvent(name: string, properties?: { [key: string]: any }) { this.appInsights.trackEvent({ name }, properties); } trackException(error: Error, severityLevel = 3) { this.appInsights.trackException({ error, severityLevel }); } }

and in environment.ts I have:

appInsights: { samplingPercentage: 100, instrumentationKey: 'my-key' }

Answer 1

Ara Martirosyan 20

Finally, I could solve it by setting sampling via Azure CLI:

az resource update --resource-group my-rg --name my-app-insights --resource-type "Microsoft.Insights/components" --set properties.SamplingPercentage=100

Share via

App Insights not showing data ingested via Angular app

1 answer

Your answer