How to load and unload Azure App Insights for web pages in JavaScript

Question

I have followed this guide and this guide to add Azure App Insights to our Angular application. It works great but the problem I am having is how can we start/load and stop/unload tracking of the insights conditionally?

Basically, we have a toggle in our application that allows the user to turn on collection of data and Application Insights should be analyzing and collecting the data. Once the user turns this toggle off, it should stop analyzing and tracking.

It seems once we call this.appInsights.loadAppInsights(), there is no way to unlatch/unload/stop listening. If there is a way to unlatch/unload/stop listening, please let me know.

Thanks.

This question doesn't really have anything to do with angular or typescript so I've removed the tags — Liam
– Liam, Commented Nov 4, 2020 at 8:45
Thanks for the answer Ivang Yang. When I get the chance, I will try it out and get back to you. — AliF50
– AliF50, Commented Nov 13, 2020 at 1:46
Hey @IvanYang thanks for the documentation. I posted my answer below and it seems to work. If you want to add your answer, I can accept it. — AliF50
– AliF50, Commented Nov 13, 2020 at 15:42

Ivan Glasenberg · Accepted Answer · 2020-11-16 00:28:29Z

1

You can refer to the doc Disabling telemetry.

For example, if you want to unload app insights in javascript, use the code below:

telemetry.config.disableAppInsights = true;

answered Nov 16, 2020 at 0:28

Ivan Glasenberg

30.3k2 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AliF50 · Accepted Answer · 2020-11-13 15:42:04Z

I ended up creating a common service related to everything with AppInsights inspired from here.

import { AngularPlugin, AngularPluginService } from '@microsoft/applicationinsights-angularplugin-js';
import {
  ApplicationInsights,
  IEventTelemetry,
  IExceptionTelemetry
 } from '@microsoft/applicationinsights-web';
....

export class ApplicationInsightService {
  private appInsights: ApplicationInsights;

  constructor(private router: Router, private angularPluginService: AngularPluginService) {
    const angularPlugin = new AngularPlugin();
    this.angularPluginService.init(angularPlugin, this.router);
    this.appInsights = new ApplicationInsights({ config: {
      instrumentationKey: 'Your key here',
      extensions: [angularPlugin],
      extensionConfig: {
        [angularPlugin.identifier]: { router: this.router },
      }
    }});
    this.appInsights.loadAppInsights();
    this.appInsights.trackPageView();
  }

  setUserId(userId: string) {
    this.appInsights.setAuthenticatedUserContext(userId);
  }

  clearUserId() {
    this.appInsights.clearAuthenticatedUserContext();
  }

  logPageView(name?: string, uri?: string) {
    this.appInsights.trackPageView({ name, uri });
  }

  logEvent(event: IEventTelemetry, customProperties: { [key: string]: any }) {
    this.appInsights.trackEvent(event, customProperties);
  }

  trackError(exception: Error) {
    let telemetry = {
      exception,
    } as IExceptionTelemetry;
    this.appInsights.trackException(telemetry);
  }

  stopTelemetry() { // !! this is how you stop tracking
    this.appInsights.config.disableTelemetry = true;
  }

  startTelemetry() { // !! this is how you start/re-start it
    this.appInsights.config.disableTelemetry = false;
  }
}

The JavaScript part of the documentation was not helpful because those methods/properties didn't exist but the C# documentation helped and it seems to be similar to that.

Collectives™ on Stack Overflow

How to load and unload Azure App Insights for web pages in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related