[BUG] trackEvent return undefined

[madebymt]

Description/Screenshot Trying to track click event but appInsight.trackEvent(eventName) return undefined, and will not show up at the log

Steps to Reproduce

1. npm install package
2. AppInsight file, so I can call it for places have button click

AppInsight.js

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

export class TrackAppInsights {
  constructor() {
    this.appInsight = new ApplicationInsights({
      config: {
        connectionString:  'staging.url',
        enableAutoRouteTracking: true,
      },
    });
  }

  initAppInsights() {
    this.appInsight.loadAppInsights();
  }

  trackAppEvent(event) {
    console.log('app', this.appInsight)  // log result in image 1
    console.log('app-2', this.appInsight.appInsights); // log result in image 2
    console.log('this.appInsight', this.appInsight.trackEvent(event));   // <---- show undefined
    this.appInsight.trackEvent(event);
  }
}

test.js

import { AppInsightsService } from './AppInsight';
const appInsights = new AppInsightsService();

.....
// When button click I use this code
appInsights.trackAppEvent({
   name: 'click-test',
});

• OS/Browser: Chrome 120.0
• SDK Version [e.g. 22]: "@microsoft/applicationinsights-web": "^3.0.0",
• How you initialized the SDK: npm

Expected behavior

• Should show up in the app insight report --> transaction search ---> custom event select it

Image 1

image 2

Thanks for any suggestion.

[MSNev]

I'm not sure I'm following... console.log('this.appInsight', this.appInsight.trackEvent(event)); // <---- show undefined This is expected as the this.appInsight.trackEvent(event); doesn't return anything so it will always be undefined

Depending on the content of the event your passing in it might be that it's considered to be invalid, for some reason but...

Should show up in the app insight report --> transaction search ---> custom event select it I Agree, and the usage you have with the name looks fine.

You might want to install the chrome debug extension https://github.com/microsoft/ApplicationInsights-JS/tree/main/tools/chrome-debug-extension which not only shows the sent events but will also show some internal error messages and failures return from the endpoint.

[madebymt]

Thanks! I'll check that.

[madebymt]

I download it, do see any particular error still don't see custom event log in app insight.

[MSNev]

The screen shot is only showing the notifications (telling me that the internal network requests are being sent), as the events are not showing I assume that you have the "Network" unchecked.

If you enable that you can use the "Filter..." text box to just type in your "click-test" (without the quotes) to find all references in the instance. If it's not being sent (and as you are not seeing any errors) then will probably need to debug into the code to see why the event is getting dropped / ignored (as the provided code fragments should work)