Remove initial route track persisting

[yasso1am]

Not sure how to apply a "Question" label but that's what this is:
version = "react-appinsights": "^3.0.0-rc.6",

I really appreciate that the initial route is tracked upon entry of the app, however it appears this context is remaining for every future call in my custom dimensions.

You can see in this screenshot I enter at /login and localhost:3000/login persists in the custom dimensions even though I am never setting that.

Here is my helper class:

import env from '../environment';
import { reactAI } from 'react-appinsights';
import { ApplicationInsights, ITraceTelemetry } from '@microsoft/applicationinsights-web';
import { ICustomProperties } from '@microsoft/applicationinsights-core-js';

import { history } from './history';

class Insights {
  private ai: ApplicationInsights;
  constructor() {
    this.ai = new ApplicationInsights({
      config: {
        instrumentationKey: `${env.appInsights.instrumentationKey}`,
        extensions: [reactAI],
        extensionConfig: {
          [reactAI.extensionId]: {
            debug: true,
            history: history,
          }
        }
      }
    });
    this.ai.loadAppInsights();
  }

const AppInsightsService = new Insights();

export { AppInsightsService };

after calling this.ai.loadAppInsights() I tried calling reactAI.setContext({}) to remove any customDimensions but that did not help.

Any suggestions?

Thank you.

[hiraldesai]

reactAI.setContext() is meant to be additive only - if you want to wipe previous use reactAI.setContext({}, true); overload with clearPrevious = true.

The purpose of it being additive is because sometimes you'd want to set some initial context and then add more to it as per the application flow (e.g. user sign in).

[yasso1am]

Hiral Desai (@hiraldesai) Thank you - I actually found this previously while digging through the source code but I don't think it actually worked when implemented. Let me test and I'll report back. Thank you.

[yasso1am]

Entered my app at '/' and went from there to /loggedin => /photos => /success => / as the screenshot below confirms.

You can also see that initially context has an object with key "refUri" initially, but then is removed once I clear context with react.setContext({}, true) after calling loadAppInsights();

Here is the corresponding analytics from App Insights

As you can see, it wipes out the value initial page load to / however oddly keeps the key "refUri" around, for this and all subsequent calls. I've looked through the reactAI source code and can't find refUri specifically referenced anywhere oddly, just uri. Is this getting added in by something in the applicationinsights package?

[hiraldesai]

It seems to be added by the application-insights package's trackPageView only. ReactAI doesn't set this anywhere.

[yasso1am]

Fair enough, just strange that it doesn't seem to be moving accurately with the router. The url column is accurately updated by reactAI, but application-insights seems to be holding on to the original route.

Here is my current configuration:

this.ai = new ApplicationInsights({
      config: {
        instrumentationKey: `${env.appInsights.instrumentationKey}`,
        extensions: [reactAI],
        extensionConfig: {
          [reactAI.extensionId]: {
            debug: true,
            history: history,
            initialContext: {
              appEntry: true,
            }
          }
        }
      }
    });

    this.ai.loadAppInsights();
    reactAI.setContext({}, true);

In the config on initialization I am setting some initial context so I know that is where my user is entering the app, and then removing the context immediately after loadAppInsights().

It's a little hacky, but this way I can at least see where my user enters the app, and rely on the url column being accurate to tell me where they tried to enter from (in my example I just put in a garbage url which redirects to the root/homepage)

[yasso1am]

Another thought I had is to go to index.html entry point for my app and set <title>Byte Entry</title>.

The user should only see that render for a second unless they go directly to a page that doesn't exist, but instead of Byte (my default) I would see Byte Entry and that would allow me to track the user a little better.

I'll keep playing and see if I can find a cleaner way.

[hectorhdzg]

Andrew Yasso (@yasso1am) refUri is populated in ApplicationInsights SDK, is actually using document.referrer value, so it will be useful to understand how users are getting into your page from other sites not how they navigate your site.