How to remove error status 0 in the appInsight report?

[madebymt]

We are seeing error status 0 on our appInsight report, after troubleshoot find out it's not really an error on the app side, so is it possible we can remove them as report? If so how can we set in the config so won't show that anymore? Thanks

[MSNev]

Well, technically a Zero response is an error on the client (normally not your code), it tends to be the response when the end-user has an Ad-Blocker installed that causes the XHR or fetch request to get dropped.

There are a number of ways to cause an event to be dropped, either via

• A general Telemetry Initializer (https://github.com/microsoft/ApplicationInsights-JS#telemetry-initializers)
• A dependency specific initializer (https://github.com/microsoft/ApplicationInsights-JS/blob/master/docs/Dependency.md)

Where in both cases, from the callback function, if you return false the event will be dropped and not reported to Azure Monitor. Based on your other issue #2030, I'd recommends the dependency initializer approach (with a dependency listener to get the details of the request)

[madebymt]

Sorry for the late response. We found the issue when the user close the app will cause 0 error status report in app insight. Is this dependency similar to enableUnhandledPromiseRejectionTracking? https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-sdk-advanced Thanks for any suggestion.

[MSNev]

I'm not sure, what is the event "name" that is reporting the error status zero?

Microsoft.xxxx.Exception or Microsoft.xxxx.RemoteDependency?

If it's an Exception then it sounds like some sort of JS error is occurring and we would need to look at the stack trace to see where the error is occurring (Unhandled Promise rejection also throws "Exception" type events.). If it is one of these then it will be some promise that the system has created which "rejected" but your code is not providing a "catch" (or finally) implementation. AI doesn't use Promises (directly) because v2.x targets ES3 which doesn't support Promise. fetch is one of the one "things" that the SDK does that generates a promise -- but it does have a catch (exception when getting the text from a response).

If it's a RemoteDependency then this would be what I mentioned above where it's related to the browser (or Ad blocker) killing the XMLHttpRequest() or fetch()

Depending on which one will depend on how we can go about tracking / assisting to find the culprit.

[madebymt]

Can you show me where I can find the event name? what I found 0 status report below here. Two cases we know so far are

• user exit out the application, so response does not come back
• Firewall issue from the API

[MSNev]

The fact that it's in the "Dependency Properties" section of the portal, this tells me that it's a Microsoft.xxxx.RemoteDependency, if it was an Exception then it would appear in the "Errors" section of the portal..

Technically, the name is the name property at the root level of the event when it's sent (so you would need to look at the ITeemetryItem (the event object) within the browser to see this.

[madebymt]

Hi MSNew, Thank you for the quick response. May I ask where I can find all the property from the example of Telemetry, when I log envelope I got nothing in the browser console, so I'm not sure where I can find property from envelope, thank you!

var telemetryInitializer = (envelope) => {
  envelope.tags["ai.cloud.role"] = "your role name";
  envelope.tags["ai.cloud.roleInstance"] = "your role instance";
}
appInsights.addTelemetryInitializer(telemetryInitializer);

Documentation link: https://github.com/microsoft/ApplicationInsights-JS?tab=readme-ov-file#telemetry-initializers

[MSNev]

The Envelope is effectively a ITelemetryItem which describes some of the common values. There is no explicit documentation on what all of the values are as it varies depending on several factors

• The type of event (not every event has every property populated) -- Exceptions are the primary one
• Both data and baseData are defined as "maps" (objects with key/values) so the structure is driven by the implementation and the application
• For the "common" properties (all of the ext.* values) these are set by the PropertyPlugin in it's TelemetryContext class, this code runs before the telemetry initializers, so "if" there is a defined value then it will be populated.
• Some (but not all) of the "expected" properties of specific event "types" can be identified in the interfaces described here, but these are just "expected" properties that the backend portal (may) pull out and treat as a specific field.
• And lastly as we support "custom" events (where you can just call track with your own event name), the only "required" field is actually the event "name", while we will populate the time, instrumentation key and all of the Property Plugin values there is nothing else that is "mandatory" -- so if you are using "custom" events then it would be your definition.

To try and help with "understanding" whether your system is working and to be able to "see" the data getting sent (in a more visual form), we have the following to assist with development / debugging

• A Chrome extension https://github.com/microsoft/ApplicationInsights-JS/tree/main/tools/chrome-debug-extension
• And in-proc (runs in the context of your page / application insights instance) debug / visualizer https://github.com/microsoft/ApplicationInsights-JS/tree/main/extensions/applicationinsights-debugplugin-js

[madebymt]

Thanks again for your response, check out all of them now. Really appreciate your help.

[madebymt]

So I use dependency instead telemetry, because I'm trying to not handle dropout request call, so won't show error 0 in the appInsight dashboard. use the sample code from the doc. console.log never got hit, so I can't see the value for details overwrite it. Also try the chrome extension tool, don't have much information for me also. What am I missing? Thank you.

let handler = appInsights.addDependencyListener((details) => {
  console.log('details', details);
  // You have complete access to the xhr instance
  // details.xhr: XMLHttpRequest;

  // Or if a fetch request you have complete access to the input and init objects
  // details.input: Request | string;
  // details.init: RequestInit;

  // Access or change the W3C traceId that will be added to the outbound request
  details.traceId = '';

  // Access or change the W3C spanId that will be added to the outbound request
  details.spanId = '';

  // Access or change the W3C traceflags that will be added to the outbound request
  details.traceFlags = 1;

  // Add additional context values (any) that can be used by other listeners and is
  // also passed to any dependency initializers
  details.context.someValue = 1234;
});

// [Optional] Remove the dependency initializer
handler.remove();

[MSNev]

The dependency listener is only called for dependency (Ajax) requests (ie. XMLHttpRequest or fetch based requests) that are instrumented and will cause a dependency event to get sent. These events become "Microsoft..RemoteDependency" as the name.

[madebymt]

Thank you, we have initial request on the page load, and I try to click around in our app, which trigger other call still don't see the dependency details property in my console or debug tools. Here's my config not sure if they help:

export const appInsights = new ApplicationInsights({
  config: {
    connectionString: 'ourwebsite.com',
    enableAutoRouteTracking: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
    autoTrackPageVisitTime: true,
    overridePageViewDuration: true,
    enableUnhandledPromiseRejectionTracking: true,
    disableExceptionTracking: true,
    loggingLevelTelemetry: 2,
  },
});

Thank you for your help.

[MSNev]

That doesn't look like either

• There are an RemoteDependencies being captured / sent (you can use the search in the top right to search for Remote to see the contents
• The dependency listener is not getting added
• The dependency listener is not getting added to the instance that is capturing / sending the events.

If your using a worker, then both the worker and main page will need to have their own application insights instance....

Having said all this there are a lot of events getting sent on the same session, so I would expect its either of the last 2 options (unless of course there are no remote dependency events).

Do you also have the click analytics plugin installed (so it's capturing and sending events for page clicks)?

[madebymt]

Thanks for the quick response again.

• I don't see RemoteDependencies in the log
• When you said dependency listener is not getting added, do you mean the code below is not working is suppose to or something else I did not add?

let handler = appInsights.addDependencyListener((details) => { ... }
handler.remove()

• We don't use worker, so I don't think that's the case
• We do have third party click/page load analytics install. it's sending event to that.

Beside all the options above, do I miss anything else I might can try? Thank you!

[MSNev]

let handler = appInsights.addDependencyListener((details) => { ... }

Yes, this will add a dependency listener (my list above was just one of the options). I assume your NOT calling the handler.remove() directly after added as that will remove it and as a consequence it would not get called 😄

Looking at your config again, this should be adding telemetry and the Ajax (remote dependency) hooks, so if there are any XHR or fetch requests occurring we (should) be hooking them.

I'm also assuming that this connectionString: 'ourwebsite.com', is not what your really using as this should be the connection string from the portal -- if this is what is happening then this instance of the SDK would not "initialize" so that would explain why none of your code is getting called -- And the reasons there are notifications / events getting sent would be from some other instance on the page (you can see the instrumentationKey in the chrome extension for the events).

export const appInsights = new ApplicationInsights({
  config: {
    connectionString: 'ourwebsite.com',
    enableAutoRouteTracking: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
    autoTrackPageVisitTime: true,
    overridePageViewDuration: true,
    enableUnhandledPromiseRejectionTracking: true,
    disableExceptionTracking: true,
    loggingLevelTelemetry: 2,
  },
});

So what else might be going on....

Well depending on the framework you are using to "send" requests and when it gets initialized it is possible that when we "instrument" (hook) the XHR and fetch calls that these are not the ones your framework uses... This can occur for example if you are using a framework that "caches" the fetch instance (before) we get initialized as we effectively replace it with a proxy that internally calls the previous one (chained calling). So if you end up calling a cached "copy" of the function before we have replaced it then the SDK doesn't intercept anything and will not send Remote Dependency calls -- BUT you do seem to be getting these in the portal...

Probably, should have asked this eariler, but what version of the SDK are you using?

[madebymt]

Thanks for explain it to me. Yes, I did call handler.reomve() right after declare, I can log handler will show :

handler:{ 
     remove: function.
 }

but the console.log in side the handler with details never get log. connectionString I put ourwebsite.com just for example. I can see other custom event and logs in the appInsight. just trying to not report the error status 0 in the appInsight.

The version I'm using: @microsoft/applicationinsights-web": "^3.1.0" Sorry forgot to mention about that.

---

I did see telemetry one work in the log, but does not achieve the goal to not report error status 0, here's the code I use from the documentation.

var telemetryInitializer = (envelope) => {
  envelope.tags["ai.cloud.role"] = "your role name";
  envelope.tags["ai.cloud.roleInstance"] = "your role instance";
}
appInsights.addTelemetryInitializer(telemetryInitializer);

Also I was just checking again for the chrome extension for, now has error won't let me see any event now, here's the error message, but might be not related to this issue. error message for chrome extention

Manifest version 2 is deprecated, and support will be removed in 2024. See https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline for details.

Thanks again for your help.

[MSNev]

Manifest version 2 is deprecated, and support will be removed in 2024. See https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline for details.

😢 We have been planning on updating to the current manifest -- we just haven't had the time. I guess we should try and schedule as soon as possible now then.

[MSNev]

I did see telemetry one work in the log, but does not achieve the goal to not report error status 0, here's the code I use from the documentation.

One thing you can do (I don't remember if I've mentioned in this thread) is that both telemetry initializers functions, if you return false (there is an eplicit === (so it must be false, not just something falsey) then the event will not be reported (sent).

So in the telemetry initializer above if the name is the Microsoft..RemoteDependency and the status is zero then return false. There is a subtle difference between "where" you do this as if it's done at the addTelemetryInitializer level then the "dependency" still counts towards the maximum number of dependency events that will attempt to be sent, while doing this within the dependency initializer / listener telling it to drop the event doesn't count towards the maximum.

[MSNev]

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

I'm not aware of any issues (bugs) that would cause a dependency initializer / listener (when not removed 😁 ) to not get called...

[madebymt]

OK, I'll keep looking see if I miss anything. Thank you for your help.